cdedreuille Posted July 13, 2021 Share Posted July 13, 2021 Hi, I'm having a hard time trying to figure how to launch multiple timelines in a sequence with interval (or staggered). I have 30 times the same component. Each component is a timeline and what I'm looking for is a way to launch animate all of them the same way you do stagger on a tween. Not sure if this make sense. Link to comment Share on other sites More sharing options...
OSUblake Posted July 13, 2021 Share Posted July 13, 2021 Do you have a demo? Basically, you just add your timelines to a parent timeline and optionally use the position parameter to space them out however you want. gsap.timeline() .add(timeline1) .add(timeline2, "+=0.5") .add(timeline3, "+=0.5") ... 1 Link to comment Share on other sites More sharing options...
cdedreuille Posted July 13, 2021 Author Share Posted July 13, 2021 Just to make it clearer. What I'm looking for is: Using scrollTrigger, when I enter the view port Launch 30 timeline animations Each timeline is staggered by 0.1 Link to comment Share on other sites More sharing options...
cdedreuille Posted July 13, 2021 Author Share Posted July 13, 2021 Oh I didn't know you could create a timeline of timelines. I'll try that. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted July 13, 2021 Share Posted July 13, 2021 If you can add all your timelines to an array, it should be really easy to loop through and add them. let main = gsap.timeline(); myTimelines.forEach((tl, i) => { main.add(tl, i * 0.1); }); Link to comment Share on other sites More sharing options...
cdedreuille Posted July 13, 2021 Author Share Posted July 13, 2021 This is what I'm using right now. Each element has a class .why-pattern const whyElem = gsap.utils.selector(whyRef); const tl = gsap.timeline(); tl.to(whyElem('.why-pattern1'), { x: 64, duration: 1, ease: 'power2.inOut' }); tl.to(whyElem('.why-pattern2'), { rotate: 180, duration: 1, ease: 'power2.inOut' }, '<0'); tl.to(whyElem('.why-pattern2'), { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut', }); tl.to( whyElem('.why-pattern3'), { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' }, '<0' ); But this of course is not staggered. It's just a single timeline animating all elements with the same class. Do you have any example on how to create multiple timelines from an array? Link to comment Share on other sites More sharing options...
OSUblake Posted July 13, 2021 Share Posted July 13, 2021 Do you mean like this? const whyElem = gsap.utils.selector(whyRef); const timelines = []; const tl1 = gsap.timeline(); timelines.push(tl1); tl1.to(whyElem('.why-pattern1'), { x: 64, duration: 1, ease: 'power2.inOut' }); const tl2 = gsap.timeline(); timelines.push(tl2); tl2.to(whyElem('.why-pattern2'), { rotate: 180, duration: 1, ease: 'power2.inOut' }, '<0'); tl2.to(whyElem('.why-pattern2'), { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut', }); const tl3 = gsap.timeline(); timelines.push(tl3); tl3.to( whyElem('.why-pattern3'), { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' }, '<0' ); ... let main = gsap.timeline(); timelines.forEach((tl, i) => { main.add(tl, i * 0.1); }); Link to comment Share on other sites More sharing options...
cdedreuille Posted July 13, 2021 Author Share Posted July 13, 2021 I think I found a solution. let main = gsap.timeline(); whyElem('.why-pattern').forEach((_, i) => { console.log(whyElem(`.why-pattern1`)[i]); const anim = gsap.timeline(); anim.to(whyElem(`.why-pattern1`)[i], { x: 64, duration: 1, ease: 'power2.inOut' }); anim.to( whyElem('.why-pattern2')[i], { rotate: 180, duration: 1, ease: 'power2.inOut' }, '<0' ); anim.to(whyElem('.why-pattern2')[i], { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut', }); anim.to( whyElem('.why-pattern3')[i], { scale: 3, rotate: 90, borderRadius: 16, duration: 1, ease: 'power2.inOut' }, '<0' ); main.add(anim, i * 0.1); }); Thanks a lot for your help @OSUblake 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now