litash

I was able to implement my plan) thanks! I added this code and this work good for me I'm glad! let tl = gsap.timeline({ scrollTrigger: { trigger: '#panels-container', start: "+=100%", scrub: 1, end: "+=400%", markers: true, } }) .to(".background", 1, {x: "-25%"}, '-=0.1') .to(".background", 1, {x: "-50%"}, '+=0.6') .to(".background", 1, {x: "-75%"});

Sorry, I added animation but my animation plays automatically, how can I play animation only when I scroll, with reverse of course. https://codepen.io/litash/pen/GRjLpYJ

I need to block scrolling down when I scroll through the vertical section ".side-scrolling-wrapper" like pinSpacing parameter was true. I want ".side-scrolling-wrapper" only height: 1000px, but when I make height: 1000px everything breaks. I need to do the correct navigation logic, now click on navigation incorrectly scroll to section and last qustion, how I can setup transform: translate with steps for each section, for my background in .side-scrolling-wrapper for example: Panel 1 - for background should be installed transform: translate(0, 0) Panel 2 - for background should be installed transform: translate(-25%, 0) Panel 3 - for background should be installed transform: translate(-50%, 0) Panel 4 - for background should be installed transform: translate(-75%, 0) update: I set pinSpacing: true and this solved my problem with height: 1000px

How can I properly update the scene using TimelineMax when clicking on the buttons (links), and then continue using the mouse wheel without breaking anything ? I need to scroll through sections when I click and scroll with the mouse wheel I can't do it, everything breaks down for me when I click on the buttons :(