anshul

It is because you are not animating it (#menuTBar, #menuBBar) back to the original position as when it was freshly loaded, instead it moves slightly downwards in the else part.

Thank you @ZachSaucier. That definitely solves my problem.

Sorry, but I am still not able to figure out how would I implement what I want. Look, everything is correct but I want to know why scrolltrigger is applying a transformation to my second tween at the start even when I have not scrolled it. In the above codepen demo, the titles already have a transformX of 750px at the start when it should be zero and on scroll it should move 1000px to the end but it only moves the remaining 250px.

Oh! That's the code I suggested to him. Actually, I often switch between python and js, that was a silly mistake. And he had an example codepen demo but deleted it later.

Thank you for your reply Mikel. But It's the same as I posted. I want the title and all the other stuff to move at different speeds. I have changed my codepen example. See that the title and the box are moving at different speeds but they are not aligning as they should be instead all the titles already have some 'x' property set at the start when they should be set as zero.

Yes you can create a timeline and set its initial option with paused as true. Then on click you can play that animation and on another click reverse the animation using some variable which will determine if the menu is opened or closed. const menu_tl= gsap.timeline({pasued: true}) menu_tl.to(menu, {duration:0.5, xPercent:100}) // Further tweens ....; const isOpen = false; const btn = document.getElementById('menu-btn'); btn.addEventListener('click', ()=> { if isOpen { menu_tl.reverse(); isOpen = false; } else { menu_tl.play(); isOpen = true; } });

I am trying to make a horizontal parallax slider for my website but not able to implement it correctly. I looked out other parallax examples but they all were vertical ones. But I want to scroll horizontally with vertical scrollbars. So, I tween the 'x' property of different elements which different scrub value. The first tween works fine but in second tween the elements are already scrolled at starting position. The 'x' value to scroll is static but will change it to work dynamically. Please help me with this one.