Hi,
I'm new to gsap, but didn't found any post according to my problem. The point is, that if I prepare a timeline itself and it's played outside scrolling trigger, all delays, segments are running well. But when I put a default scrollTrigger to the timeline attached to section#how-we-work it plays all of the animations at once without any delay. Looks like scrollTrigger ignoring all of delays set. Here below some code I use, thank you for any hint how to solve this:
gsap.registerPlugin(ScrollTrigger);
//gsap.registerPlugin();
ScrollTrigger.defaults({
toggleActions: 'play pause reverse none',
markers: true,
});
$( document ).ready(function() {
var tl = gsap.timeline();
tl.from('#top-menu',{
y: -100,
duration:1,
ease: "back"
});
var panel_how = gsap.timeline({ defaults:{
delay:2,
duration: 1,
opacity: 0,
scrollTrigger:{
trigger: '#how-we-work',
scrub: 1,
pin: true,
start: 'top 10%',
end: 'bottom 50%',
id: 'panel-how',
}
}
});
panel_how
.from('#cms404_module_31 .cms404_module_header',{x: 100, ease: 'back(2)'})
.from('#cms404_module_31 ._CMS4Toolbox p',{x: -100, ease: 'back(2)', })
.from('#cms404_module_31 ._CMS4Toolbox .btn',{y: 20, ease: 'back(2)', duation: 1})
.from('#lg-dots-1 ',{ scale: 0, duration:1, transformOrigin: '50% 50%' })
.from('#lg-dots-2 ',{ scale: 0, duration:2, transformOrigin: '50% 50%', delay: 0.5 })
.from('#lg-dots-3 ',{ scale: 0, duration:3, transformOrigin: '50% 50%' },'+=1')
.from('#COG',{ y: "-5", scale: 0.5, transformOrigin: '50% 50%' },'+=1')
.from('#CLOUD',{ y: "-5" })
.from('#EQ',{ y: "-5" })
.from('#LINE',{});
});