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

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

GSAP is highly optimised and will get it's initial values on page load, but because you tween the same element twice they both get the same starting position and because you want the second (ScrollTrigger) animation to wait for the first one to end you have to tell it to that tween some how. Luckily GSAP has you covered with immediateRender: false, if you put that on the second tween everything works as expected. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-cgdvlq?file=components%2FBanner.tsx

Welcome to the forum. I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation. https://codepen.io/PointC/pen/dyLwoej Hopefully that helps. Happy tweening and welcome aboard.

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 @spotipre welcome to the forum! The angled black part you can do with a clip-path animation, see simple demo below https://codepen.io/mvaneijgen/pen/MWLxyPp And the weird image effect you can probably do with something like Pixi.js. Keep in mind that this question is kinda outside of the scope of these forums, we like to focus on GSAP specific questions, so if you still need help be sure to post a minimal demo focused on an issue with one of the GSAP tools. Hope it helps and happy tweening! https://pixijs.com

Are you sure you've updated your pen? It is always best to relink the pen or even fork, so that in the thread we can see the progress of the current version of that time. To me it seems like you've removed the functions from the parameters, this is importent, because it indicates to GSAP that is can recalculate the values, if you leave this out you tell GSAP get the value once and never update it! // From height: gsap.utils.random(10, 100, true), // Is already a function width: gsap.utils.random(0, 100) + "%", // not a fucntion // To height: () => gsap.utils.random(10, 100, true), // Better save and also convert it to a function width: () => gsap.utils.random(0, 100) + "%", // Convert to function Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQOGpa?editors=0010

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

hi @alexr8 maybe these 2 demos help 1 with draggable and 1 without https://codepen.io/GreenSock/pen/BaQXjWw?editors=0010 https://codepen.io/GreenSock/pen/RwKwLWK

Your video is around 15 seconds long, so I've split it up in three sections of each 5 seconds. First of the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. I've enabled GSDevTools for the animation, so we can first fully focus on the animation and create what we want to happen on scroll. I've modified your HTML and CSS, I've created a .trigger element and have everything stack right on top of each other with CSS (please disable all the JS to see what it looks like) I've taken this logic from my stacking cards post I encourage you to read through it, see below Then on the timeline I've put all the tweens, frist the video tweens to 5 seconds over a duration of 5 seconds, then the video tweens to 10 seconds over a duration of 5 seconds and at the same time the first card animates in from of screen, and them the same for the next card. This is probably not fully correct, but it shows you how you can create a timeline and have things happen at the same time. I've add some ScrollTrigger code but this is commented out, but you can enable it to see what this would do on scroll, but be sure to disable it again when you want to tweak the animation. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and check out this awesome tutorial how to work with ScrollTrigger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGJOQzq?editors=1010

You where almost there! I've move your timeline outside the loop and add the ScrollTrigger logic to the one timeline, then I've add all your tweens to that one timeline and let ScrollTrigger control it. Does that make sense? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBwLJXX?editors=1010

Hi, I think the main issue here is the fact that you're using the same element as the scroller (the document element). ScrollTrigger allows you to define a scroller which is the element where ScrollTrigger will look for the scroll position in order to update any Tween/Timeline you pass to it. From the ScrollTrigger docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object Here are a couple of demos that use a similar approach: https://codepen.io/GreenSock/pen/yLRQozy https://codepen.io/GreenSock/pen/OJBvBjB Hopefully this helps. Happy Tweening!

Although this didn't feel intuitive to me in this scenario, autoScroll did fix the issue. Thanks a lot!

Hi @Sikriti Dakua welcome to the forum! What is the part you're having trouble with? In your example you have different coloured sections which each there own text, but in the example you share all the text is all just stacked right on tof of each other. If that is what you want check out my card stacking tutorial of course swap out the cards for just text, but the logic should be the same. With CSS make all the text stack right on top of each other and then just animate them in and out one by one. Also keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. Hope it helps and happy tweening, but if you still need help be sure to post back here with what you've tried!

We have several mouse follow effect threads. Here are a couple that should point you in the right direction. Happy tweening.

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!

