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.

Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe

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.

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.

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?

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.

I use scrolltrigger and observer for an animation in my website, for mobile it created a problem of not pinning accurately so I used normalizescroll. It does work great but, when I scroll, it scrolls really fast. is there any solution for it?

Hi @stectix, Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption. I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo: https://github.com/rhernandog/next-gsap-bonus-yarn-vercel Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin): https://next-gsap-bonus-yarn-vercel.vercel.app/ I installed using the shockingly package since the plugins are the same: yarn add gsap@npm:@gsap/shockingly Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well. 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) + "%"

Example: CustomEase.create("in-out", "0.42,0,0.58,1") And then: gsap.to(".box", { ease: "in-out", ... });

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!

Hi @kevin.dev welcome to the forum! By default GSAP renders all the logic it needs on page load and because you're targeting the same element multiple times they all get the same start point en thus will not flow like you want to. What you can do is in your later tweens set immediateRender: false, so that they will wait until it is needed to calculate their animations. Personally for such a simple animation I would create one timeline with one ScrollTrigger, this is much easier to debug and maintain in the future. I've also tweaked the logic a bit. There is no need for a .fromTo(), the default scale of an element is 1, so setting .from() 0.75 will automatically scale to 1, if you use a timeline it will see in the next tween it is 1 and then animate .to() 0.75. Also if you want to have scale in both direction, you can just set scale. I've add two ScrollTrigger because from your question I get you want the pin to happen later then the scale up, so one handles the scale and the other the animation. In the animation I've add a pause twen for 1 second where the animation does nothing, to me this looks good, but be sure to tweak it if you want. Check out this tutorial how to work with ScrollTrigger if you want some more tips! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/eYobPKB?editors=0010

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

Yeah the issue could be that the fact that the boolean on your state is updated that doesn't necessarily means that the elements are rendered yet, especially when you run that ScrollTrigger.refresh() method. Any particular reason for that? I don't really see any reason for having that code in that component. Removing that single line seems to fix the issue. As far as I can tell there is no real need to have that refresh call there, since when that component is unmounted the useGSAP hook will revert everything inside of it, so there shouldn't be any reason to globally refresh ScrollTrigger, unless there are other ScrollTrigger instances in your parent component, but still if you need it you can add the revertOnUpdate option to the useGSAP hook to revert everything: useGSAP( () => { if (feedLoaded) { ScrollTrigger.refresh(); // rest of your code } }, { scope: curatorContainer, revertOnUpdate: true, dependencies: [feedLoaded], } ); Hopefully this helps. Happy Tweening!

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.

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

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!

Hi @Renson Ralph Bitara and welcome to the GSAP Forums! There is a lot of code in your demo and we don't have the time resources to comb through all that and find what the issues could be. After a quick glance I can see some issues in your code though. What is this actually doing? What's the purpose of this? window.addEventListener( "load", function (e) { init(); setInterval(function () { ScrollTrigger.refresh(); }, 100); }, false ); A setInterval will keep executing over and over. That doesn't look right to me, to be refreshing every ScrollTrigger instance every 100 milliseconds. I don't see the use of that particular code. Then you have this: gsap.fromTo( ".services-content-heading-inner", { yPercent: 100 }, { yPercent: 0, autoAlpha: 1, duration: 2, ease: easeInOut } ); ScrollTrigger.create({ target: ".services-content-heading-inner", start: "top top", end: "bottom bottom", markers: true }); You are creating an animation, then you create a ScrollTrigger instance, but what's the objective of that ScrollTrigger? What is actually controlling? For what I can see nothing really. Finally this: ScrollTrigger.create({ start: 0, end: "max", onUpdate: updateValues }); By default this ScrollTrigger instance will work with the window element and scroll position, so that means everytime the user scrolls that function will be called. Again I don't see the use of this. If you want to know if something is in the viewport, why not create a ScrollTrigger instance for that specific element that can tell you whether or not that element is in the viewport? I think you are overcomplicating things quite a bit and you should take a few steps back and go for simpler things first and then start adding more animations and complex stuff to your app. Finally I suggest you to take a look at our getting started guide: https://gsap.com/resources/get-started and a closer look to the ScrollTrigger docs and demos in order to get a better grasp of how ScrollTrigger works: https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Happy Tweening!

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.

This appears to be funky behavior caused by Vue forcing refs to be Proxy objects. So when you access ref.value, it isn't the real object at all! It's a Proxy which alters what "this" refers to inside method calls. I think it's terrible that Vue does this actually, but maybe they have good reason for it. 🤷‍♂️ From what I can tell, the solution would be to use a shallowRef() instead of ref(): https://stackblitz.com/edit/github-vfgcdf-g52l6b?file=app.vue Does that clear things up?

The beauty of GSAP is that you can build anything you like. In compression to other 'plugins' were it does one specific thing GSAP is more a tool box in which you can build anything you like! The only thing holding you back is your own creativity. Personally I would start with a simple thing and start building from there, make demo's (make A LOT of demo's) and post back here when you get stuck at specific parts. Keep in mind that you're sharing a site of a design agency with as far as I can see a team with over 10 people who all have their own skill and experience, so I would adjust your goals until you've got some more experience with the tools and then you'll see you can build anything you like! If you're stuck for inspiration you can check out the GSAP collection page on Codepen with so many demo's. Hope it helps and happy tweening! https://codepen.io/GreenSock/collections/

