pardieiro Posted January 15 Share Posted January 15 Guys, I would like your help, I've already followed tutorials and none of them work, the Green Sock example on Codepen is with an image, I didn't understand it well.I want to make a wide section ( 5 * 100vw ) horizontal scroll <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const jogos = document.querySelector(".jogos"); let tl = gsap.timeline({ ScrollTrigger:{ trigger: jogos, start: "left left", end: () => "+=" + 5 * jogos.offsetWidth + "px", scrub: 1, pin: true, } }); tl.to(jogos, { xPercent: -400, ease: "none", }); </script> Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 15 Share Posted January 15 Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer. See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅ Link to comment Share on other sites More sharing options...
pardieiro Posted January 15 Author Share Posted January 15 I did it in codepen, what happens is different from wordpress, in wordpress nothing happens, but let's go by parts. In this case it happens quickly and automatically, ignoring the 100vw css See the Pen VwRPPeK by pardieiro (@pardieiro) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted January 15 Solution Share Posted January 15 Hi @pardieiro welcome to the forum! The property in a timeline is scrollTrigger not ScrollTrigger (see capital S, happens to me all the time). If things are not working in Wordpress I advise you to disable big chunks of your install to see what might be causing the issue, but if you're using a off the shelve theme it is probably adding something via CSS something like transition: all 1s ease-in; or html { scroll-behavior: smooth; } Hope it helps and happy tweening! See the Pen ZEPLLPY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
pardieiro Posted January 15 Author Share Posted January 15 27 minutes ago, mvaneijgen said: Hi @pardieiro welcome to the forum! The property in a timeline is scrollTrigger not ScrollTrigger (see capital S, happens to me all the time). If things are not working in Wordpress I advise you to disable big chunks of your install to see what might be causing the issue, but if you're using a off the shelve theme it is probably adding something via CSS something like transition: all 1s ease-in; or html { scroll-behavior: smooth; } Hope it helps and happy tweening! Thank you my friend!!!!!!!! That resolved it. It's incredible how a lowercase S changes everything hahaha. At the end of the animation (returning to vertical) it starts before finishing the horizontal scrolling, is there a way to solve this? Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 15 Share Posted January 15 7 minutes ago, pardieiro said: At the end of the animation (returning to vertical) it starts before finishing the horizontal scrolling, is there a way to solve this? Can you elaborate on this. I'm not sure what you mean. Link to comment Share on other sites More sharing options...
pardieiro Posted January 15 Author Share Posted January 15 14 minutes ago, mvaneijgen said: Can you elaborate on this. I'm not sure what you mean. Observing the End mark, it reaches the top, making the vertical scroll work again, before the blue div ends, how can we resolve this so that the vertical scroll returns at the beginning of the red div? Link to comment Share on other sites More sharing options...
Rodrigo Posted January 15 Share Posted January 15 Hi, 3 hours ago, pardieiro said: At the end of the animation (returning to vertical) it starts before finishing the horizontal scrolling, is there a way to solve this? This happens because of the scrub value you have in your ScrollTrigger config: scrollTrigger: { trigger: container, // start: "left left", end: () => "+=" + 2 * container.offsetWidth + "px", scrub: 1, pin: true } That means that ScrollTrigger will take one second (or any other amount of time you pass there) to update the animation progress relative to the scroll position. What happens is that it you scroll too fast past the end marker, the animation will complete one second after that. You can either reduce the amount of time on the scrub property or just use scrub: true so the update is immediate. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
pardieiro Posted January 15 Author Share Posted January 15 1 hour ago, Rodrigo said: Hi, This happens because of the scrub value you have in your ScrollTrigger config: scrollTrigger: { trigger: container, // start: "left left", end: () => "+=" + 2 * container.offsetWidth + "px", scrub: 1, pin: true } That means that ScrollTrigger will take one second (or any other amount of time you pass there) to update the animation progress relative to the scroll position. What happens is that it you scroll too fast past the end marker, the animation will complete one second after that. You can either reduce the amount of time on the scrub property or just use scrub: true so the update is immediate. Hopefully this helps. Happy Tweening! Solved, thank you very much, dude! 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