Leaderboard

Indeed without a minimal demo seeing the code in action it is hard to help you debug. That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOdJGQq

Oh yes, that's exactly what i was looking for ... wouldn't have guessed i could morphSVG from a class name to another class name. Best library ever! (I promise to learn to use codepen ... it's just firefox obfuscates referrers and these embeds cause all kind of warnings, so i'm somewhat reluctant, but that's my problem to solve.)

Well the only thing I can see is that there is no animation at all here: gsap.to(trigger, { scrollTrigger: { trigger: trigger, start: 'top center', y: '-=100px', ease: "power1.inOut", stagger: .2, onEnter: () => { console.log('coucou') } } }) You have a GSAP to() instance but there is no animation whatsoever, just the ScrollTrigger configuration, if you remove that this is what's left: gsap.to(trigger, { }) Nothing, nada, nicht. See the problem? You need to add some property for those elements that can be animated to begin with. Finally you're planning to animate the same element that you're using as a trigger on your ScrollTrigger configuration. Be super careful about that and if possible avoid animating the trigger element because it could lead to unexpected results. Happy Tweening!

Does it? Honestly I can't think of a simpler way to achieve this. You can do it by hand but the calculations will become far more complex, I can tell you that. I you remove the ScrollTo Plugin from the equation, you'll have to find the height of the document element, to that you have to subtract the height of the screen and then use the same calculation in the Draggable instance to factor the current Y position of the element being dragged to the boundaries of the Draggable instance, translate that into a scroll position and finally use the scrollTo method to update the actual scroll position. If you ask me it's quite simpler to let GSAP and the ScrollTo Plugin to handle all the math of that for you. What exactly are you struggling with about this code? onDrag:function() { tnProgress = this.x / limit; logDiv.innerHTML = tnProgress.toFixed(4); t.progress(tnProgress); gsap.set(dragBar, {width:this.x + 10}); }, That's all there is to it. I see you updated your demo and you're using ScrollTrigger, you can definitely use the same approach to update the scroll position of a ScrollTrigger instance: https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroll() But I still recommend you to use the ScrollTo Plugin and leverage everything with the native scroll, updating this with ScrollTrigger will involve even more calculations actually. Happy Tweening!

It's pretty similar in this test. https://codepen.io/GreenSock/pen/PogVJNe

Hi, Yeah this is not the easiest thing to achieve. Luckily @ceribbo was super kind to share a solution for a similar situation with the community in this thread: Hopefully it helps you and if it does, remember to thank @ceribbo for it. Happy Tweening!

Thanks @Toso i did actually explore those a little while back - but they both seemed intrinsically tied to scrolling which i want to avoid. All the calculations seemed to be based off of scroll amounts which i had a stab at unpicking but couldn't separate out the logic. The other thing that tripped me up was when I looked at their code i couldn't see where z-index was being set - it seems to be set once on each element to 100, but actually interacting with the demo the z-index sometimes gets set in increments and sometimes switches to auto. I think maybe its not noticeable as only the front 3 overlap in those demos.

Hi, Is great to hear that you were able to solve it! 🥳 The site looks amazing, really nice animations and story telling, excellent job 👏 Happy Tweening!

But when the dependency is updated, the entire hook runs again and you have some lingering GSAP instances that are pointing to an element that is not rendered yet because of the useEffect/useLayoutEffect double call React does on Strict Mode. The useGSAP hook will revert only in the initial call of the hook but not when the dependencies are updated, why? Because we wanted to give users the opportunity to put all their logic in the useGSAP hook instead of creating a useGSAP and a useEffect hook, but not every time you need to re-run some logic because of a state/prop change you need to revert and re-create your GSAP instances, enter revertOnUpdate. With that useGSAP will not only run your logic inside the hook on a state/prop update but also revert and re-create your GSAP instances. Hopefully this clear things up. Happy Tweening!

Yeah the issue could be that the fact that the boolean on your state is updated that doesn't necessarily means that the elements are rendered yet, especially when you run that ScrollTrigger.refresh() method. Any particular reason for that? I don't really see any reason for having that code in that component. Removing that single line seems to fix the issue. As far as I can tell there is no real need to have that refresh call there, since when that component is unmounted the useGSAP hook will revert everything inside of it, so there shouldn't be any reason to globally refresh ScrollTrigger, unless there are other ScrollTrigger instances in your parent component, but still if you need it you can add the revertOnUpdate option to the useGSAP hook to revert everything: useGSAP( () => { if (feedLoaded) { ScrollTrigger.refresh(); // rest of your code } }, { scope: curatorContainer, revertOnUpdate: true, dependencies: [feedLoaded], } ); Hopefully this helps. Happy Tweening!

Thanks for the demo. In the future please add new information to new replies. Editing the first post repeatedly makes it difficult for us and others to follow the conversation. I don't know enough about swiper in react to help you with this, particularly how to reference the Swiper inside the onChange callback. However, this bare-bones example shows how to animate the active slide (change it's scale) and animate something inside it (rotate the number div) Hopefully you can find a way to apply something similar to your project https://codepen.io/snorkltv/pen/WNmzezX?editors=0011

I couldn't help myself - I imagine this may assist others looking to do something similar so I went ahead and created this solution: https://codepen.io/GreenSock/pen/zYRmbEM?editors=0010 The basic concept is to create a simple ScrollTrigger for each box and then use the "start" of each of those to calculate the 0-1-based progress value for snapping on the overall section ScrollTrigger. Does that help?

Welcome to the forums, @Elliott W. It'd probably be best if you just focused on one thing at a time rather than creating a thread with a list of requirements The CSS scroll snapping is pretty limited in browsers. I think it only works on direct children of the scroller. That's more of a CSS question. We really try to keep these forums focused on GSAP-specific questions. You could use ScrollTrigger's snapping capabilities but it can't behave the same as native CSS scroll snapping because ScrollTrigger needs to wait for the user to STOP scrolling before it can kick in the snapping animation, otherwise it may fight for control with the user. You'd need to create a ScrollTrigger for whole section of red boxes and then calculate the ratios for snapping. Please see the docs and give it a shot - if you get stuck, post your attempt back here or start a new thread. Here's a fork of your demo with some of the other stuff quickly demonstrated: https://codepen.io/GreenSock/pen/qBxJVGd?editors=0010 Please keep in mind, though, that we don't typically do this sort of thing where people say "here are my list of requirements ___, please show me how to do it" and then do the work for them - I just had a little time and wanted to knock some of these parts out for you as a courtesy and to illustrate how it's done for others as well. Enjoy the tools! ?