Jump to content
GreenSock

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

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 comment
Share on other sites

Welcome to the forum @rimedtades. I'm pretty new here as well and it's a fantastic community. Is this what you're looking for?

 

See the Pen xxqZaNB by BrianCross (@BrianCross) on CodePen

 

  

  • Like 6
Link to comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

Exactly this. Thank you very much @Cassie I won't forget you🥰

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

hello!

I was also struggling with the same problem.

thank you for your help.

Can this be applied to wordpress as well?

Link to comment
Share on other sites

Hey @steveYim

As long as you have access to the code necessary to implement then yes. 

If you have a specific question could you make a minimal demo and start another thread? Thanks!

Link to comment
Share on other sites

  • 2 months later...

Hi all im looking for something similar but with a fixed element on a horizontal scrolling site. See my codepen 

See the Pen NWvPLZJ by brawn14 (@brawn14) on CodePen

 

Looking for the text to change once it goes past the square markers is this achievable?

Link to comment
Share on other sites

That looks like what I was after  apologies I hadn't come across the container animation before thank you.

  • Like 1
Link to comment
Share on other sites

Ah right, just another quick one is there a way to implement the same thing but without using the GSAP horizontal scroll settings? heres my example

 

See the Pen NWvqgbr by brawn14 (@brawn14) on CodePen

 

Im finding the horizontal scroll with GSAP in the previous codepen to be quite wobbly in terms of scrolling too hard that it drags the content to expose the body, and it also all over the place on mobile.

Link to comment
Share on other sites

containerAnimation is doing a lot of hard work behind the scenes to calculate where and when elements come into view. So the short answer is yes it would be possible, but not without substantial effort and code.

Sounds like the easier fix would be to sort out your implementation rather than try to reinvent the wheel.

35 minutes ago, Dbr14 said:

Im finding the horizontal scroll with GSAP in the previous codepen to be quite wobbly in terms of scrolling too hard that it drags the content to expose the body, and it also all over the place on mobile.


Why don't you drop a codepen here and we can take a look at what's causing the issue?

Link to comment
Share on other sites

The codepen is the same as what Jack posted, within the browser (not the codepen viewport) it bounces around to reveal the body below, this is hightened on mobile scrolling horizontally goes to slow and causes the pull whilst vertically is too fast.

 

It may be to do with the speed or ease? but when you compare the two, the scroll is much smoother on the 'purple' codepen then with the original two versions especially on mobile.

Link to comment
Share on other sites

I think you're talking about overscroll bounce, which isn't a GSAP thing. It's the browsers response to reaching the end of the scroll.

That can be sorted with css - https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/

(With overscroll added)

https://cdpn.io/GreenSock/debug/NWvqbzK

You could also use scrollTriggers native horizontal scroll option - but you'd need to scroll using the horizontal scrollbar.

Link to comment
Share on other sites

overscroll doesn't work on safari though, so as that article suggests you could adjust things so that you're scrolling inside a container and not the body. (Like your other example)

If you do that you'll need to change the scroller value in your scrollTrigger.
 

Quote
scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.

 

Link to comment
Share on other sites

Thanks Cassie, thats worked on Desktop but mobile is still a big issue

 

Is it possible to change the swipe direction at all for mobile rather than scrolling up can you scroll across? This is the main reason why I asked about not using the GSAP containerAnimation for the horizontal scroll. If you load your codepen link into a mobile browser you'll see the issue.

Link to comment
Share on other sites

If you want to scroll horizontally you can use the browsers horizontal scroll instead.

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

  • Like 1
Link to comment
Share on other sites

9 hours ago, Dbr14 said:

Im finding the horizontal scroll with GSAP in the previous codepen to be quite wobbly in terms of scrolling too hard that it drags the content to expose the body, and it also all over the place on mobile.

You're talking about the overscroll behavior, right? The rubber-band effect? That has nothing to do with GSAP. Here's an example of how you could [mostly] fix that I believe: 

 

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

 

  • Like 1
Link to comment
Share on other sites

Thank you both for your help and such quick responses.

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