DW92

Hi. I have a problem with ScrollSmoother. Every time the promo popup opens on my website, the page scrolls to the top. It is related to ScrollSmoother, because when I disable the SS, the problem is gone. Any ideas how to solve this?

@Toso Great! What a Wizzard! Thanks a lot!

Hi @Toso Thanks for your help! I'm just showcasing this code on codepen. Testing it on my local enviroment, so I'm sure gsap is working just fine (with problems I mentioned). Is it possible to make "slides" jump, one after another, instead of smooth movement, in your example?

Hi. I'm trying to utilize helper function "seamlessLoop". I'm trying to use this example: https://codepen.io/GreenSock/pen/gOvvJee, but have some problems, with that: 1. When I use const boxes = gsap.utils.toArray(".box"); and passing that constant to horizontalLoop() function, this happens: but when I pass html selectors directly '.js--pelion-reviews-tape .wrapper .box' it works fine as a loop/marquee. The problem I get here is that onChange method doesn't work (doesn't add and remove "active" class). Here is my code: https://codepen.io/DW922/pen/oNVRqJb The only thing I want to achieve here is to have a "marquee", with "active" (center I guess) element highlighted. Thanks for all your help

True, I have experienced this conflict myself

Ok let me answer my own question, because I was playing with it after asking it and "eureka" xD It's because I am using "scrub" and scrub controlls animation time. In order to be able to alter duration I need to disable srub, and If I want to "reverse" animation by scrolling up, I need to use toggleActions: "restart none none reverse"

Hi! I wonder why my animation based on ScrollTrigger, that animates heigh from 0px to "auto" is not affected by duration. I am making accordion, that expands on scrollTrigger action, but I can't alter the animation time while the accordion is expanding. On the other hand, when I use CSS "transition" property, my expanding animation "jumps" instead of smooth execution, but collapse animation (other way) seems to be working just fine. Can you explain to me why is that? And can I do anything to make this work?

Good idea, I will check that too. What about GSAP config itself? I think, the JS code is pretty slim. Is there something else I can change to use GSAP better in this case?

Well, the images are mostly cropped to fit 1920p screens (I mean original images, not the ones from the example) and their size is between 400 - 800kb. Do you think it's still too heavy? Yeah, I haven't tried without clip-path. That's a good idea.

Hi, I have a problem, that some of my co-workers experience lagging and stuttering while browsing a website, that was made using GSAP (ScrollSmoother, ScrollTrigger included). The most problematic part is the Hero section with 3 parallax effects, so I included it, as a codepen here. It's just simply a code and some random pictures from the web, because I can't share my own assets on free CodePen plan, but the html/css/js structure is exactly the same, as in my project. Can you please take a look and tell me, what can I do to optimize it, as much as I can, in terms of GSAP parameters? I am going a little blind here, because this works perfect on all of my machines (from newest to oldest, with dedicated GPU and integrated one), and all I have is someone else's experience. The assets are optimised as well. I made sure, that the pictures are as small and lightweight as they can be, so I'm out of ideas now... Thanks!

Hi, I have a problem while using ScrollSmoother and ScrollTrigger together. My animations that depends on ScrollTrigger are broken - part of the animation fires without any transition. E.g. I have an animated text, where I animate it letter, by letter, via Timeline. The problem is - first or even second letter sometimes appear immediately, without any duration. Is that a known bug or something that happens only to me?

Thanks @PointC ! Exactly what I was looking for!

Hah. Sorry @PointC for ignoring you Cassie's solution was so good, that I went straight to coding

Hi! I have an svg with pretty complidated font I would like to make an animation, that imitated handwriting effect. i've encountered this topic: And as far as I can see there are two ways of doing it - one mentioned is - doing it with multiple masks on svg, and the other one is with open paths method (so I guess I'm gonna need Adobe Illustrator knowledge to do it). Can you please explain it to me - how the multiple masks method works? Can you share some tutorials on this topic? Is it even possible to do it with a font like that? PS. Font name is "Manila" btw. Thanks!

Thanks! Works great for me!