Leaderboard

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 @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!

Feels like the origin is much higher on the targets in that example. I also don't think there is any z rotation. Just a trick of the perspective. Here's a quick fork of your demo. I also switched to SplitText instead of SplitType. This is a GSAP forum after all. 😉 https://codepen.io/PointC/pen/dyLERxK Hopefully that helps. Happy tweening.

I would get in to the habit of never animating your trigger element, in this case it will probably be fine, but better save then sorry. I've wrapped your .trust-item in an element called .trigger and used that as the trigger element now your trigger and element you animate are separate. I've restructured your pen a bit, personally if a ScrollTrigger has an animation I like to combine the two, so there is no confusion what code does what. Then because you want things to animate first, but pin later, just add another ScrollTrigger that just does the pinning. I highly recommend reading the ScrollTrigger docs, just once to see what all kinds of awesome features are in there, because I've used a few. 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/mdgYRyq?editors=0010

Yeah that is an easy fix, check out the video below if you need any help

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

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%.

Just so you know, you could just call tween.revert() instead of doing both kill() and clearProps. You could also record the progress in your resize handler, and then re-apply that to make things continuous: https://codepen.io/GreenSock/pen/ZEZNmpz?editors=0010

You still have transition: all 0.25s ease; in your css which is conflicting with your JavaScript animations. highly recommend removing this and never to use transition: all 0.25s ease! Just change all to the property you want to transition eg transition: opacity 0.25s ease; but glad you’ve solved your issue. Happy tweeting

I think you'd just need to clearProps when you resize and kill the tween. https://codepen.io/PointC/pen/bGJyjYz/03ab931389596f7fd6e582a8f9c6c1ec But I agree with @Trapti, there are easier ways to do this with an SVG. Happy tweening.

I am not sure what is the issue with the current setup. But isn't it easier to just do with SVG and motion path.

You're having multiple issues here, my advise make it simple! Instead of having loops upon loops, just focus on the first animation you want at hand, just the basic version. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. Check out my post about making things simple. Hope it helps and happy tweening! Here an example with just the basic tweens and one element, just to get the basics down. Now this is working which allow you to focus on the scoping and looping for other elements. Again my advise keep forking your work this will create backups and thus you can fall back if something is not working. https://codepen.io/mvaneijgen/pen/RwOmoqV?editors=0010 Check out our own @Carl's tutorial if you want to have this seamlessly loop! https://www.youtube.com/watch?v=0DSkgXNFZHs

Ok, I've overcome the problen, and find a solution! GSAP has nothing to do with it, it has no compatibility defects, as someone suggested. The problem is due to a bug in Safari, that till a certain release (which one I don't know, by the way): the broiwser doesn't support the data format "yyyy-mm-dd". So I fixed with a simple regex replace, like this: dateString = dateString.replace(/-/g, '/') So, I apologize for bothering you unnecessarily (in fact, GSAP has no problems). I've included the solution in case anyone else encounters this error. Thanks again.

You can use the ScrollTo Plugin for that. I've create an array and pushed all your ScrollTrigger to that array. Then in your click handler you select one of them and get it .start of .end value and then scroll to it. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/QWPRNjO?editors=0011

instead of animating width try setting the scale of the element, this is much more performant and has the befit that the logo is still responsive (see your demo on line 14) change width: "236px" to something like scale: 0.2, or another value that looks better.

This is mainly a scoping issue. You have two .flickities elements and for each of these element you want to do some animation, so you'll need a .forEach loop for each of these elements. I have no idea what your animation should do, but you're having a lot of code that doesn't seem logical to me. Example a timeline has a repeat feature build in and setting repeat: -1 will repeat infinitely, so no need to build your own function. Also you're using the GSAP v2 syntax a lot has changed in v3 so I highly recommend check out this awesome getting started guide https://gsap.com/resources/get-started/ I've used the https://gsap.com/docs/v3/GSAP/UtilityMethods/selector() to scope the q(".flickity"), to the current .flickities element. I've disabled a lot of your code, because I can't figure out what it should be doing. Again check the getting started guide, it explains all the basic features you'll need in GSAP and also just read the docs once you'll be surprised how much is already build in to GSAP https://gsap.com/docs/v3/GSAP/Timeline/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwOmNOP?editors=0011

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! I would add another addEventListener to use button to check if the mouse is entering or leaving and then you could use something like https://gsap.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()/ to move the element from it current position to the center one. Also check out the quickSetter() in GSAP, a much more performant way of having things animate on mouse move. https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/ Hope it helps and happy tweening!

