Jase Posted April 13, 2021 Share Posted April 13, 2021 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 comment Share on other sites More sharing options...
BrianCross Posted April 13, 2021 Share Posted April 13, 2021 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 1 Link to comment Share on other sites More sharing options...
Jase Posted April 13, 2021 Author Share Posted April 13, 2021 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 comment Share on other sites More sharing options...
BrianCross Posted April 13, 2021 Share Posted April 13, 2021 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. 2 Link to comment Share on other sites More sharing options...
BrianCross Posted April 14, 2021 Share Posted April 14, 2021 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 1 Link to comment Share on other sites More sharing options...
Jase Posted April 14, 2021 Author Share Posted April 14, 2021 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 comment Share on other sites More sharing options...
mikel Posted April 14, 2021 Share Posted April 14, 2021 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 1 Link to comment Share on other sites More sharing options...
Jase Posted April 14, 2021 Author Share Posted April 14, 2021 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 comment Share on other sites More sharing options...
GreenSock Posted April 15, 2021 Share Posted April 15, 2021 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? 4 Link to comment Share on other sites More sharing options...
Jase Posted April 15, 2021 Author Share Posted April 15, 2021 Thanks very much for all your help on this, I'll experiment with the example :) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now