Leaderboard

Hi again @evomedia.lt And here is a helpful video tut by The Mighty @Carl. It goes over that immediateRender special property @mikel advised on when you use any from(), fromTo(), staggerFrom(), or staggerFromTo() tweens. Since from tweens have immediateRender set to true by default. So you need to set immediateRender: false for those from tweens. Happy Tweening

Hi @Noturnoo You'll need to make a few changes to get this working correctly. In your jQuery each() loop, you're targeting all the images and all the .cover classes so everything will trigger at the same time. It would be better to target your wrappers and find() the .cover and image in each of those elements. That way, each animation operates independently and only those elements in that particular wrapper will animate. You're missing a script that allows ScrollMagic to control the GSAP animations. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> Your trigger hook is set at 0.7 so animations 1 & 2 will fire immediately on page load because they are past the trigger. I'd recommend adding the indicators when working with ScrollMagic. They can verify that everything is where you wanted it or can reveal problems. Here's the link for that script. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> Here's a fork of your pen: Hopefully that helps. Happy tweening.