Hi @LVegetable welcome to the forum! Have you seen our Stackblitz starter templates? It has a boilerplate for all the major frameworks, including next.js In all my time developing websites I've never needed to overwrite the default scroll behaviour there is always a better way, I think. From your description I would also not read anything that needs to overwrite the default scroll behaviour. Your background can just be a fixed element and the other elements can just scroll or animate them with the y property in GSAP. Keep in mind that everything in GSAP is an animation, even things on scroll start out as an animation. Check out this tutorial how to work with ScrollTrigger Personally I always start in codepen and really focus on the logic I need before I bring it over to my framework. It usually takes me around 10 versions to get to a state I am happy with and then it will be trivial to port it over to what ever framework you like, but the web is basic HTML, CSS, JS so if that is solid it will work any where! You can work with React in codepen and you can then set it up like the pen below. But again, personally I would remove all abstractions and just focus on the basics and when that is working your can port it to what ever you like. Hope it helps and happy tweening! https://codepen.io/GreenSock/pen/OJmQvLZ?editors=0010

It looks like your math calculations were off - you were calculating the offset from the current position but you were tweening to absolute numbers rather than relative ones. Is this what you meant to do?: https://codepen.io/GreenSock/pen/XWQQWJK But the problem with that is it's not really responsive. You're animating to specific x/y values but the original top/left absolute positioning is different, so resizing your window will result in different offsets. I think it'd be much cleaner to use a Flip animation instead: https://codepen.io/GreenSock/pen/rNbbNVe?editors=0010 Does that help?