Hi, You can use Stackblitz to create a Nuxt demo and the GSAP Trial package in order to use the bonus plugins on Stackblitz: https://stackblitz.com/ https://www.npmjs.com/package/gsap-trial Here is a simple Nuxt demo: https://stackblitz.com/edit/nuxt-starter-vzsxyp?file=app.vue Hopefully this helps. Happy Tweening!

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!

Hi @CRE-ATE welcome to the forum! What for me works best is having the scale always between 0 and 1, where 0 is the minimum and 1 is the max it can have, setting scale beyond that will result in rendering bugs/issues. So in your case make the logo as big as you want it to be and then scale it .to() the value you want it. See demo below. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/PogLKwP?editors=0010

Yeah, that definitely seems like a Firefox rendering bug, totally unrelated to GSAP. My guess is that the renderer needs time to create the raster image for each SVG image. It likely ignores them completely (skips creating the raster) initially because they are display: none. But once it flips to display: block once, that raster image gets created and cached by Firefox, thus it can show it faster next time. Maybe try setting ALL of the images to display: block initially, just for 1 tick maybe so that the browser gets them all rasterized/cached. Rodrigo's suggestion to go with canvas is very good too.

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!

Thanks I was stuck on doing it with gsap.from and this is simpler 😅 Sometimes you are so deep into something and you don't see that the solution is simpler

That seems a little more verbose than necessary: // LONG width: () => gsap.utils.random(0, 20, true)() + "%" // SHORTER width: () => gsap.utils.random(0, 20) + "%"

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!

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

Hi, In your original demo you had both toggleActions and scrub in your ScrollTrigger configuration. It has to be one or the other, but definitely not both, since they pretty much don't work together. From the ScrollTrigger docs: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". I'd assume that Jack picked scrub over toggleActions, since your demo was scrubbing, but most definitely I can't read his mind! 😉 Hopefully this clear things up. Happy Twening!

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!

Yeah that definitely makes it more clear to me Thanks a lot for your help and explanations!

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!

No, that is why I said: Everything is hard coded right now, because that is the easiest way to demonstrate how the logic works. I have no idea how Svelt works, but I would get the elements as soon as they are ready and grap their heights and then add that to the array.

Hi @vexkiddy welcome to the forum! Am I missing something? I don't see any GSAP code! Again we would love to see what you can come up with that way we can better help you understand the tools, so please try to get something working then someone here will definitely point you in the right direction. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Hope it helps and happy tweening!

Thank you very much. This is exactly what I needed. Your help has solved my long-standing problem. Now I can achieve the effect I need. Now I just need to integrate it into the Vue framework. Thanks again. https://codepen.io/sw355498/pen/ExJGpQe

Hi, Jack is right, the issue is that in a Nuxt app you can access the runtime context with the useNuxtApp hook, but for using something from the app's context it has to be there first. In your demo I don't see any composable neither in the composables folder or in our package.json indicating that you installed a composable that abstracts GSAP's import statement: https://nuxt.com/docs/guide/going-further/nuxt-app https://nuxt.com/docs/guide/directory-structure/composables I think Jack's final suggestion is the best, just import GSAP in the files you need it and that should work. Happy Tweening!

Thanks, that's helpful. I went with the second suggestion and refactored my scroll effects to use the regular ScrollSmoother body transform. I was also able to use pinning to achieve the "pause" effect.

Hi @mukeshKumarSardiwal1997 and welcome to the GSAP Forums! Besides echoing the need for a minimal demo, there are a few things to note about your snippet. When using our useGSAP hook there is no need for manual cleanup of your GSAP/ScrollTrigger instances, the hook does that for you, so there is no need for this: useGSAP(() => { const tl = gsap.timeline.to(element, { scrollTrigger: {}, }); return () => { ScrollTrigger.revert(); }; }); Finally the onRefresh is a callback that works on the config object, but that can't be invoked directly like this: rwd.vars.scrollTrigger.onRefresh() You should be getting an error indicating that onRefresh is not a function. If you want to refresh a specific ScrollTrigger instance just do this: rwd.vars.scrollTrigger.refresh(); https://gsap.com/docs/v3/Plugins/ScrollTrigger/refresh() Hopefully this helps. Happy Tweening!

