Jump to content
Search Community

How To Use ScrollTrigger change texts

rimedtades test
Moderator Tag

Recommended Posts

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

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

  • 2 months later...
  • 2 months later...

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

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

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...