Jump to content
Search Community

How can I change the content when scrolling with animation?

dc65k test
Moderator Tag

Recommended Posts

Hello everyone. I learning amazing library for animation GSAP.

I have example by parallax effect on scrolling.

https://salute.sber.ru/smartmarket/dev/?_ga=2.31003199.1291033660.1606628165-1328913721.1606628165

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.

Безымянный.jpg

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.

 

Cheers,

Paul

 

  • 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.
×
×
  • Create New...