Animate background gradient of divs with same class when they scroll into view

[WackoMako]

Hi guys,

 

I am new to GSAP and hoping can point me in the right direction if what I am trying to achieve.

 

I am trying to animate a div (gradient background ) from offscreen to on screen when it scrolls into view. But I would like to apply this to multiple individual classes and only animate that class when it scrolls into view. 

 

I have it semi-working but I know it is not the right solution. I am nesting ScrollTriggers and I am dynamically creating the ScrollTrigger  when the class comes into view. I am ending up with multiple extra instances whenever I reenter.

 

Any advice or direction would be great! Thanks

 

 

See the Pen KKepyBK by waynemcmahon (@waynemcmahon) on CodePen

[mvaneijgen]

Hi @WackoMako welcome to the forum!

 

I personally like to always start with a timeline, you've got much more flexibility if you can have multiple steps in your animation and you can always make it simpler at a later moment. Also the best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

See the Pen qBKdpwv?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

 

Then when you have everything setup correctly you can enable ScrollTrigger again and test from there.

 

See the Pen oNyXpKr?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[WackoMako]

Thanks @mvaneijgen! So helpful. Makes sense to start simple and add on top rather than the other way around. I think using scrolltrigger was confusing me. Gonna try this out now and see how it goes