OSUblake

Hi serotininene, That scroll animation looks the same to me whether the console is open or closed. What browser and OS are you seeing this on? The only weird thing I noticed is that when that contact form at the bottom appears, it's changing the scroll position, probably because it's changing the height of the document, but I don't know if that is related to what you are seeing and you are properly handling that change like doing a ScrollTrigger refresh. If you could try to make a demo that reproduces the issue, that would be really helpful because it's really to troubleshoot a live site, especially when can't interact with the code and make changes to it. You can use CodeSandbox if you need to use React.

React just makes animations much more complicated than they need to be, especially with Flip. For example, toggling a component doing something like this will mess up Flip because React will just recycle the same element instead of creating a new one, which will mess up Flip. <div> {active ? <MyComponent /> : null} </div> <div> {!active ? null ? <MyComponent /> } </div> That's why I had to use 2 different components here. Also, fade will not work in React. And another thread that might be helpful.

You need to use a relative value to add 360 degrees to the current rotation. They way you currently have it, it will only rotate to 360 degrees and then restart. gsap.to(".square", { rotation:"+=360" });

Welcome to the forums @AFoeee You really don't have to call then, and using overwrite: "auto" only kills the property animations that are conflicting. Animations are set to resolve on complete, so it wouldn't make sense to resolve tween1 in the code below when the new animation starts as the x animation is still going to run its natural course. let tween1 = gsap.to(".box", { x: 100, y: 100 }); setTimeout(() => { gsap.to(".box", { y: 200, overwrite: "auto" }) }, 100) Maybe we can add in something to resolve if the entire animation is killed, but for now you would have to force it to complete, maybe like this. GSAP .then() interruption test (codepen.io)

Welcome to the forums @Eduardo Muramoto Just call ScrollTrigger.refresh() to update ScrollSmoother. No, but maybe we add a way to do that in the future. Here's just a quicky example of how you could do that by making your own custom add/remove listener. https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-forked-irmojq?file=/pages/_app.js

What version of React? If you're using version 18, that is going to require some extra work if you're using strict mode. We're looking at ways to smooth that over, but it's 100% a React issue.

Welcome to the forums @RainyMonday I find it much easier to reason about ScrollTrigger animations if you don't include ScrollTrigger. Yes, just remove ScrollTrigger from the equation and figure out the animation first. Pretty easy, right? A Pen by GreenSock (codepen.io) Now just add a ScrollTrigger to it and you should be good ?

Wow! I don't know how I've never that seen before. ?‍♂️

You really can't slow scroll speed down without pinning. I think your original idea of using ScrollSmoother might be the better option, like using a speed less than 1.

Hi Dj, We can't troubleshoot a live site for you, so we need some sort of demo that we can interact with and test. If it works CodePen, then there might be something else interfering with it, like maybe or another JavaScript library or some CSS. That's not valid unless the i is coming from a loop. You would need to use a function like this... pin: (i) => i !== panels.length - 1, That's why is super important to provide a demo so we can see everything in context. Posting code snippets is almost always meaningless as there are a bunch of other factors involved, like your HTML, CSS, and other code.

Hi Ndonna, Transforms don't work on inline elements like <a> elements. Try changing its display to inline-block.

I can't reproduce the issue. Have you tried in incognito mode? Maybe you some extension that is messing with it. As far as code goes, the only thing that stands out to me is that you are changing the src of an image, which can cause weird behavior sometimes. Maybe try another technique with all the images already in the DOM or use canvas to draw the images.

Sorry, but I'm not understanding what you're trying to do. If you need scrolling and scrollbar, then you should use ScrollTrigger.

If you're going to have scrolling on the page, then you probably shouldn't use the Observer as it's going to conflict with scrolling. If you need to change the speed of the ScrollTrigger, you just need to adjust the end value.

What do you mean by "fake height"? You would know when the character is at the end when the progress is 1. if ((anim.progress() + 0.1) >= 1) { // it's at the end }

Here's a quick demo using the Obeserver and the new quickTo method. If you want change how far it moves on every event, just change the 0.1 value here to something else. progressTo(anim.progress() + 0.1); progressTo(anim.progress() - 0.1); GSAP Starter Template (codepen.io)

Welcome to the forums @JoePham Can you explain what you mean by reducing the space from A -> B? I'm not sure what you mean by A or B as there are no labels with that. It looks like you're following an SVG path, so you would probably need to rework that if you want to reduce the space. To change the speed, you can change the scrub value to a number... And make your page longer. The speed is ultimately determined by the scroll distance, i.e. how far the user scrolls. If your app is going to fixed that, another alternative would be to use the new Observer plugin, and use the wheel events to animate the progress of your animation. If you can make a CodePen, I can fork your code and kind of give you an idea of that. Here's a guide on how to create a CodePen along with a pen to fork with everything already loaded. https://codepen.io/GreenSock/pen/aYYOdN

Yes, you can test the Club scripts locally, like the ones you see on CodePen, like... https://assets.codepen.io/16327/ScrollSmoother.min.js Just make sure you run it on server using localhost:somePort instead of something like 127.0.0.1:somePort. Alternatively if you use npm/yarn, you can install gsap-trial instead of gsap. https://www.npmjs.com/package/gsap-trial

I'm still a little confused about what the problem is. What do you mean by "unmute"? And what do mean by having the boxes appear one after another? That can mean a lot of different things, like a fade animation, scrolling into view, etc. You said it works without ScrollSmoother, right? Can you post a demo showing the correct behavior without ScrollSmoother?

I wouldn't say expensive, more like tedious ? But that's what is needed because the enter back animation is in a different order than the enter one. That's why I had to reverse the items array. You can see that just doing the animation in reverse is not the same thing. A Pen by GreenSock (codepen.io)

Hi WaReZor, Your toggle action is resetting the animation on leave, so there is nothing to reverse. You're already at the beginning. If I understand your goal correctly, you will probably have to make another animation when entering back, kind of like this. A Pen by GreenSock (codepen.io)

Or you can try using the once property.

Doing that will behave the same way as your initial demo. $.fn is just a way to add a method to jQuery's prototype. You can add whatever you want to whatever you want. JavaScript is pretty relax in that regards, so you can add an animation to an element, object, etc. A Pen by GreenSock (codepen.io) For more help with JavaScript, I would recommend checking out Wes Bos' JavaScript course. Most of your questions are really just general JavaScript scoping questions. https://wesbos.com/javascript/03-the-tricky-bits/scope

That's more of general JavaScript issue than a GSAP one. You can't call the same function like that, that's why I was saying to create a class or function that returns an API. This is a really basic, I'm just returning a function. GSAP won't Splittext before element (codepen.io)

I'd still keep that in there. Like I said earlier, those previous are still going to be running. So if you spam it 10 times, there are going to 10 unique animations running, even though you're only going to be seeing the effects from the last timeline. I'm not I understand the rest of your last post. Can you make a demo showing what you're having problems with. Normally if you're trying to make a component, you would use a class or a function that returns an API.