Danclp Posted June 25, 2023 Share Posted June 25, 2023 Hi, I have some questions regarding the horizontal scroll with ScrollTrigger. The horizontal scroll happened between a few other sections and some other animations. As the ScrollTrigger animation is shared with other sections, how do I control the scroll speed? scroll .to(".section-2", { autoAlpha: 1 }) .fromTo(".section-2 .text", { yPercent: -50, opacity: 0 }, { yPercent: 0, opacity: 1 }) .to(".longImg", { xPercent: -100 * (".longImg".length - 1), duration: 2 }) function enableScroll() { ScrollTrigger.create({ trigger: ".container", start: "top top", pin: true, animation: scroll, scrub: 2 }) } .to(".longImg", { xPercent: -100 * (".longImg".length - 1), duration: 2 }) And through the research, I found the above solution. However, why can't I control the scroll limit? My image scrolled completely to the left and disappeared. But I need it to end right at the end of the image and stop. Sorry, I am still new to GSAP. I submitted a request earlier, but due to the complexity of the codes, it has been rejected for the minimalist codes demo. I hope this submission meet the requirement. Till then, I look forward to your kind assistance and guidance. Thank you. See the Pen yLQVvEK by danclp (@danclp) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted June 25, 2023 Solution Share Posted June 25, 2023 Hi there! xPercent means 100% of that elements width. In your case you need the image to move by 100% of it's own width, minus the width of the screen. Here's the magic incantation .to(".longImg", { xPercent: -100, x: () => window.innerWidth, duration: 2 }) It's important when using functional values that measure screen size that you invalidate those values if the user resizes their browser and changes the size of the screen. let scroll = gsap.timeline({ paused: true, invalidateOnRefresh: true }) See the Pen zYMogZo?editors=0010 by GreenSock (@GreenSock) on CodePen Hope this helps! 💚 Link to comment Share on other sites More sharing options...
Danclp Posted June 25, 2023 Author Share Posted June 25, 2023 Hi Cassie, How are you doing? It has been a while since I attended your online tutorial. I hope everything works well on your end. Yes, this is useful. Thank you. Link to comment Share on other sites More sharing options...
Cassie Posted June 25, 2023 Share Posted June 25, 2023 Ah! You came along to my workshop. 🙏🏻💚 Always so lovely to bump into workshop friends in here. I'm doing well thanks, glad to see you're flexing your GSAP knowledge out in the real world! 2 Link to comment Share on other sites More sharing options...
Danclp Posted June 26, 2023 Author Share Posted June 26, 2023 Hi Cassie, So sorry to disturb you again. When I thought things were solved, another problem spent my whole day with local and codepen debugging. After adding in a few more animation commands, the horizontal scrolling image no longer finishes its scrolling. I activated the "markers" which shows that the "end" mark stops before all the section commands are finished. Animation on "section-4 and section-5" is not working. I tried to add in "end: '+=12000'". It doesn't seem to help, either. I am not sure where caused the problem. Can you give me some hints and guidance again? Below is the code pen link after Fork. See the Pen oNQBzXw by danclp (@danclp) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted June 26, 2023 Share Posted June 26, 2023 Hi, What should actually happen? Right now you have this on your CSS: .section-4, .section-5 { display: none; height: 100vh; overflow: hidden; position: relative; } So that basically means that those sections are taken out of the document flow, hence when ScrollTrigger makes it's calculations those are not accounted for soto speak. On top of that you have this: <div class="container"> <div class="wrapper"> <section class="first"> <!-- CONTENT --> </section> <section class="section-4"> <!-- CONTENT --> </section> <section class="section-5"> <!-- CONTENT --> </section> </div> </div> With these styles: .first { height: 100vh; overflow: hidden; position: relative; } And this is your ScrollTrigger config: ScrollTrigger.create({ trigger: ".container", start: "top top", end: "+=1200", pin: true, animation: scroll, scrub: 2, markers: true }) So basically you have three sections one after the other vertically and you are pinning the container of all those elements, so those animations are happening, they're just below the fold, so you can't see them. If possible make all those elements direct children of the <body> tag and create a ScrollTrigger instance for each and pin each one. Other option is to give the wrapper a 100vh height and an overflow: hidden in order to move the sections up and down with the same timeline using yPercent. Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Danclp Posted June 27, 2023 Author Share Posted June 27, 2023 Hi Rodrigo, You hit my head hard enough to wake me up. I never thought of doing it that way, "give wrapper a 100vh and an overflow: hidden, then move the object up with yPercent"... 👍 I am a designer-born web developer, know not much about programming. To clarify, when you say create ScrollTrigger instance for each and pin each one, are you referring to the format below? gsap.to("selector-1",{ xPercent: 0, duration: 0, scrollTrigger: {} }) gsap.to("selector-2",{ xPercent: 0, duration: 0, scrollTrigger: {} }) 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 27, 2023 Share Posted June 27, 2023 Yep! Most scrollTriggered pages aren't one massive timeline. It's more common to see a page laid out normally with sections one after another, and then have a trigger/pin for each section. It does depend on what you're after, but I personally try to ensure that the page flows normally if I remove the GSAP code, then in the JS I can adjust the layout and do animation. More of a progressive enhancement approach. There are a lot of examples here to look through to see different approaches. Maybe you can find one that's helpful? https://greensock.com/st-demos/ Here's an example using different triggers for each section. See the Pen PoxWLmp?editors=0010 by GreenSock (@GreenSock) on CodePen It seems like you may want a mixture of timelines and tweens with different triggers for what you're trying to achieve? 1 Link to comment Share on other sites More sharing options...
Danclp Posted June 27, 2023 Author Share Posted June 27, 2023 Hi Rodrigo and Cassie, Noted with the response, and thanks a million for the kind help. I will give that a try. 2 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