Rodrigo

Hi, I just noticed that you are asking help basically on the same subject in two different threads. The example provided by @mvaneijgen here should provide a solid starting point: Happy Tweening!

Hi, I don't really understand what you mean with this: @mvaneijgen already linked a video where @Cassie talks about this: Check this example: https://codepen.io/GreenSock/pen/bGmrrEX Hopefully this helps. Happy Tweening!

Hi, With container animation pinning is not possible. From the ScrollTrigger docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. This thread covers a few approaches for fake horizontal pinning: Hopefully this helps. Happy Tweening!

Hi, Where exactly should I look at this? You didn't provided a minimal demo. Happy Tweening!

Hi, You can use ScrollTrigger Batch for each accordion item: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() https://codepen.io/GreenSock/pen/zYrxpmb Hopefully this helps. Happy Tweening!

Hi @leoarada and welcome to the GreenSock forums! First is the click event on the red elements that is not GSAP related at all. That will inevitably close the parent element because of a state change in the parent component. Then you are creating your Draggable instance oustide the GSAP Context scope. When working with react every GSAP instance in a component should be inside the scope of a GSAP Context instance: useLayoutEffect(() => { const ctx = gsap.context(() => { Draggable.create(/*...*/); }); return () => ctx.revert(); }, []); All you have to do is check the scroll position and enable/disable the Draggable instance: https://greensock.com/docs/v3/Plugins/Draggable/disable() https://greensock.com/docs/v3/Plugins/Draggable/enable() Also I wouldn't recommend doing this: useLayoutEffect(() => { let ctx; ctx = gsap.context(() => {}); // Later on your code, re-assign ctx to a different GSAP Context instance ctx = gsap.context(() => {}); return () => ctx.revert(); }, []); Because the GSAP instances added to the first assignment of ctx won't get reverted and that could lead to unexpected errors, odd behaviour and memory leaks. Just add stuff to the GSAP context instance using the add() method or even better, as I mentioned before, create every GSAP instance inside the scope of the GSAP Context instance. Finally try to avoid using top/bottom/left/right in your animations, better use X/Y/xPercent/yPercent in order to use transform and get better performance. Here is a fork of your codepen: https://codepen.io/GreenSock/pen/yLGYjgL Hopefully this helps. Happy Tweening!

Hi, That implies using GLSL Shaders which is not the simplest thing to achieve and is quite beyond the help we can provide in these free forums. If I had to start somewhere I google getting started with shaders and then watch some videos in this channel: https://www.youtube.com/@akella_ He has used GSAP in some of his examples I believe. Good luck with your project! Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/NWxNEwY Hopefully this helps. Happy Tweening!

Hi @himeylo and welcome to the GreenSock forums! The Flip Plugin is actually not designed for SVG elements. Keep in mind that SVG elements reside in it's own coordinates system (that you give to them in the viewBox property, so there is no way the Flip Plugin can know about that: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox If I was you I would first try creating the animation without ScrollTrigger, just make the animation work with a timeline. When that works OK, you can plug ScrollTrigger into it. For that you can use the Attribute Plugin to move the SVG elements around: https://greensock.com/docs/v3/GSAP/CorePlugins/AttrPlugin Also there is no need to use position sticky, just tell ScrollTrigger to pin the <section> tag that wraps your SVG. Finally I wouldn't use so many SVG tags, just one and keep things ordered and neat there, maybe that could be the cause of your issues. Hopefully this helps. Happy Tweening!

Hi, You could try ScrollTrigger's container animation: https://greensock.com/3-8/#containerAnimation Here is a demo: https://codepen.io/GreenSock/pen/9be5d371346765a8c9a426e8f65f1cea Hopefully this helps. Happy Tweening!

Just extend the end point of your ScrollTrigger config. @Cassie explained that in this video: Hopefully this helps. Happy Tweening!

Hi, I tested your stackblitz example and I don't see the issue you mention in the image. Finally we can't debug live sites so there is not a lot we can do there and I don't see that particular elements in the live page. I'd suggest you to start with just plain HTML and CSS without any framework in order to simplify it as much as possible and then add it to a framework in an isolated component. Hopefully this helps. Happy Tweening!

