OSUblake

Welcome to the forums @remma ScrollTrigger has to do because it needs to measure stuff with the scrollbars as they might take up width, like on Windows. You could just revert after refresh, kind of like here.

Hi tracta, You only need 1 timeline, and for snapping, check out GSAP's utility methods. We can use some of those animate the progress of the timline. GSAP Circular Carousel (codepen.io)

Welcome to the forums @Matt K You could certainly animate something like that with GSAP and ScrollTrigger. Rendering liquid it is a completely different story, and will almost certainly require using some sort of canvas/WebGL renderer like PixiJS or Three.js and probably a physics engine. That's possible. You would just have to move stuff around on the canvas to match the current scroll position, kind of like what is shown here with the orange boxes, which are being rendered in Three.js. https://codepen.io/ashthornton/pen/874833fdebc032bedd0cf61e9eac3ee9

Welcome to the forums @darkFly I'm having a hard time following your code. Like why are doing 2 Flips on the same state? Flip.from(closedPanelsState, { duration: 0.5, onComplete: () => { accordion.classList.toggle("expanded"); Flip.from(closedPanelsState, {}) } }) I think it would be a lot easier to understand if you refactored it into a timeline so you didn't have so many onComplete callbacks. Flip returns a timeline so you can add to that... Flip.from(state) .to(".foo", {}) of add a Flip to a timeline. gsap.timeline() .to(".foo", {}) .add(Flip.from(state))

Welcome to the forums @ajswebdesigns It's very hard to troubleshoot a live site. Can you put just that header animation inside a minimal demo? Thanks!

I don't know. That would be a question more for fabric.js. GSAP is an animation engine, so it doesn't control how stuff gets rendered.

There's probably not an easy way to do that. You could try with the MorphSVGPlugin, but it might not work well depending on how complex your trees are. And then if you have a bunch of trees, you're probably going to be running up against the performance limitations of SVG. I made some grass blades, and the shape of blade is relatively simple, but SVG could not handle animating a screen full of them. https://codepen.io/osublake/pen/JYpOOK

Hi GM_sql, CSS transforms are reported as a matrix... console.log(getComputedStyle(myElement).transform); // matrix(1, 0, 0, 1, -100, 0) So there is no way for GSAP to know that the -100 in that matrix is supposed to be a percentage. Before you start animating, you should set your transforms with GSAP. GSAP will then be able to keep track of what is a percentage and what is a pixel value. gsap.set(".foo", { xPercent: -100, x: 0 });

Hi Lucas, We use priv.js for the that, so you may want to reach out them. https://privjs.com/

How about this demo? It uses a scroll container, but doesn't seem to have the same problems. Pair with CSS Scroll Snapping - ScrollTrigger (codepen.io)

You will probably have to introduce some logic to check for that condition... ScrollTrigger - Looping (codepen.io)

Welcome to the forums @andreislusari Did you have a GSAP-specific question? And as far as I know, fabric does not do 3d. For a 3d canvas, you would probably have to use something like three.js.

Welcome to the forums @AnthonyZhang220 It's hard to tell what's supposed to happening from your code. Can you make a minimal demo on CodeSandbox? I would also suggest checking out our React Guide. It looks like you are a missing the array dependency from your effect, and you I'm assuming you would need to create your ScrollTriggers in a loop, but you would need an array of targets first. Check out the useArrayRef hook here.

For SVG coordinates, it's usually better to use getBBox instead of getBoundingClientRect. Here's a post that goes into some of the details and gotchas of getBBox.

You would need to call reverse on the instance you opened the modal with, so something like this... let modalAnimation; function showMenuModal() { modalAnimation = (mainWrapper.getAttribute("data-layout") === "mobile") ? playMenu({yPercent: 100}) : playMenu({xPercent: 100}); }; function hideMenuModal(e) { modalAnimation.reverse(); }; function playMenu(param_1) { return gsap.timeline() .set(".menu_container", {zIndex: 1}) .to(".menu_outer_modal", {delay: 0.2, ...param_1}) .to(".menu_inner_modal", {opacity: 1}) .to(".menu_outer_modal > .close svg", {opacity: 1}, "<"); }