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