cptain

@Rodrigo Thank you so much as well for your help, this seems to have fixed it. I'm getting very slight stutters on mobile now which is almost negligible. I'm embarrassed by how easy both fixes were, I had completely misunderstood normalizeScroll. I was certain it was the first thing I tried since it's noted in the docs that it assists over-scrolling on mobile, but I probably did something else. Again, much appreciated!

Even though @PointC fixed my initial issue immediately (again thank you so much), I'm running into a similar problem, but worse, this time on mobile. If you visit my demo page on mobile in the link below you will see that scrolling down is extremely buggy. Scrolling with a mouse while simulating a mobile device on a browser works somewhat fine, but the moment touch is introduced, it bugs out entirely. Apologies if I'm misusing this plugin or if this is covered in the documentation, I cannot seem to find a solution. https://ds-dev.netlify.app I'm experimenting with the code below (that is affecting this particular page). I know I can remove smoothTouch: 0.1 but then, for some reason I don't understand, the scrollTrigger animations no longer work. /*------------------------------ Register plugins ------------------------------*/ gsap.registerPlugin(ScrollTrigger, ScrollSmoother); /*------------------------------ Init ScrollSmoother ------------------------------*/ ScrollTrigger.normalizeScroll(true); // create the scrollSmoother before your scrollTriggers const scrollerSmoother = ScrollSmoother.create({ smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices) }); document.querySelector(".scroll__home").addEventListener("click", () => { // scroll to the spot where the bundle section is in the viewport. // parameters: element, smooth, position scrollerSmoother.scrollTo("#bundle", true, "top 50px"); }); // creates a ScrollTrigger that will fade-in and out the minipod illustrations gsap.fromTo( "#minipod-front", 2, { x: -200, opacity: 0 }, { x: 0, opacity: 1, ease: Power4.easeOut, scrollTrigger: { trigger: ".scroll__home", start: "top center", scrub: 2, }, } ); gsap.fromTo( "#minipod-back", 2, { x: 200, opacity: 0 }, { x: 0, opacity: 1, ease: Power4.easeOut, scrollTrigger: { trigger: ".scroll__home", start: "top center", // markers: "true", scrub: 2, }, } ); gsap.from(".app__mockup", 2, { y: 400, opacity: 1, ease: Power4.easeOut, scrollTrigger: { trigger: ".app", start: "top center", // markers: "true", scrub: 2, }, }); gsap.to(".list-item__heading", 2, { y: -20, ease: Power4.easeOut, scrollTrigger: { trigger: ".testimonials__list", start: "top center", // markers: "true", scrub: 2, }, }); gsap.to(".list-item__subheading", 2, { y: 30, ease: Power4.easeOut, scrollTrigger: { trigger: ".testimonials__list", start: "top center", // markers: "true", scrub: 2, }, });

You're a legend @PointC! That fixed it immediately. I appreciate it a lot.

Hello! I wanted to update our company's website to include ScrollSmoother on all of our pages, however, on a particular page I am noticing some heavy stuttering as I am scrolling down. I am possibly utilizing this plugin incorrectly, please let me know if so. Everything works fine until you reach the pricing section. I removed elements 1-by-1 to find the issue. I discovered the problem is the images and ONLY on Edge and Chrome (works on Firefox), but I can't figure out why, as it works perfectly fine on other sections/pages with images. You can check the homepage, which included just as many images (approximately) and even ScrollTrigger animations but there is no stuttering. Here's the demo page https://ds-dev.netlify.app/m300 I appreciate any help you guys can provide.

Hey @OSUblake I tried incorporating your methodology with the functions for each animation. However, I'm having trouble making it work. I'm getting some errors in my console log and I'm not sure what I am doing wrong. If you have any better understanding on what I'm doing wrong, let me know. https://codepen.io/Cptain/pen/xxpLzPR?editors=1010

Amazing, thanks again!

One final question. Since I'm planning to create hover effects for all of our icons, would I need to create these functions separately for each icon? I would assume there is a much more efficient and smart way, right?

@OSUblake this worked exactly as I wanted! Thank you and @Carl very much!

@Carl I appreciate you putting the time to help out. I did a bad job explaining the last part. Currently, everything is working perfect. The only thing I was hoping to better was, while hovering, the line moves from -7 to 7 without stopping at the starting position and then restarting. Then on mouse leave, function as it is doing now. Is this even possible? Here is how I initially made it with CSS animations. https://codepen.io/Cptain/pen/PoEKmVV This is my end goal, in addition to the mouse leave effect (reverting back to default state).

Thank you so much @Carl! I didn't reach this point, unfortunately, when I started your courses in December. This works almost 100% correct! However, in the very first icon (the scanning one), isn't working just exactly as I want, which isn't the biggest deal if you can't help further. What I was going for is this: Line is in the middle by default User hovers over icon Line moves to the top, then to the bottom, and keeps repeating User removes their mouse from the icon Line returns to default position and animation ends All of this worked perfectly, other than step 3. Because the animation goes back to its default position, it moves to the center and then back to the top. Is there a way to bypass this? https://codepen.io/Cptain/pen/xxpLzPR

Hello everyone! I'm trying to create some simple animations when the user hovers on an icon, however, when they remove the mouse from the icon, I'd like if the animation first went back to its original state and then pause there. Is there a way to do this?

Awesome! Thanks again for the replies.

Wow, thank you so much! This is exactly what I needed. ? So, basically, I needed to just add a timeline for each panel instead of just having one. Also, I appreciate the tips on cutting down the code, great suggestions! One more question. Is it possible to also have the animation trigger only if the previous animation has finished first? I'm gonna check the DOC again, but just throwing this out there in case I can't figure it out. On a sidenote, I can't thank you enough for developing such an amazing tool. I never thought it would be so easy to animate the web without losing my mind.

I'm building an SVG animation and I'm having trouble figuring out how I can incorporate a ScrollTrigger for my panels. My goal is to scale up the panels to their full size as far as the user is scrolled to a position that will allow them to view the animation. I'm not quite understanding how to do so in such a big timeline as this is the first time I'm creating something that is more than 10 lines of code with gsap. Any advice? I apologize in advance if my code is sloppy and not as efficient as it could be. Here's another codepen I made to try to test it out with less animations going on. https://codepen.io/Cptain/pen/wvMbQdO

Thanks for the replies OSUblake, I appreciate them. Thanks for the comment "Are you sure waiting for the page to completely load is a good idea?", not sure why I didn't think about this thoroughly. It does sound like a bad idea actually since there is likely the will be staring at a blank page as you pointed out. I'll probably take another approach with this—like having just the panels fade-in or something—, or drop it entirely.