Jump to content


How can I change the content when scrolling with animation?

Recommended Posts

Hello everyone. I learning amazing library for animation GSAP.

I have example by parallax effect on scrolling.


In this example, content changes when we are scrolling.

I created a starter template, but I can't figure out how to do this effect.

Help me please.


See the Pen PoGGMRB by dc65k (@dc65k) on CodePen

Link to comment
Share on other sites


Hey @dc65k


I have a codepen demo, that shows a basic example of how to achieve this sort of effect - just now, I tweaked it a bit, so it looks more like the example on the page you posted.


Maybe this can serve as inspiration for you.


See the Pen 0f57e35d19deaf7fda9ee3b65ac80476 by akapowl (@akapowl) on CodePen



What I am actually doing there, is looping through the .text on the right, and for each setting up a ScrollTrigger, with a timeline attached, that handles both, the animation of each .text itself, as well as the .content on the left side - this way they are in sync.


Hope this helps.





  • Like 3
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.