Martio Posted September 27, 2021 Share Posted September 27, 2021 Hi All I am new to gsap. What I am trying to achieve is a scrolling horizontal animation where the 1st, 3rd, 5th lines of text (if exist) scroll to the left on vertical scroll and the other lines (2nd, 4th, 6th etc) scroll to the right (and the reverse when scrolling back up). Each row (line) could have any number of words. I want the words to all be revealed gradually during the vertical scroll. Ideally each line will scroll just enough in whichever direction to reveal all the words, and not further. I am actually using React for the project but my codepen isn't. I am using the ScrollTrigger gsap plugin. I really hope this makes sense. Many thanks. See the Pen MWozEdr by m-a-r-t-i-n (@m-a-r-t-i-n) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted September 27, 2021 Share Posted September 27, 2021 Welcome to forums @Martio Have you checked out our Helper Functions? You can use the Loop function to create a marquee effect. To reverse direction, just use onToggle a ScrollTrigger to toggle the reverse state of the animation. https://greensock.com/docs/v3/HelperFunctions#loop Or for smoother effect, animate the timeScale to play and reverse the loop. const myAnimation = horizontalLoop(...); ... onToggle({ isActive }) { gsap.to(myAnimation, { timeScale: isActive ? 1 : -1 }); } 2 Link to comment Share on other sites More sharing options...
Martio Posted September 27, 2021 Author Share Posted September 27, 2021 59 minutes ago, OSUblake said: Welcome to forums @Martio Have you checked out our Helper Functions? You can use the Loop function to create a marquee effect. To reverse direction, just use onToggle a ScrollTrigger to toggle the reverse state of the animation. https://greensock.com/docs/v3/HelperFunctions#loop Or for smoother effect, animate the timeScale to play and reverse the loop. const myAnimation = horizontalLoop(...); ... onToggle({ isActive }) { gsap.to(myAnimation, { timeScale: isActive ? 1 : -1 }); } Thanks for the welcome and fast response. I am not really looking to do a marque with repeating/looping words. I have updated my codepen with the latest code: However the reverse (second line) doesn't really work so great, especially across differing resolutions/device widths. Link to comment Share on other sites More sharing options...
Martio Posted September 27, 2021 Author Share Posted September 27, 2021 I had a look at the helper function, and gave it a spin, but it seems to be scrolling irregardless of page scroll - which is why I am using Scroll Trigger. but that being said it is pretty cool. This is kind of what I am looking to implement (but better): https://tympanus.net/Development/TileScroll/ (the horizontal scrolling words after the second set of images) Link to comment Share on other sites More sharing options...
Solution akapowl Posted September 27, 2021 Solution Share Posted September 27, 2021 For the lines that are supposed to be moving to the right, you will likely have to make sure that they start with their right side against the right side of the window (which is basically where you are tweening the other one to); so I would probably make use of a fromTo tween for that, with which you can declare their starting position in the from part - something like I did in this horizontal-scrolling example. See the Pen dyvygmj by akapowl (@akapowl) on CodePen That pen creates a ScrollTrigger forEach of the 'sections' - which can give you a bit more control. Here's what that could look like with your example See the Pen a5e95c5b1cafbdc1d8d12d58a030407e by akapowl (@akapowl) on CodePen 5 Link to comment Share on other sites More sharing options...
Martio Posted September 27, 2021 Author Share Posted September 27, 2021 14 hours ago, akapowl said: For the lines that are supposed to be moving to the right, you will likely have to make sure that they start with their right side against the right side of the window (which is basically where you are tweening the other one to); so I would probably make use of a fromTo tween for that, with which you can declare their starting position in the from part - something like I did in this horizontal-scrolling example. That pen creates a ScrollTrigger forEach of the 'sections' - which can give you a bit more control. Here's what that could look like with your example Thank you so much akapowl - that worked perfectly Really appreciate it. 2 Link to comment Share on other sites More sharing options...
Milksamsa Posted May 23, 2022 Share Posted May 23, 2022 On 9/28/2021 at 1:13 AM, Martio said: Thank you so much akapowl - that worked perfectly Really appreciate it. On 9/27/2021 at 10:19 AM, akapowl said: Hi. Why is this not working on mobile? Link to comment Share on other sites More sharing options...
akapowl Posted May 23, 2022 Share Posted May 23, 2022 Welcome to the GSAP forums @Milksamsa Both demos provided in the post that was marked as the solution are working for me on mobile, so I'm pretty much clueless on what exactly is not working for you. Also please note that codepen examples posted in these forums are no ready-to-go custom code solutions but rather just snippets to answer specific questions. If you do have a question of your own, it would be great if you could create a new thread, specifying what exactly is not working for you alongside a minimal demo. Thanks. 3 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