delios Posted April 28, 2023 Share Posted April 28, 2023 Hello! I have this (in the codepen) ScrollTrigger landing page, at the very bottom of the script I commented a line "Breaks the thing", well if you remove the following lines, it ... un-breaks the thing. So what I want is an horizontal scroll of cards. I figured out I'd pin another container and make it horizontal but that doesn't really work apparently, plus it breaks all. I'm really new to horizontal scrolling (and GSAP lol) and this is probably a big logical mistake, if you have any lead on how to do that, I'll take it Thank you See the Pen xxyrbjQ by deliqs (@deliqs) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted April 28, 2023 Solution Share Posted April 28, 2023 Hi, You have a logic issue here: tlSerenite.to(sereniteContainer, { xPercent: -100, x: () => 2000, ease: "none", scrollTrigger: { trigger: this.sereniteSectionTarget, start: "top top", end: "+=2000" scrub: 1, pin: true } }); So basically you're adding ScrollTrigger to a GSAP instance that is controlled by a GSAP Timeline as well (which is also tied to a ScrollTrigger instance). So which one has control over that instance? The timeline you created whose progress is controlled by ScrollTrigger or the ScrollTrigger instance in the final GSAP instance? See where this goes wrong? Just remove the scrollTrigger object from this instance and everything seems to work the way you expect: tlSerenite.to(sereniteContainer, { xPercent: -100, x: () => 2000, ease: "none", }); Here is a fork of your codepen: See the Pen JjmyYBN by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
delios Posted April 30, 2023 Author Share Posted April 30, 2023 On 4/29/2023 at 1:49 AM, Rodrigo said: Hi, You have a logic issue here: tlSerenite.to(sereniteContainer, { xPercent: -100, x: () => 2000, ease: "none", scrollTrigger: { trigger: this.sereniteSectionTarget, start: "top top", end: "+=2000" scrub: 1, pin: true } }); So basically you're adding ScrollTrigger to a GSAP instance that is controlled by a GSAP Timeline as well (which is also tied to a ScrollTrigger instance). So which one has control over that instance? The timeline you created whose progress is controlled by ScrollTrigger or the ScrollTrigger instance in the final GSAP instance? See where this goes wrong? Just remove the scrollTrigger object from this instance and everything seems to work the way you expect: tlSerenite.to(sereniteContainer, { xPercent: -100, x: () => 2000, ease: "none", }); Here is a fork of your codepen: Hopefully this helps. Happy Tweening! Oh, yeah that makes a lot of sense, still playing with GSAP stuff and while surfing the forums, I see there are a lot of logic issue like this one which I guess makes sense within such a powerful tool 🤷♂️ Thank you very much for your help!! 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