Leaderboard

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.

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!

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!

Thank you so much @PointC for your prompt and helpful response! Your suggestion to use yoyo makes perfect sense. I really appreciate your guidance and warm welcome to the forum. I'll be sure to implement your advice and continue exploring the exciting world of GSAP. Thanks again for your support! Best regards,

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!

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!

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

Hi, Sorry to hear about the issues but unfortunately if we can't see it on the demo there is not a lot we can do. That also means that there is something else in your setup that could be interfering with this. A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: Try setting will-change: transform on the CSS of your moving elements. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow) Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). Check if you have any CSS transitions to any of the elements you're animating with GSAP. Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" I hope this helps!

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

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!

Why do you have to change the token in dev mode? Surely reading it from the .env file should be adequate? Having to change this every time you want to make a commit is a massive headache. I've tried time and time again to use the gsap token from the env file and keep getting the same 'bad auth' error. I've tried setting it as a plain env variable, I've tried exporting it in the env file, I've tried prefixing it with NPM_CONFIG, nothing works. Nevermind, I didn't realise that you had to store the env variable in bash for it to be replaced in npmrc locally. Today I learned.

I complain about using pre-fab code as it's generally too much work to reverse-engineer and tweak but that's what I was doing right here. Came up with a straight CSS/jQuery solution in like 30 minutes versus the hours I was working on the previous code. Plus I can expand with GSAP if need be but works great just like this if anyone else is looking for the same thing (and can add in GSAP) *I'll add to this CodePen if I end up infusing some GSAP though to keep it relevant to the community https://codepen.io/ilrobinson/pen/ExJOvga

run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook. hope this helps