Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

How To Use ScrollTrigger change texts

Recommended Posts

hi friends,

I'm new. There are a few texts. Text must be fixed in the middle. I want the text to change as you scroll down the page(opacity 0 to 1). Thank you for helping me

Link to post
Share on other sites

first of all thanks @BrianCross.  what about when we add another text?  actually the text transitions on apple's airpods pro website exactly what I want

Link to post
Share on other sites

If you want to animate multiple sections, and have each of the sections triggered at a different scroll position you can use a loop!

See the Pen JjWGzyN?editors=1010 by GreenSock (@GreenSock) on CodePen

The docs are really helpful - you can check them out here

  • Like 6
Link to post
Share on other sites

Thank you for taking care of it @Cassie .I can't read documentation because my English is not good but trying to improve my English🙂 it slides up as it passes from the first text to the second text. Instead of sliding up when the first text disappears, we can reduce its opacity ? I'm working on, but I can't.

See the Pen poegmmY by rimedtades (@rimedtades) on CodePen

Link to post
Share on other sites

I would give the documentation a go if I were you - There are lots of demos in there to fork and experiment with.

If there's anything you're struggling to read or understand let us know and maybe we can make a visual demo for you?

Here's a timeline that may be more what you're looking for though

See the Pen GRWobyX by GreenSock (@GreenSock) on CodePen



  • Like 4
Link to post
Share on other sites

you're a superhero @Cassie 😃I studied the documentation and learned a lot of things I didn't know. I hope I can finally ask you something🙂

https://streamable.com/u6lsrp exactly like in the video,how can we extract the second text as soon as the first text ends?

  • Like 1
Link to post
Share on other sites

Ah, I'm glad you got on ok. It must be hard dealing with documentation in your (second?) language.


In this case - If you set pinSpacing:false the padding separating the containers gets removed.

In scrollTrigger world distance = time. The less distance you're scrolling the quicker the timeline will play.

If there's no padding spacing the elements apart the next step will occur sooner.

I've set markers to true too so you can see where the triggers occur ☺️

See the Pen GRWobyX by GreenSock (@GreenSock) on CodePen


  • Like 5
Link to post
Share on other sites

Hope to see you back here soon and making awesome things!

  • Like 2
Link to post
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.