alecosta Posted October 13, 2020 Share Posted October 13, 2020 Hello, I have some divs that scroll horizontally. I want to start an animation when the div id="three" appears on the screen, but I think that something is wrong in my code. Please help! See the Pen zYBvLRV by alessandro-costa (@alessandro-costa) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted October 13, 2020 Share Posted October 13, 2020 Hey @alecosta Since you are not using the browser built-in horizontal scrolling, but only 'faking' a horizontal scroll by translating the content on the x-axis, the 'horizontal: true' in combination with your start on that second ScrollTrigger you have, won't work. You'll have to use a 'normal' vertical set up ScrollTrigger, and calculate the start for your tween dependent on the scroll-progress on the y-axis. I did it like so - just for example - in the following pen gsap.to("#three", { scrollTrigger: { trigger: "body", // elemento oggetto dello scrolltrigger start: () => "0 -" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ), end: () => "+=" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ), scrub: true, //horizontal: true, }, backgroundColor: "#000" }); Also I added an end and a scrub - only to better demonstrate, when the tween begins and when it ends. See the Pen e2fccf4b90a427f9b97b489df8d15729 by akapowl (@akapowl) on CodePen Edit (Just in case of a possible follow up question) If your container is positioned somewhere further down on the page with content above it, you would of course have to calculate in the scroll-position / scrollTop into your start-point for that ScrollTrigger. Hope this helps. Cheers, Paul 3 1 Link to comment Share on other sites More sharing options...
alecosta Posted October 14, 2020 Author Share Posted October 14, 2020 6 hours ago, akapowl said: Hey @alecosta Since you are not using the browser built-in horizontal scrolling, but only 'faking' a horizontal scroll by translating the content on the x-axis, the 'horizontal: true' in combination with your start on that second ScrollTrigger you have, won't work. You'll have to use a 'normal' vertical set up ScrollTrigger, and calculate the start for your tween dependent on the scroll-progress on the y-axis. I did it like so - just for example - in the following pen gsap.to("#three", { scrollTrigger: { trigger: "body", // elemento oggetto dello scrolltrigger start: () => "0 -" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ), end: () => "+=" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ), scrub: true, //horizontal: true, }, backgroundColor: "#000" }); Also I added an end and a scrub - only to better demonstrate, when the tween begins and when it ends. Edit (Just in case of a possible follow up question) If your container is positioned somewhere further down on the page with content above it, you would of course have to calculate in the scroll-position / scrollTop into your start-point for that ScrollTrigger. Hope this helps. Cheers, Paul Thank you so much, @akapowl ! 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