How to set same timeline for different elements on same page

[Shehzad Asif]

Hy There

 

I am struggling to assign same timeline with "forEach loop and function" for different elements when they come in viewport. I searched on forum and on google as well but could not find a relevant answer. Is it possible to achieve it or do I have a to write same timeline for every element (that will be a lot of repeat code). Any help will be appreciated.

 

Regards

Shehzad Asif

See the Pen jOqJPGm?editors=0000 by ShehzadAsif (@ShehzadAsif) on CodePen

[ZachSaucier]

Hey Shehzad. You're making one of the most common ScrollTrigger mistakes: using a general target when you should be using a more specific target. Additionally you're not scoping your animations to a per-section basis. I talk about how to do this in more detail in my article about animating efficiently which I highly recommend. You also didn't put some properties in the timeline's defaults property which I assume you meant to do.

 

Here's how I'd set it up:

See the Pen bGpZejK?editors=0010 by GreenSock (@GreenSock) on CodePen

[Shehzad Asif]

Thanks Zach

 

As I am new to gsap and on learning curve, exploring the things. You guys are awesome and ready to help quickly. I really appreciate it and thanks for the quick help to make the code dry.

 

Regards,

Shehzad Asif