Leaderboard

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

For the loading of content that is not really something GSAP can help with. How ever what you can do is add a class to the body which hides everything you want to hide and then do some animation and onComplete of that animation remove the class that hides everything. This class that hides everything could also set it so that the body can't scroll, you could do this multiple ways, setting overflow-y: hidden to the body or with JS just fully block everything that has to do with scrolling, but again those are things not really GSAP related. Hope it helps and happy tweening!

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! https://codepen.io/mvaneijgen/pen/dyrgzxp?editors=1000

Sorry, I'm not sure I can edit it so that you easily understand it. That's why I spend hours creating video lessons that explain everything in detail. However, this is what the edited code would look like: https://codepen.io/snorkltv/pen/wvOyeYO?editors=0010 Good luck with the rest of your project