Jump to content
Search Community

ScrollTrigger, Timeline, Effects? Animate same text during scroll

Christiemade test
Moderator Tag

Recommended Posts

Say I have some text that stays fixed on the screen.  I want multiple thing to happen to it as the user is scrolling.  The divs that appear scrolling behind it are the triggers.  I want to change things on the text like color and opacity.  As Div #2 scrolls into view, the opacity changes from 0 to 1.  As div #4 scrolls into view, the color changes from black to white.  Do I need to create two different effects to do this?

Link to comment
Share on other sites

Hi, can you make a demo so we can see what you've tried? I would say that you probably need to have different scroll triggers and animations for when something comes into view. Have you tried look at the ScrollTriggrs, perhaps there is something on there that does what you are looking for?

  • Like 1
Link to comment
Share on other sites

You shouldn't need an "effect" or anything like that. If I understand your goal correctly, it should be relatively simple: 

See the Pen BaWmGaw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm just having it activate when the new section coming in is 20% into the viewport at the bottom (start: "top 80%"). You can obviously tweak this to work however you want. And I assumed you didn't want things to scrub, but that wouldn't be hard to add either. 

 

Does that help? 

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