AntonioNB4 Posted June 21, 2023 Posted June 21, 2023 Hi dev, im trying to reverse the direction of carousel on scroll, but as you can see on demo something go wrong. Where i'm going wrong ? Regard, Antonio. See the Pen gOQwLLw by Antonio-Nocella (@Antonio-Nocella) on CodePen.
Rodrigo Posted June 21, 2023 Posted June 21, 2023 Hi, When creating endless loops with images is better to wait for all the images to be loaded before creating the loop. Also in this case the Observer Plugin is the tool to go: https://greensock.com/docs/v3/Plugins/Observer Here is a simple example of this approach: See the Pen JjeRNGz by GreenSock (@GreenSock) on CodePen. Hopefully this helps. Happy Tweening!
AntonioNB4 Posted June 21, 2023 Author Posted June 21, 2023 Its very helpful but I don't understand which way you are selecting the images to move ?
Rodrigo Posted June 21, 2023 Posted June 21, 2023 Hi, 3 minutes ago, AntonioNB4 said: Its very helpful but I don't understand which way you are selecting the images to move ? I'm not sure I understand the question. Care to elaborate a bit more? The core of this is here: const observer = Observer.create({ target: ".container", type: "wheel, touch", onChange: (self) => { if (self.deltaY > 0) { gsap.to(loop, { timeScale: 1, duration: 0.3 }); } else { gsap.to(loop, { timeScale: -1, duration: 0.3 }); } } }); So when the user scrolls up or down, I get the deltaY value from the Observer instance. If the user scrolls down it goes in the original direction of the loop (left-to-right), if the user scrolls up then it goes in the opposite direction (right-to-left). Happy Tweening!
AntonioNB4 Posted June 21, 2023 Author Posted June 21, 2023 Forgive me for having misunderstood. In the javascript of your codepen where do you select the images that initially scroll and then change direction ? I say this because I need to adapt the code to my html content
Solution Rodrigo Posted June 21, 2023 Solution Posted June 21, 2023 Hi, In the endless loop function call, here: window.addEventListener("load", () => { // At this point all the images are loaded, then I give the // helper function the selector, which is all the img tags // it can find. Of course you can pass a more specific selector const loop = horizontalLoop("img", { repeat: -1, paddingRight: 15 }); }); Happy Tweening! 1
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