Leaderboard

Hey duty47. Here are some steps to get you started: Make the cards, lay them out so that they don't wrap. Create an animation that move the cards to the left. Have the cards wrap perhaps using the modifiers plugin like the thread shows: Create a scaling animation for the tweens and pair that with the animation above. When a card is hover, tween the timeScale of your master timeline to 0. Happy tweening!

Very nice work, @PointC! 🙌 And @OSUblake also gets bonus points for making use of another GreenSock tool Happy tweening @nikolev!

That's awesome, thank you so much! This worked like a charm and now my animation looks exactly how I wanted it to. @OSUblake Thank you as well for sharing that approach with me! You guys rock, I am so very excited to move on with my work!

I am continuing to work with GSAP and learn new and cool things. I recently started playing with the Motion Path Plugin, MotionPathHelper, and drawSVGPlugin. No question this time - just a fun shout out to everyone in this community for GSAP and the help you provide. I will get there eventually.

Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'd be happy to dive in and help.

We don't have a finite timeline at this point but most likely relatively soon. We'll release it as soon as it's ready! If you set it up correctly, you don't have to do a bunch of maths. Just create a tween that moves the element to the left, create a bunch of empty space between the top and bottom sections, and then in that space affect the progress of your tween. Simple

You can easily trigger animations on scroll without ScrollMagic. In fact, GreenSock is working on its own scroll plugin at the moment! One method is to attach to the scroll event and look at the scroll position like so: https://codepen.io/GreenSock/pen/BaNPoEK Another method is to use intersection observers like this post covers.