Hi, There is any chance that you could simplify your demo? Is a bit too much code and makes it a bit hard to follow. Keep in mind that Jack suggested to create the timeline instance inside the MatchMedia instance: let mm = gsap.matchMedia(); mm.add("(min-width: 768px)", () => { const tl = gsap.timeline(); // ... rest of your code }); Hopefully this helps. Happy Tweening!

@Carl, How does this work on Safari?: tl.to('#clipMask1', 2, { rotate: 90, svgOrigin: "256 256" }); Thanks!

Hi, Yeah normalizeScroll can help mostly on mobile browsers and using ScrollSmoother, but with regular ScrollTrigger has that particular effect on desktop browsers. Another thing you could try is use will-change: transform in the elements and remove normalizeScroll. Honestly I'm having a bit of a hard time following your example because I don't have a lot of knowledge on CSS animations/transitions, since I've always used GSAP . I tested your codepen on Chrome and Firefox on a laptop running Ubuntu 22 and I don't see any problems. Hopefully this helps. Happy Tweening!

Hi, Something like this maybe: https://codepen.io/GreenSock/pen/xxmwOdb Hopefully this helps. Happy Tweening!

Hi, That can be done with PIXI, but drawing in PIXI is not super simple: https://pixijs.io/examples/#/gsap3-interaction/gsap3-trail.js That is not the actual code but is an example of updating a particular shape, in your case we're talking about an arc. Then you can update that animation using a Draggable instance: https://codepen.io/GreenSock/pen/qBLONEW Finally you can check this example by @PointC https://codepen.io/PointC/pen/NmqowR That is using old syntax, you can check this migration guide in order to convert it to new syntax and plugins: Hopefully this helps. Happy Tweening!

Hi @Babken, Here is an example with different widths: https://codepen.io/GreenSock/pen/gOvvJee Hopefully this helps. Happy Tweening!

Hi @Mavericks agency and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! I think your code is great! I really love clean and clear loops so it's right on my wheelhouse . If it ain't broken don't fix it, right? Happy Tweening!

Hi, It would work only for ScrollTrigger instances and not other GSAP instances. In those cases it would be better to have a context reactive property in the transition composable or create a different composable for the context and when the GSAP Context is created in the page, set the one in the composable to be that and use the same composable to revert it. Unfortunately I don't have time now to dig into this and provide a working example. Hopefully what I wrote makes sense and you can try this on your own. Happy Tweening!

Hi @amicoderozer and welcome to the GreenSock forums! PIXI display objects are a different thing than regular DOM nodes, that's why transform origin is not having any effect. You have to use a specific property of the PIXI Display object to set the transform point or origin point soto speak. In PIXI that is the anchor property: http://pixijs.download/release/docs/PIXI.Sprite.html#anchor This should work in the way you expect: let pixiBunny = PIXI.Sprite.from(texture); app.stage.addChild(pixiBunny); pixiBunny.cursor = "pointer"; pixiBunny.interactive = true; // This set the transform point pixiBunny.anchor.set(0.5); pixiBunny.scale.set(3); pixiBunny.x = 100; pixiBunny.y = 100; pixiBunny.onmouseover = () => { gsap.to(pixiBunny, { pixi: { rotation: -45 }, duration: 1 }); }; Hopefully this helps. Happy Tweening!

Hi Sorry about the inconvenience. I'll ping @Prasanna and hopefully he'll provide a solution for this. Please stand by.

Hi, You can use that example without the inertia functionality, is not a must have. Just be sure to import both the GSAP core and the Draggable Plugin in the file you have the horizontal loop and register the plugin as well: https://stackblitz.com/edit/vitejs-vite-wuylgw?file=src%2Fhelpers%2FhorizontalLoop.js,src%2FApp.vue,src%2Fstyle.css&terminal=dev Is not Angular but Vue is the closest to Angular that I can use ?‍♂️ Hopefully this helps. Happy Tweening!

Hi, Maybe the examples created by @Cassie in this thread can provide a good starting point: Hopefully this helps. Happy Tweening!

Hi, The issue here is that you're expecting that toggle class to work in a different way. Basically what ScrollTrigger does is to add that particular class to the target you're passing when the scroll passes the start trigger and removes it when the scroll passes the end point. From the ScrollTrigger docs: onToggle Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). That's basically when ScrollTrigger will fire, soto speak, toggleClass, that is add/remove the particular class to the indicated target. What you need to do is find a more consistent end point to prevent this, nothing more. Unfortunately we don't have the time resources to comb trough complex examples/codebases (your demo has more than 200 lines of HTML and almost 400 lines of CSS) and find issues for our users. If you want you can hire us on a consulting basis or post in the Jobs & Freelance forums in order to get help there. Good luck with your project! Happy Tweening!