ScrollTrigger Newbie Nonstarter

[TotalN00b]

Welp, this is embarrassing. As my username suggests, I'm a total newbie to web design, animation, etc. And I can't for the life of me get the simplest ScrollTrigger functionality to work. They all just animate at the same time no matter what I do. What am I doing wrong?

See the Pen gOPMErr by timmyjoe (@timmyjoe) on CodePen

[GreenSock]

No need to be embarrassed! There's never a "stupid" question around here. Welcome to the GreenSock forums - I think you'll find the vibe here is very different than a lot of forums. 

 

There were a few problems I noticed: 

1. You created ONE tween that animates ALL of the ".fly" elements simultaneously, but I'm pretty sure you wanted each one to have its own tween and its own ScrollTrigger. Keep in mind that a ScrollTrigger can only have one animation that it controls (otherwise it'd be pretty weird logic-wise). There's an easy solution - just loop through the fly elements and create a tween for each one. 
2. By default, the "scroller" is the viewport, but you had actually nested things inside a different element that's serving as the scroller, but you forgot to tell ScrollTrigger that. Just set the "scroller" property accordingly. In your demo, there really didn't seem to be any point in wrapping things like that - is there a reason you didn't want to just let the viewport be the scroller? ScrollTrigger isn't like a lot of other scroll-based libraries that do scroll-jacking and require wrapping things in a custom scroller like that. 

Here's a revised version: 

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

 

Does that clear things up? 

 

Once you get the hang of ScrollTrigger, I think you'll dig it. 

 

Enjoy!

[TotalN00b]

Thanks Jack! Much appreciated. 100% clears things up and there's really no reason beyond just being accustomed to wrapping things like that through libraries (as you noted). As you can tell, just test-driving things at the moment but excited to keep learning more! 😀