All Activity

@NickWoodward you need to create the ScrollSmoother on each of your pages <script is:inline src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollSmoother.min.js" ></script> <script type="module" is:inline> import gsap from "https://cdn.skypack.dev/gsap"; document.addEventListener("astro:page-load", () => { gsap.registerPlugin(ScrollSmoother); // scroll smoother ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, }); }); </script>

const state = Flip.getState(".small, .large"); document.body.classList.toggle("active"); Flip.from(state, { // how to use different ease/duration/delay for opacity fade: true, absolute: true, ease: "expo.inOut", duration: 0.5, zIndex: 10, });

Hi Gsap community, I am new to gsap and I am trying to create a slider snap scroll just like at https://forner.studio/ at the bottom but I can't seem to figure why my slider doesnt snap as it supposed to on scroll down. it seems to work okay when you scroll all the way down and start scrolling up. here is a codepen of my code https://codepen.io/Mileristov/pen/ExJBazp

I also made a version which is using pinning, thus significantly narrower again. https://codepen.io/emjay/pen/yLrdBYp/9b8c27483758f960c57475c201241013

Hello, I'm attempting to animate a dialog component from RadixUI's component library in a NextJS 14 App router project. I have converted the Radix component to a controlled component following their docs (and this useful video by Sam Selikoff), by not using the internal wiring from Radix that opens the dialog with the <Dialog.Trigger /> component and instead conditionally rendering the dialog with state isOpen and the use of forceMount prop on <Dialog.Portal />. I would expect to simply give the useGSAP() hook a dependency [isOpen] and trigger the timeline to play() or reverse() based on that state too. The forceMount prop is used to delegate the mounting and unmounting of children based on the animation state. But currently I have no GSAP animation playing. I realise there is some specificity to Radix with this question, but if anyone is willing to check my GSAP code I would be very grateful. In fact the logic described above may not be necessary; I noted another question in the forum animating a Radix component and from the code that was provided in that question it did not appear that the OP was using forceMount, indeed the conditional rendering appeared to follow a conventional approach. My Stackblitz demo is here: Stackblitz In the above demo there are two routes; one dialog animating with GSAP without a RadixUI dialog component, and another route with the RadixUI dialog component, but not currently animated with GSAP. The GSAP code is scaffolded out on that page, but is not animating the dialog into view. The animation I am aiming for would resemble the animation from the route currently without Radix. Many thanks in advance

To me it seems there are around 11 rows on the site you share and some of the rows are already at some scale and other start from 0, so it looks like they keep growing, but there is just a finite number of rows. I also think they just scale to a final number of 1, but their initial size is just bigger then what is in my demo, but you can easily fix this by just changing the layout via CSS. These are not mutually exclusive, canvas is a way to draw things on the screen. GSAP doesn't draw anything it just animaties things that are a ready drawn on the screen. I've updated my pen a bit to include more rows and have more start animating from 0, to me this seems like on your reference (except they have them over lap more, which is just CSS) https://codepen.io/mvaneijgen/pen/zYXVYdr?editors=0010

Hi @mvaneijgen, Sorry for not being clear, I used these as a reference to build it in GSAP. But never got the chance to do it. I have no clue how to add each line in gsap scroll in order to animate these on browser scroll just like in the https://remote.com/global-hr/contractor-invoicing-and-payments website. I am trying to figure it out, how to do it and I prefer GSAP over canvas. Thanks for your quick example, it is a good start, but I have to find a way to make each line move down and so to simulate the infinite grow animation while the user scrolls. Seems a little complicated, not sure yet what is the logic behind it. But probably while it grows (scales up), it also moves down slowly, so that the 1st row will continue to grow from 0 to 1.2 or 1.5. Thanks, Serban

so there's no actual fix to this, thats just the way it is?

Hi @Serban welcome to the forum! There is no GSAP code in your demo!? If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ When working with GSAP it is good to remember that everything starts with an animation, so if you want to make something to animate on scroll it is best to first focus on the animation at hand, then when that is done it will be trivial to hook it to ScrollTrigger or something else. Canvas always make my head spin, so I cant help you with that, but I can show you how I would build it using just the SVG elements directly. I would figure that the logic is the same if you can get the rows from the canvas element. Again this is just the animation, but there is some ScrollTrigger code commented out, so you could enable that to see how it would work in scroll. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYXVYdr?editors=1010

Hi everyone, Can anyone help me figure out on how to do this type of animation on scroll. It is a canvas with svg patterns, and when the user scrolls it will start scaling the 1st row from a smaller size to the initial svg width and height. Not sure how to make this one work Would really appreciate if someone can help me. I have had an attempt, maybe it is a good start but I can't figure it out properly. I have also break down the code into parts from the https://remote.com/global-hr/contractor-invoicing-and-payments https://i.imgur.com/hXHepSI.mp4 HTML <div class="sc-f1d6031c-0 hjWElG pattern-transition" from="white" to="red500"> <canvas width="5080" height="868"></canvas> <svg width="78" height="40" viewBox="0 0 78 40" xmlns="http://www.w3.org/2000/svg" class="pattern duo-petal pattern-ref" style="fill: pink;"> <path d="M39 39.9939C47.9212 39.939 60.9436 36.5061 67.7442 29.6951C74.3072 23.122 77.7258 14.2683 78 5.54268V0H76.507C66.495 0.195122 56.2148 2.82317 48.5672 10.4878C43.4911 15.5732 40.3162 21.8232 39 28.378C37.6838 21.8232 34.5089 15.5732 29.4328 10.4878C21.7852 2.82317 11.505 0.195122 1.49297 0H0V5.54878C0.280313 14.2744 3.69891 23.128 10.2558 29.7012C17.0564 36.5122 30.0727 39.9451 39 40"></path> </svg></div> CSS .hjWElG { position: relative; width: 100%; display: grid; margin-top: -0.5px; margin-bottom: -0.5px; background-color: #ffffff; } /*!sc*/ .hjWElG canvas { width: 100%; height: auto; } /*!sc*/ .hjWElG .pattern-ref { position: absolute; visibility: hidden; pointer-events: none; } document.addEventListener("DOMContentLoaded", function() { const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const svgPath = document.querySelector('svg path').getAttribute('d'); const patternColor = 'pink'; // Color of the SVG fill let pattern; let maxScale = 1; // Maximum scale at the bottom of the page // Function to draw the SVG path into a canvas pattern function drawPattern(scale) { const scaledWidth = 78 * scale; const scaledHeight = 40 * scale; const blob = new Blob([`<svg xmlns='http://www.w3.org/2000/svg' width='${scaledWidth}' height='${scaledHeight}'><path fill='${patternColor}' d='${svgPath}' transform='scale(${scale})'/></svg>`], {type: 'image/svg+xml'}); const url = URL.createObjectURL(blob); const img = new Image(); img.onload = function() { pattern = ctx.createPattern(img, 'repeat'); updateCanvas(scale); URL.revokeObjectURL(url); }; img.src = url; } // Function to update canvas drawing based on scroll function updateCanvas(scale) { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = pattern; ctx.save(); ctx.scale(scale, scale); ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale); ctx.restore(); } // Update the canvas on scroll window.addEventListener('scroll', function() { const scrollPercent = window.scrollY / (document.body.scrollHeight - window.innerHeight); const scale = Math.max(scrollPercent, 0.1) * maxScale; // Scale starts from 0.1 to 1 drawPattern(scale); }); // Resize canvas dynamically and redraw pattern window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; const scale = window.scrollY / (document.body.scrollHeight - window.innerHeight) * maxScale; drawPattern(Math.max(scale, 0.1)); }); // Initial setup canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawPattern(0.5); // Start with the smallest scale });

OK I think I figured it out. Wasnt as complicated as I thought... https://codesandbox.io/p/sandbox/react-gsap-starter-template-y8z5hd?file=%2Fsrc%2Findex.js

Pleased to meet you @mvaneijgen, I'm a Jr. SWE who is now doing a R&D(Research and Development) on figuring out the tech stack that can provide me huge advantage of animating our company's site and it's under development so we have plenty of time to do it. And so provided the design from our company I found a reference https://www.anyways.co/ footer, in which they have inertial effects. I am trying to achieve it but when I glanced through the GSAP docs I found that inertial effect is a club plugin. Also sorry for the less information which I gave you before.

Hi @Rodrigo, it took me a while to come back to this, but with a fresh head I came up with a slightly different idea. With a combination of a dynamic top of the viewport value for the start marker and ScrollTrigger.refresh(); it works fine: https://codepen.io/emjay/pen/YzMbmvg/b470cafeaf6e4f2fd39203126e8f3f67 I think it's totally fine to do it that way, don't you?

Hi guys Stackblitz is not working for me for whatever reason, but codesanbox seems fine. Is there a react gsap starter template for codesandbox somebody can point me to please, or briefly describe how I can set one up please?

Hi @Sharath Lingam welcome to the forum! Sure you can, but the question is how much time do you have and what is your skill level? The beauty of GSAP is you can build anything you like! So there is probably a way with the tools GSAP gives you can build your own inertia logic, but that means you also have to do all the debugging and all the trouble shooting your self, so the question becomes how much time do you want to spend figuring this out? Our reply will be "just use the inertia plugin, there is a lot of time spend figuring it all out, so that you don't have to!". Your question feels a bit like asking a carpenter if you can borrow all their professional tools, but without their tools they can't do their job... But again feel free to roll your own logic, there is nothing wrong with a bit of coding and figuring things out by your self. In theory inertia is just animating something and slowly getting to a 0 value that feels correct, but I think when you do go the roll your own route you'll come across a lot of hurdles that will take a lot to figure out. Hope it helps and happy tweening!

Hi @Manoj Khatri welcome to the forum! Check out the post by our own @Carl

Can I create inertia like effect without InertiaPlugin, with only by using free plugins?

How we can create this type of carousel using GSAP? Anyone who knows can help

Hi, This is the simplest way I can think of doing that: https://codepen.io/GreenSock/pen/LYvoaNb Hopefully this helps. Happy Tweening!

I'd go even simpler with yoyo tweens and repeatDelay. Something like this. https://codepen.io/PointC/pen/JjVqxgY/63a3e8ecfaf75286961b6e2ec36abed7 Just my 2 cents. YMMV. Happy tweening. Just FYI - the original pen that I forked had tweens with a 0.1 → 1 second duration on a timeline that was 100 seconds long. With scrub set to true they were animating super fast because they were only a tiny fraction of the duration. .1% - 1%.

I doubt you'll run into performance problems with this TBH, since you have a rather small collection of elements. IMHO though this seems simpler to understand, follow and maintain: const blockElements = gsap.utils.toArray(".block"); const block1 = blocks.querySelector(".block-1"); const block2 = blocks.querySelector(".block-2"); const block3 = blocks.querySelector(".block-3"); const blockSettings = [ { element: block1, position: 30 }, { element: block2, position: 50 }, { element: block3, position: 60 } ]; blockSettings.forEach((b, i) => { const block = blockElements[i]; const otherBlocks = blockElements.filter((block, j) => i !== j); tl.add(() => { gsap.to(block, { opacity: 1, duration: 1, scale: 1 }); gsap.to(otherBlocks, { opacity: 0, duration: 1, scale: 1.2 }); }, b.position); }); You don't have to resort to that conditional block and anything that results in simpler and shorter code, is going to make more sense if you have to look at it in 6 months. Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNORmKL Is worth mentioning that using the add() to add an anonymous function is the same as using call(): const tl = gsap.timeline(); tl.add(() => {}, position); // Exactly the same tl.call(() => {}, [/*parameters*/], position); Hopefully this helps. Happy Tweening!

Hi @MarOne, You can check the resources in the Webflow installation page on our Learning Center: https://gsap.com/resources/Webflow#installation Also we have a brand new installation video, where @Cassie goes into a lot of detail including webflow: This starts right with webflow, but you can go to youtube and check the chapters on the video so you can jump directly to a specific section. Hopefully this helps. Happy Tweening!

wow it works fine, i replaced the useEffect with useGsap thanks a lot

After more tinkering, i think i found a solution: https://codepen.io/Valentin-Ilas/pen/ZEZNVRX?editors=1111 Basically I'm using tl.add() to run animations independently from the scrub on the parent container. Then i can specify for each one where during the progress it should run. Seems to work backwards too. But is this approach efficient? or do you see any performance issues?

Can Anybody please tell me how to use Gsap Club plugins in a webflow project? It's soooo complicated and it shouldn't be like that?