Leaderboard

A couple things - Your demo was missing the ScrollTrigger plugin. You're triggering all animations with the same class at the same time. You can loop through and create a trigger for each image like this https://codepen.io/PointC/pen/eYXmNge/06cc4d1f848523ff0a28fb6151664226 The problem with that is all the pictures in the same row animate at the same time. That may be what you want, but quite often you want to stagger the targets in each row. That's the perfect use case for batch. https://codepen.io/PointC/pen/vYPEOKM/34fbf1d6bf627411758c1cac157f0d20 More info about batch. https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/ Hopefully that helps. Happy tweening.

For anyone deploying to AWS Amplify that is running into the 403 Forbidden issue, we managed to get the package installs working nicely by adding the following to our amplify.yml file. Note that we tried the yarn equivalents initially, however only had luck using npm. version: 1 frontend: phases: preBuild: commands: - npm config set //npm.greensock.com/:_authToken your-secret-token-goes-here - npm config set @gsap:registry https://npm.greensock.com - npm install gsap@npm:@gsap/shockingly - npm config delete //npm.greensock.com/:_authToken - npm config delete @gsap:registry - yarn install build: # the rest of your amplify build stuff under here... Hope this can help someone running into the same issue! Also, we would be keen to hear of any other solutions people have come across.

The type of animations doesn't matter. I just made them all the same to simplify it. We only care about an animations reversed state based on a certain condition. Here's another version that includes multiple conditions. Instead of returning a function this time, I'm returning an object with different functions to call based on the condition to use. So I added the ability to toggle even/odd animations, and if you click outside the box, all the animations will reverse and go back to their starting position.

Blake, thanks for going the extra mile in explaining the technique. Very cool and helpful!