[Problem of delay on TweenMax]

Thank you so much Mulegoat ! 

[Problem of delay on TweenMax]

Hi,

 

I'm not an expert in GSAP and I have some troubles with my SVG animation. 

Indeed,  I want to create a pre-loading effect on my page but I have some issues regarding the delay. I made a screenshot which show my problem : https://vimeo.com/189758547

My SVG appears at the beginning of my animation but I want to reveal the SVG by animating the strokes.

 

Here is my JS code (the link to my codepen) :

$(window).load(function () { 
        $(function () {
            var first = $('#firstletter'),
                second = $('#secondletter'),
                competences = $('.competence'),

                // Sample script for Tweening on a Timeline
                tl = new TimelineMax({
                    delay:0,
                    paused: false,
                    yoyo: false
                });

            tl.fromTo([first, second], 3, {
                drawSVG: "100% 100%"
            }, {
                drawSVG: "0% 100% ",
                ease: SlowMo.easeOut
            });
        
            tl.fromTo(competences, 1, {
                opacity: 0,
                top: 0
            }, {
                opacity: 1,
                top: "50%"
            });
        });
        $('#loader-overlay').delay(5000).fadeOut('slow'); // 5 sec de délai avant que la div ne disparaisse
        
});

 

Thank you for your help

See the Pen jMgmQY by MaralS (@MaralS) on CodePen