how can such an entry be shortened?

[AlexanderGS]

Hello!
Made an animation on the gsap.timeline. Question
Is there any way to shorten this chain of animations?

See the Pen mdGmpMG by Alexxxsander (@Alexxxsander) on CodePen

[mvaneijgen]

Yes you can! Like you do with CSS you can call all your elements at once and then use a stagger (see Stagger docs) to have them animate in one by one. Then when using a smart position parameter we can start the next animation right after the first one is done! Also you can target all transform properties directly with GSAP x, y, rotate, skew, scale ect and if you want to use percentage based values use xPercent and yPercent. I would also recommend keeping all he animation values to GSAP instead of setting something with in CSS that you then need to overwrite with GSAP, that is where .from() is really handy.

 

I've sprinkled a lot of useful comments throughout your pen to explain certain parts, be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen GRXmQqV?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Oh and a side note! When working with ScrollTrigger I like to disable it, to really focus on just the animation I find it a lot easier. I've also added a repeat: -1, so be sure to remove those when you're going to enable ScrollTrigger again. 

[AlexanderGS]

1 hour ago, mvaneijgen said:

Yes you can! Like you do with CSS you can call all your elements at once and then use a stagger (see Stagger docs) to have them animate in one by one. Then when using a smart position parameter we can start the next animation right after the first one is done! Also you can target all transform properties directly with GSAP x, y, rotate, skew, scale ect and if you want to use percentage based values use xPercent and yPercent. I would also recommend keeping all he animation values to GSAP instead of setting something with in CSS that you then need to overwrite with GSAP, that is where .from() is really handy.

 

I've sprinkled a lot of useful comments throughout your pen to explain certain parts, be sure to read through them! Hope it helps and happy tweening! 

 

 

 

 

Oh and a side note! When working with ScrollTrigger I like to disable it, to really focus on just the animation I find it a lot easier. I've also added a repeat: -1, so be sure to remove those when you're going to enable ScrollTrigger again. 

Thanks, but I only need it on gsap.timeline Without CSS. 

I want to shorten the code, but I don't know how. As I still have very little understanding of gsap.

[mvaneijgen]

I've shortened the JS. Have you read the code? Instead of 42 lines of code it is now just 30 and that is with my comments explaining the code