Jump to content
GreenSock

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

Is there a way of reversing the direction of text when scrolling back up?

Recommended Posts

I've seen a few examples were text automatically scrolls to the left when scrolling down the page, and then reverses direction when scrolling up the page. I spotted this example in one of your posts to give you a visual representation. 

See the Pen qLxwPy by mikeK (@mikeK) on CodePen

Link to post
Share on other sites

Definitely! Here's an example from the docs. It uses the ScrollTrigger plugin along with scrubbing to link the tweens to the scroll position. This could be used as a starting point for what you're trying to do.

 

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

  • Like 1
Link to post
Share on other sites

Thanks for your response Brian. Yeah not sure how to implement the scrub into my codepen to make this work. Are you able to elaborate with a codepen mockup? I truly appreciate how help you can offer. 

Link to post
Share on other sites

The CodePen you posted needs to be updated to the new GSAP syntax and I’d get rid of the jquery code as well to clean it up. If no one else chimes in I’ll give you a hand later. I’m away from the computer until later tonight. 

  • Like 2
Link to post
Share on other sites

Hey, this is super quick and dirty. I just removed all your JavaScript code and added a couple ScrollTriggers. I changed the CDN links as well in the JS settings.

 

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

  • Like 1
Link to post
Share on other sites

Really appreciate your efforts but the text is now static when not scrolling horizontally. The text should always be moving slowly in the direction that is dependant on browser scrolling up or down.

Link to post
Share on other sites

Hey @Jase,

 

You could use the ScrollTrigger callback onUpdate to get the current scroll direction and to adjust the marquee direction.

 

Here is an example changing the marquee direction.

 

See the Pen abmPjxz by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

  • Like 1
Link to post
Share on other sites

Thanks Mikel, I appreciate the example but it’s not what I’m looking for I don’t think. I was hoping that gsap could help make it easy to scroll up and down with interchanging horizontal text direction. In the example I’m having to click a button to change direction. 

Link to post
Share on other sites

Ah, so you don't really want it totally linked to the scrollbar. Sure, you can just alter the timeScale of the animation(s) with a single ScrollTrigger. Here's a simple example (forked demo):

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

 

I created that roll() helper function just to make it simple to create a looping animation where it clones the element, puts it right next to it, and makes it look seamless. I animated the timeScale so that the change is smooth rather than suddenly shifting direction. 

 

Is that what you're looking for? 

  • Like 4
Link to post
Share on other sites

 Thanks very much for all your help on this, I'll experiment with the example :)

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.

×