Aha! I forgot about the 'sticky' argument in this.update()

First of this is really important! ScrollTrigger can only be on the whole timeline or on a single gsap.to() (or .from()) tween. As soon as you define a timeline ScrollTrigger needs to control the whole timeline, it can't control individual tweens that are on a timeline, logically this is impossible. Next the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 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/MWRZego?editors=0010

Case solved Cause: Incorrect syntax. Change: ScrollTrigger.create({ target: ".services-content-heading-inner", start: "top top", end: "bottom bottom", markers: true }); To: gsap.fromTo('.services-content-heading-inner', { yPercent: 100 }, { yPercent: 0, autoAlpha: 1, duration: 2, ease: easeInOut, scrollTrigger: { trigger: '.services-content-heading-inner', start: "top top", end: "bottom bottom", markers: true } } ); Thank you!

I noticed several problems: You had faulty markup (missing closed </div> tags) You were defining a containerAnimation for the getScrollLookup(), but only some of the elements were in the containerAnimation. That is not valid. You were pinning a container element, but you didn't define that in the getScrollLookup() config. Is this more of what you wanted? https://codepen.io/GreenSock/pen/RwOEWYW?editors=0010

We need to keep this forum focused on GSAP questions. This also seems like the same question you asked here: I'd follow the advice in that thread and use the video @Rodrigo posted as a guide. If you have any GSAP related questions, we're happy to help. Best of luck on your project.

You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween. https://codepen.io/PointC/pen/gOyQWqY Hopefully that helps. Happy tweening.

Thanks for reporting back! Great news that the Lenis team worked fast on this and that everything is working as expected!

Hi @PapaDeBeau. Are you talking about with ScrollSmoother in particular? Or a non-ScrollSmoother-controlled page? It'd definitely increase your chances of getting a solid answer quickly if you provide a super minimal demo showing just a basic idea of what you want to do (even if it's not functional). And are you trying to navigate to an anchor onclick or when the page loads? ScrollSmoother has a very easy way to animate to a particular element: https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo() And if want to do that onload, @Cassie already had that in her demo. You could do: window.addEventListener("load", () => { let urlHash = window.location.href.split("#")[1], scrollElem = document.querySelector("#" + urlHash); if (scrollElem) { // if you've got a ScrollSmoother instance... smoother.scrollTo(scrollElem); // otherwise... gsap.to(window, { scrollTo: scrollElem }); // don't forget to load/register ScrollToPlugin } }); Does that help?

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

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

Hey @Nysh What worked for me, was setting the span to 'display: inline-block' and also setting a width to it. span.spacer { display: inline-block; width: 85px; } This way you also don't have to worry about how many empty characters you would have to fit inside the span. Just make sure, there is at least one. <span class="spacer">&nbsp;</span> https://codepen.io/akapowl/pen/daa45d6aff0c7605a759ff5bec41f2bb

Heya! Remember I said I was working on a Svelte project that would be needing some GSAP? Here are some of the barebones examples I made using GSAP and Svelte. onMount: https://svelte.dev/repl/94885eb0f90045da934ed5fd9f7fdb2a?version=3.29.0 Transition directive: https://svelte.dev/repl/1f70e16d637945fa8788fafafb481454?version=3.29.0 In/Out directives: https://svelte.dev/repl/000b2f192c204cd799dbb4f6d70a1c21?version=3.29.0 Action directive: https://svelte.dev/repl/eb2f99e9f3324e25af4eaada0389eed6?version=3.29.0 Animation directive: (TO-DO soon). Hope this helps.

+1 too [Edit] Solution: Use the Ease plugin with this great js library: bezier-easing.js: TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing.css.ease)}); (the default css's ease! @Mark) or specify any cubic-bezier: TweenLite.to(mc, 5, {x:600, ease:new Ease(BezierEasing(0.25, 0.1, 0.0, 1.0))}); Check also this: http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ And this, if you want directly the approximations of the principals cubic-bezier easing functions (in easing.js): https://gist.github.com/mckamey/3783009