Jimboc Posted February 10 Share Posted February 10 Hi there, I am trying to recreate the two scrolling rows of text seen on this homepage and pictured below for reference. I have managed to get as far as having two lines going the same way at the same speed in my attached codepen, but can't figure out how to make the bottom row go in the opposite direction, and at a different pace to the top one. I'm not a developer so there's been a lot of trying things and hoping to no avail! Any help would be much appreciated, and please let me know if you need any more info. Many thanks, See the Pen xxBybMG by JClohessy (@JClohessy) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted February 10 Solution Share Posted February 10 Hi @Jimboc welcome to the forum! I would create a timeline for your setup and then move the one bar to the left and the other to the right using two separate tweens. The fancy calculations you do are great, so be sure to keep them in mind for you next project, but here we can also use xPercent which allows you to move the elements based on there width using a percent value. I’ve placed some comments in your JS to better explain things, please be sure to read through them! The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Just removed the comments from the set up to see how it would work on scroll. Hope it helps and happy tweening! See the Pen dyrgzxp?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
Jimboc Posted February 11 Author Share Posted February 11 Thank you so much @mvaneijgen! I'm not going to pretend I understood all your comments, but it's working, so that's something! One more question, if I may. what command would I use to vary the speed of either the top or bottom row? Thanks again, Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 11 Share Posted February 11 Well you're creating an animation and an animation takes time to play, so you could increase/decrease the duration of either of the two animations. (they are both set to 5 seconds at the moment, so setting one to 10 or 2.5 seconds will make the other twice as slow. Keep in mind the total duration of the timeline gets converted to the total scroll distance if you have have a timeline with scrub: 1, see the following tutorial. 18 minutes ago, Jimboc said: I'm not going to pretend I understood all your comments, but it's working, so that's something! If something is not clear, just try to modify the property to see what it does, reverence the docs if it then still isn't clear and if you then still have questions post back here. We're happy to help. Happy tweening! 2 Link to comment Share on other sites More sharing options...
Jimboc Posted February 11 Author Share Posted February 11 It's working wonderfully! Thank you for all your help. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 12 Share Posted February 12 Hi, Hopefully these demos help you: See the Pen zYaxEKV by GreenSock (@GreenSock) on CodePen See the Pen GRwePYw by GreenSock (@GreenSock) on CodePen Happy Tweening! 1 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