Yep, same issue - you're creating things out of order, thus they refresh in the wrong order. For example, let's say elementA is 100px from the top of the screen, and there's a ScrollTrigger that triggers when that hits the top of the screen ("top top"). So normally, the start would be 100. But what if there's another ScrollTrigger that pins an element above that one for 1000px - that'd push everything down, thus that element should trigger at 1100px instead of 100px. If ScrollTrigger calculates them in the wrong order, it'd set the first one to a start of 100px (because the pinning one hasn't been factored in yet). Here's a helper function that you can call after all of your elements are in place, and it'll order things based on their proximity to the top of the viewport: function verticalSort() { let scroll = window.pageYOffset; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); } https://codepen.io/GreenSock/pen/ZEZPqyd?editors=0010 Better? Of course you could solve everything by explicitly stating the unique refreshPriority for each, but the above function seemed easier and it should work in most cases.

I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class. gsap.to('.header-icons > div', { Happy tweening.

Hi, thank you for your reply. I may have caused some confusion because I wrote the English in translation. What I actually want is to specify different ease and duration for the opacity within it. After reviewing the documentation, I found a method in a demo that allows passing custom parameters. https://codepen.io/GreenSock/pen/bGjXGeX let customVars = { x: { ease: "power3.in", delay: 1, duration: 1 }, y: { ease: "power1" } }; Flip.from(state, { duration: 2, custom: customVars });

@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>

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!

I'm not 100% sure I follow what you're trying to do. I forked the codepen and made some changes to it: https://codepen.io/GreenSock/pen/wvZbQKX At the end the pinnedContainer config is not needed since any of the pinned elements is adding any vertical space. Hopefully this helps. Happy Tweening!

Hi, Just create a loop for the cards, add a couple of to() instances to the timeline and using the position parameter create an overlap with the previous card: https://codepen.io/GreenSock/pen/WNWBaKz Hopefully this helps. Happy Tweening!

Hi @DottyTom and welcome to the GSAP Forums! The reason you're seeing other elements scroll over the one with the red/blue one is because you have pinSpacing false on all of them, including the one with the blue element. Maybe you're trying to do this: https://codepen.io/GreenSock/pen/YzMbxXJ Hopefully this helps. Happy Tweening!

Yeah, we got you covered, check this article from our Learning Center: https://gsap.com/resources/fouc/ Hopefully this helps. Happy Tweening!

Thank you, sir! It's completely solve my problem. And your explanation was so helpful 😉

Hi, The demo you shared uses Framer, so there is nothing we can do regarding that. This demo shows how to do something similar with GSAP and the Flip Plugin: https://codepen.io/GreenSock/pen/XWOVbdz This demo shows how to use the re-parenting feature from Flip: https://stackblitz.com/edit/vitejs-vite-xunf8c?file=src%2FApp.jsx Finally @PointC, one of the superstars in these forums, has this cool demos as well: https://codepen.io/PointC/pen/vVpvBE https://codepen.io/PointC/pen/rZZGRj Hopefully this helps. Happy Tweening!

Hi, Is great to hear that you were able to solve this. Yeah some of this issues in Safari are really mind boggling 😵‍💫 Finally thanks for sharing your solution with the community, I'm sure many users will benefit from your generosity and insight 💚 Happy Tweening!

oh, you did it! thank you. I just updated the codepen, but trasnferred the solution to my wordpress develop site and it runs like butter. Thank you so much

It’s fantastic to hear that the Remix simple demo is working smoothly with the latest useGSAP hook! It’s always a relief when things work as expected right out of the box. 😄 Creating a simple Remix app locally to test the bonus plugins sounds like a great idea. It’s always good practice to verify everything in a controlled environment to ensure compatibility and functionality.

Thanks!! so it works, I moved my motion-gsap.js code underneath and everything works correctly.

Hi @marcow welcome to the forum! From your screenshot I see you load your motion-gsap.js BEFORE all the GSAP scripts. It is recommended too load your own script AFTER all the dependencies you'll need. As a work around you can wrap your custom code in a load listener eg that way you're sure your code gets executed when everything on the page has load. window.addEventListener("load", (event) => { // your code here! }); Hope it helps and happy tweening!

I came up with another way of making the radial wipe without needing any functions. I cheated with the mask above my images (it's red in the demo), but it works. https://codepen.io/glenn-ko/pen/YzMgJrV

I have the same issue, just upgrade my dependencies of react and react-dom to the latest version (). Now it works on my end.

Thank you guys! I have a rather long page with 3-4 sections in between which are dynamic and slow. Simply using the .sort() method didn't work But using the verticalSort() helper function you suggested did the trick. I just had to include ScrollTrigger.refresh() after the sorting to make it work properly: function verticalSort() { let scroll = window.scrollY; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); ScrollTrigger.refresh(); }

The useGSAP hook has a dependency for at least React 16, but it doesn't use/install React 16: "dependencies": { "gsap": "^3.12.5", "react": ">=16" }, If you already have React 18 installing the @gsap/react package won't change a thing and won't install another version of React. I just tested this on a demo here on my local machine using the latest version of Next without any issues. We only encountered some issues while importing the @gsap/react package from esm.sh, which solves by doing this: import React from "https://esm.sh/react@18.3.1"; import ReactDOM from "https://esm.sh/react-dom@18.3.1"; import gsap from "https://esm.sh/gsap"; import { useGSAP } from "https://esm.sh/@gsap/react?deps=react@18.3.1"; We'll update the dependencies on the hook to be at least version 17 of React. Finally it would be super helpful if you could create a minimal demo that reproduces this error. Happy Tweening!

Yes, like @Rodrigo said, you're creating your ScrollTriggers out-of-order. You're supposed to create them in the order they would be encountered (top to bottom). You're creating the top and bottom first, then the middle, so the refreshing order goes: 1, 3, 2 instead of 1, 2, 3. For relatively simple setups, it could be adequate to just call ScrollTrigger.sort() which will order them by whatever their "start" is calculated to be. But you can explicitly control the order of things by setting a refreshPriority on each one so you have total control of the order. https://codepen.io/GreenSock/pen/PogLyGO?editors=1010 And here's a verticalSort() helper function that'll sort them by their proximity to the very top of the viewport: https://codepen.io/GreenSock/pen/ExJMdXj?editors=0010

Hi @fraserYT and welcome to the GSAP Forums! You are using an extremely generic selector. I'd strongly recommend you to use a unique class in your elements even if it doesn't have any styles, just for selecting purposes. This seems to work the way you expect: <div class="header-icons"> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> <div class="menu-item"></div> </div> gsap.to(".header-icons .menu-item", { opacity: 0, y: -80, stagger: 0.1, scrollTrigger: { trigger: ".full-row", start: 0, end: 230, scrub: 0.5, markers: true } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNOVqKm Hopefully this helps. Happy Tweening!

In some cases, it's adequate to just call ScrollTrigger.sort() after all the ScrollTriggers are created which will set the refresh order according to the "start" value: https://codepen.io/GreenSock/pen/YzMgQrR?editors=1010 Is that what you're looking for?

Hello @Rodrigoyes I will try to do it I just have to take the time given the work I have at the moment thank you

Hi, There are a few issues in your demo. First you're creating a single timeline for all the buttons, that is not going to work the way you intend, create the GSAP Tween/Timeline, inside the loop so each button controls it's own animation. Second, you have the same mask name for all the elements, which means that when one mask is animated it affects all the elements with that mask ID, create a different mask ID for each element. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbRxrP Hopefully this helps. Happy Tweening!

Hi @Fullerfort, Right now you have a logic issue since you're running your code only for the first page: PAGES.forEach((page, index) => { set(page, { z: index === 0 ? 13 : -index * 1 }); if (index === 0){ to(page, { rotateY: `-=${180 - index / 2}`, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 2) * (window.innerHeight * 0.25), markers:true, }, }); to(page, { z: index === 0 ? -13 : index, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 1.5) * (window.innerHeight * 0.25), }, }); } else return false; }); That code block is running only when the index is 0, so the first page. May I ask why you changed the JS logic jh3y created? If is not broken don't fix it. Just changing the content of the pages should be enough IMHO. If you want to study and learn what is being done and why, then that is mostly related with JS logic and not really a GSAP issue. I'd recommend you to have a peak at MDN: https://developer.mozilla.org/en-US/docs/Web Happy Tweening!

Hello everyone, I have a component like this: "use client"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; import { useEffect, useState, useRef } from "react"; import Hamburger from "hamburger-react"; import * as NavigationMenu from "@radix-ui/react-navigation-menu"; import LangSelector from "@/ui/molecules/lang-selector"; import { Link } from "@/lang/navigation"; import { LinkItem } from "@/types/nav"; gsap.registerPlugin(useGSAP); function Header({ navItems }: { navItems: LinkItem[] }) { const [isOpen, setOpen] = useState(false); const [isMounted, setIsMounted] = useState(false); const containerRef = useRef<HTMLDivElement | null>(null); const mmRef = useRef<gsap.MatchMedia>(gsap.matchMedia()); const tlRef = useRef<gsap.core.Timeline | null>(null); useGSAP( () => { mmRef.current.add("(width < 768px)", () => { tlRef.current = gsap.timeline({ paused: true, defaults: { ease: "power1.inOut", duration: 0.3 }, }); tlRef.current .to(".nav", { autoAlpha: 1, }) .from( "li", { x: -20, autoAlpha: 0, stagger: 0.1, }, "<", ); }); }, { scope: containerRef, }, ); useGSAP( () => { if (!tlRef.current) return; isOpen ? tlRef.current.play() : tlRef.current.reverse(); }, { dependencies: [isOpen], }, ); // this is because rehydratation errors in the component useEffect(() => { setIsMounted(true); }, []); return ( <header className="header" ref={containerRef}> <div className="wrapper"> <Link href="/" className="logo-wrapper"> <img className="logo" src="/images/logo-gray.webp" alt="Estudio Leda" /> </Link> <div className="controls-wrapper"> <LangSelector /> <div className={`burger ${isOpen ? "--open" : ""}`}> <Hamburger toggled={isOpen} toggle={setOpen} label={"open menu button"} /> </div> </div> <NavigationMenu.Root asChild> <nav className="nav"> <NavigationMenu.List className="nav__list"> {navItems.map((item) => ( <NavigationMenu.Item key={item.label}> <NavigationMenu.Link asChild> <Link className="nav__link" href={item.href}> {item.label} </Link> </NavigationMenu.Link> </NavigationMenu.Item> ))} </NavigationMenu.List> <LangSelector /> </nav> </NavigationMenu.Root> </div> </header> ); } export default Header; The component works just fine. When I click the button and the isOpen state, it fires the useGSAP hook, and it plays or reverses the timeline according to the state. Is there a better/clean way to do this? I don't like the idea of having 2 useGSAP calls, the first to define the animations, and the 2nd to play or reverse the timeline according to the state. I could use useEffect, but since useGSAP is a drop in replacement for useEffect I chose to go that way. Its a good practice to store the Match Media and Time Line obejcts in refs? Thanks!

Hello Lilian. You can use ScrollTrigger's rich callback system to trigger any function you'd like. https://codepen.io/GreenSock/pen/qBdeVJY Figuring out the logic related to what you need to call and how to best call it, would be yours to figure out though, as this free support forum can not give support for any given 3rd party library. Below is a VERY dirty implementation just to give you an idea on where to start. I set up a boolean variable and only if that variable (triggered) is false, I start the rendering loop logic of matter.js in ScrollTrigger's onEnter callback. Keep in mind, this is just to give you an idea - how to make it start in its initial expected layout from where the words are supposed to fall e.g. would be more of a matter of matter.js (yeah, that pun was intended ?) which as I said, you'd need to figure out yourself with regard to that library. Here are some notes on your use of ScrollTrigger though: if you want to use markers to help debugging, it's markers- not marker as you wrote the element you want to use as a trigger does not have any height, so you will likely run into problems if you want to also trigger things onLeave or onEnterBack (or even try to scrub the animation - which again would be a case of finding out how to update the animation within matter.js first) even if that element had a height, I would reconsider your choice of the end value for the ScrollTrigger - because if it e.g. layout wise was the same as that green section, the end would trigger at the same time as the start - because its bottom would already be hitting the bottom of the window First things first I would make sure that everything is in its absolute correct place layout wise before starting to implement ScrollTrigger in any way; to me your layout looks kind of odd with e.g. the body being visible when you scroll down - you appear to be using a viewport-width value for its height e.g. and I'm not sure whether that is intended or not - a proper layout (via HTML markup and CSS styling) is one of the most important things you will need when animating / triggering things on scroll Anyway, I hope this will be helpful in some way. https://codepen.io/akapowl/pen/KKrxdZa

Hi @yannick love and welcome to the GreenSock forums! You can try the bonus plugins on your local environment or in Codesandbox and Stackblitz by installing the GSAP Trial package: https://www.npmjs.com/package/gsap-trial Just run: npm install --save gsap-trial If you purchase a Club GreenSock membership, then you can generate a private NPM token in order to safely install and deploy the bonus plugins as mentioned in the docs: https://greensock.com/docs/v3/Installation#npm-club Let us know if you have more questions. Happy Tweeniing!

I've created a separate variable with only the mobile items and set that as the target elements on mobile. I had o rewatch the amazing video on the docs, but that should do it right? https://codepen.io/mvaneijgen/pen/MWXeBbQ?editors=0011

Hey @Daniel Hult You are making one of the most common ScrollTrigger mistakes here: Nesting ScrollTriggers inside multiple timeline tweens A very common mistake is applying ScrollTrigger to a bunch of tweens inside a timeline. This doesn’t make much sense because both the timeline and the ScrollTrigger would try to control the tweens' playhead. It's best to apply a ScrollTrigger to either a standalone tween or to a parent timeline. You could do what you tried above by just having 1 ScrollTrigger and adjusting the durations and offsets of the single tweens in that timeline accordingly. https://codepen.io/akapowl/pen/ff7dabf8f0946c406bdc61487b4f3f04 Also note, that I changed your color-names to hex-values, just as Richard1604 mentioned above