OSUblake

GSAP works the same regardless. It's React that is changing its behavior with strict mode. In strict mode, it calls everything twice to help surface bugs; but unfortunately, that also unintentionally creates bugs. As Dan brought up with his thought experiment with clicking a button really fast, that will create from logic issues. Check out how the opacity breaks if you click restart really fast. That's exactly what React is doing in strict mode. https://codepen.io/GreenSock/pen/gOPXLwN

Yes. I think this is much easier to wrap your head around. ... (codepen.io)

Sorry, what are you having problems with? If you need help, please provide a minimal demo. And if you're using React 18, you need to read that post I linked to.

Your original demo is all CSS issues. If you want to toggle something, you can do it like this. A Pen by GreenSock (codepen.io)

Gotcha. To replicate that, we would need to append the fixed item outside of the content because position: fixed won't work inside an element that has transforms on it, which is what ScrollSmoother does. So this seems to work. Pin fixed item with ScrollSmoother (codepen.io)

Welcome to the forums @vivek1234 If you need help, please provide a minimal demo. You can use CodeSandbox of React if you want. https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln?file=/src/App.js And if you're using React 18, you need to make sure your animation doesn't get created twice as that will mess up an from animations.

Hi chailandau, I'm a little confused about what you're trying to do. Can you make a demo of what you are expecting to happen without ScrollSmoother?

Hi Charlyta, I'm not sure what you're asking here, but your #content has display: none and visibility: hidden on it, so you would need to resolve both of those. And you don't visibility: hidden if display is set none.

Hi Sam, I would recommend going through this thread and reading what I have to say about approaching everything from a purely animation point of view, meaning don't think about scrolling. So instead of thinking about how can I do x when y scrolls into view, think about the animation in an isolated context. That cuberto animation should be pretty straightforward if you just think about what's happening as a normal animation. All you need to do is create a timeline that animates the text container and images up.

I don't how familiar you are with arrays, but knowing that arrays are zero-based is key to understanding all that. Zero-based means the first item has an index of 0. So the second item would have an index of 1, the third item would have an index of 2, and so on. And think about it in terms of math. How many screen widths is the first panel away from the viewport? It's already in view, so that would be 0. The second panel is 1 screen width away, the third panel is 2 screen widths away and so on. And that's why you'll commonly see this calculation to do horizontal effects. xPercent: -100 * (sections.length - 1), We subtract 1 from the length because length is not zero-based. So if there are 5 sections, i.e. the array length, then the last section will have an index of 4. Yes, it can be confusing, but that's just how it is. First off, that section is not being pinned. What is being pinned is the trigger you set here. let tl = gsap.timeline({ scrollTrigger: { trigger: ".main-container", // this is what gets pinned pin: true, scrub: 0.1, end: "+=2000" } }) Throughout this thread, I've been trying to make it a point that you need to approach it as an animation problem and not a scrolling problem. So here's essentially what a horizontal animation would look like if you could scale it down. The red box is meant to represent the viewport of your screen. horizontal animation (codepen.io) And ScrollTrigger is very similar to GSDDevTools in that it can scrub animations. If scrubbing that animation looks fine in GSDevTools, it will look the same if we hook it up to ScrollTrigger. horizontal animation (codepen.io) So I would suggest trying to make a timeline just like I did. If it works without ScrollTrigger, it will work with it. That's a hint that you should not have any nested ScrollTriggers inside your timeline, like I see here. tl.to('.list-left ul', { scrollTrigger: { // !!! you should never have a nested ScrollTrigger trigger: '.list-left ul', start: "83% center", scrub: true, markers: true, }, ... }) See the most Common ScrollTrigger Mistakes for more information. And for the images, I would not change the src as you can't animate that. To do a crossfade you need to have all the images inside the DOM, and then absolutely positioned on top of each other.

And you don't need those resize and load event listeners as ScrollTrigger automatically does that.

Hi Spycatcher, I don't use Animate so I can't give specifics, but you can use the MotionPathPlugin to animate EaselJS objects in Animate. @Carl do you have any courses on how to use Animate + GSAP?

Hi David, If you need help, please start a new topic and include a minimal demo of your issue. Thanks!

Welcome to the forums @Lighton Your conversion seems fine, but I think you might have stumbled upon a bug. When it messes up, the press init x value is different than the press value, causing it to jump. Please standby while we investigate. GSAP Migration Attempt (codepen.io) Also check out the part about Getting an object's properties. You'll need to do that for all the _gsTransform stuff in that applySnap function.

Hi tracta, Do this work for you? I just added will-change: transform; to the CSS. GSAP Animation (codepen.io)