Jump to content


ScrollTrigger Vs ScrollMagic: Repeated section elements animation

Recommended Posts

Hi folks,


I've been using scrollmagic for my scroll based animations. And I've just started to learn GSAP ScrollTrigger.


With Scrollmagic, I've achieved a scroll animation as seen below.


It has 3 sections with repeated elements - a title, paragraph and a image for each section. I've used two  separate timelines for scroll in and scroll out actions.


I'd love to learn, how this exact same animation is done in with scrollTrigger?

Is there a easy way to do this using



Thanks GSAP team for ScrollTrigger and the great support to this community.


See the Pen zYrXwQo by vino3d (@vino3d) on CodePen

Link to comment
Share on other sites

Hi @vino3d, welcome to the forum.


Of course what you could do with ScrollMagic you can now do with ScrollTrigger and much more.


As you mentioned that you are trying to learn I would direct you to the ScrollTrigger starting guide by @Carl.


It has few simple demos that would get you started, I think that is the best way to learn.


By building few simple demos with ScrollTrigger you will see how animations are triggered and you will be able to build the animation as in your example in no time.


I have also GreenSock 101 online course that covers the basics of GSAP3 and ScrollTrigger that might help.




  • Like 6
Link to comment
Share on other sites


Thanks for the warm welcome.


Wow !! That is awesome. Really that simple.?!  Thanks for sharing your knowledge.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.