Or you could just put the CustomEase inside your onMounted function. The fundamental problem is that you're trying to register CustomEase when window/document don't exist yet.

Hi @m__shum and welcome to the GSAP Forums! Sorry to hear about the issues. I created a new Nuxt3 app here in my local machine and this is working without any issues: import gsap from "gsap"; import { CustomEase } from "gsap/CustomEase"; import { onMounted } from "vue"; if (typeof window !== "undefined") { gsap.registerPlugin(CustomEase); } const myEase = CustomEase.create('myEase', 'M0,0 C0.29,0 0.311,0.268 0.35,0.502 0.423,0.951 0.756,0.979 1,1 '); onMounted(() => { gsap.to("h1", { x:200, y: 200, ease: "myEase", duration: 2, }); }); I would recommend you to use the onMounted hook in your setup. We have this starter template on stackblitz that you can use as a reference: https://stackblitz.com/edit/nuxt-starter-aih1uf Hopefully this helps. Happy Tweening!

Hi there. I assume you're talking about embedding the GSAP site? If so - I'm afraid that's been added as a security measure to stop clickjacking https://www.keycdn.com/blog/x-frame-options

This is mostly a structure question and hasn't really to do with GSAP. I would abstract out what are toggle and what are expended elements and then expand all the elements that are connected to the toggle. As you see in your example you don't want to expand elements that have them self content that also should expand, so the HTML structure (and CSS) is really important in this case. I've given each element data-toggle and data-expand with their respective key (eg the name on the link). Right now it doesn't close, personally I don't like it when toggles close them selfs and I think it is bad UX. What If I want to compare content one and three? You could could add a data-close and find all the elements that should close if some data-toggle is clicked, but agin this isn't really a GSAP question, but again more JS logic and is beyond the scope of this forum. Still hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BaEqJOM?editors=1101

Thanks for the demo. In the future please add new information to new replies. Editing the first post repeatedly makes it difficult for us and others to follow the conversation. I don't know enough about swiper in react to help you with this, particularly how to reference the Swiper inside the onChange callback. However, this bare-bones example shows how to animate the active slide (change it's scale) and animate something inside it (rotate the number div) Hopefully you can find a way to apply something similar to your project https://codepen.io/snorkltv/pen/WNmzezX?editors=0011

Hi @Poylar, A component similar to Animate Presence is on our todo list, but we haven't been able to complete it just yet. One alternative is to use React Transition Group's Transition component as shown in this modal demo: https://stackblitz.com/edit/vitejs-vite-vlpbvk?file=src%2FModal.jsx Including React Transition Group does not imples a big impact on either KB size of your app or performance (as you can see in the demo), so is a good and reliable choice for that particular scenario. Hopefully this helps. Let us know if you have more questions. Happy Tweening!

Very sorry about that, @stijlmassi and @grizhlie, but Lenis is a completely different type of solution. Both ScrollSmoother and Lenis have pros and cons to their approaches. Our original goal was to leverage native scroll technology (no scrolljacking, just let the user drag the scrollbar wherever they want but have the content smoothly "catch up"). This means that EVERY way of scrolling gets smoothed (drag the scrollbar, press the arrow or spacebar keys, etc.) whereas I think Lenis is more about intercepting mouse wheel events, preventing them, and basically creating a tween of sorts that updates the scrollTop/scrollLeft value. But it won't smooth if you scroll in other ways, as mentioned earlier. And of course ScrollSmoother has a bunch of extra features like lag and speed effects, etc. I'm not criticizing Lenis at all - if it suits your needs, fantastic. Use it. Works great with GSAP/ScrollTrigger. But the fundamental nature of HOW things get scrolled is completely and radically different in ScrollSmoother. It's simply not possible, as far as I know, to completely solve the issues you mentioned while at the same time smoothing all of those inputs across the board and avoid scrolljacking. In a future major release, we very well may opt for a totally different approach but for now it's not really feasible (as far as I know) to "fix" what you mentioned because Safari is just absolutely terrible with various scroll-related bugs. We've spent many hundreds of hours trying to come up with the silver bullet workaround and the response we got from the Safari team was basically "nope, it's impossible". We'll definitely continue to look for ways to improve things in the coming months. If anyone has specific suggestions, we're all ears.

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?

Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js.

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 @GeS I have been using Locomotive on a few projects and recently switched them all over to the GSAP Scroll Trigger plugin. Once I understood how it all worked the change over was fairly easy. I can achieve the same effect, and more, with so much more control. And it's all in the same comfy GSAP ecosystem This is a very basic (and ugly) test I put together to create the Locomotive smooth scrolling effect for an entire web page using the new Scroll Trigger plugin. https://codepen.io/andystent/pen/XWXbMLo You can then combine this with something like Jack shared above to get the horizontal scrolling panel. I'm going to be doing this on a new project starting next week. Can't wait! https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d Good luck!

+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