Leaderboard

As the GSAP Helper already mentioned, without a minimal demo it is close to impossible to tell for sure, but my best guess would be that you are using some CSS fraework like probably tailwind, judging from the classes on the element you are animating with GSAP. If that is the case, here's what tailwind'stransitionclass will add via CSS https://tailwindcss.com/docs/transition-property transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; So my guess is that you have CSS transitions fighting with updates on the element done by GSAP. On properties of elements that you are going to tween on with GSAP, you should never have transitions applied. This older demo of mine illustrates why. https://codepen.io/akapowl/pen/JjmrMNy

I'm helping you, but if you're just looking for someone to build it for you could post in our Jobs & Freelance forum. Your current setup is not suitable for the effect you want, so you either have to live with the ScrollTrigger snap that snaps to certain points which works perfectly and does exactly what it suppose to to or rewrite your animation to work in steps and hook it up to the Observer plugin as per my latest example. This does exacly what you want and it layed out perfectly there are comments in the code, so just read through them and try to understand what it is doing. 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. ChatGPT is great, but it is not going to help you in the long run if you want to learn to be a developer, that means diving in to the code trying to understand things and getting your hands dirty. There is a lot of info here, so try taking it in and playing with the examples till you understand what it is doing. Then make your own version step by step and when you get stuck post back here with what you've tried, that way we can see your thought process and thus better help you understand the tools! https://codepen.io/mvaneijgen/pen/GRzrPPy I've got something working in your pen, now it is up to you to hook ik up the the Observer plugin. Again check the pen above. I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/oNVMoNJ?editors=0010

Hi @AmanVerma welcome to the forum! You can indeed use an array, but then you still need to tell it which item you want to use from the array. I've converted your x property to xPercent, seen that you want to use % values, and created a function from it from which we receive the current index of the element you want to animate. Then somewhere else we create an array with the values we want to use and then add that value when tweening your elements. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyrjQGr?editors=1010

Hi, Apparently this is related to SSR actually. This seems to work the way you intend: import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; if (typeof window !== 'undefined') { gsap.registerPlugin(ScrollTrigger); } export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(gsap); nuxtApp.provide('gsap', gsap); nuxtApp.provide('ScrollTrigger', ScrollTrigger); }); Hopefully this helps. Happy Tweening!

The timing could still be better, but I would create one timeline with a ScrollTrigger that controls your whole animation. I've write a guide for creating a card stacking animation which allows you to make any effect you want with the same setup, see: That is what I've implemented in your pen (it is a bit different to what you had, but you could easily fix it to be what you want). I've created some more elements in your setup, so that we have steady triggers that don't get moved with GSAP and add some CSS to have everything layed out correctly. And the only thing that is different is an extra ScrollTrigger that pins .extra-trigger so that the card animation gets pinned when it needs to. Again the timing could be better, but I hope this shows you how you could go about it. Please check the post I've linked it explains how everything works and 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/mdojxbN?editors=0010

I was looking at your pen and tried to modify some things, but I couldn't get it to work. What I was thinking is creating an animation that rotates in steps instead of 360deg, so create a tween for each step, so with each step animate the circle and all its points 60deg (360/ 6 items), but it seems your dots ar note on (or in the circle) https://codepen.io/mvaneijgen/pen/oNVMoNJ?editors=0010 Here is an example on how you could set things up to get things to do what you want. The workflow I should follow would be create an animation (don't worry about scroll at all), give all animations distinct tweens and places labels at points where you know in the future you want your tween to stop playing. Then when you're happy with all that you can just use the function in the below pen to tweenToLabel(). Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GRzrPPy?editors=0010

thanks for the help. this solved my problem Another option is to use .client in the file name to load the plugin on the client side only.

Check out my card stacking guide, it demonstrate how you could setup the basic structure to get all kinds of effects. Hope it helps and happy tweening! Side note, when using ScrollTrigger it is best to leave all the pinning to ScrollTrigger, don't set position: sticky in your CSS, will make things a lot easier! Could help myself, but please be sure to read the post it explains so much and with this knowlage you can build any card stacking effect you want! https://codepen.io/mvaneijgen/pen/VwRBNEb?editors=0010

I'm not sure what you're calling a 'callback' we have eventCallbacks in the docs, but that is more when a tween has finished or it starting onComplete, onStart https://gsap.com/docs/v3/GSAP/Tween/eventCallback()/ In my above pen I've used Function-based values which you can read more about here https://gsap.com/docs/v3/GSAP/gsap.to()/#function-based-values. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ explains a lot in a nice overview, but the docs is also a great resource in general. Personally I almost never use single gsap tweens, but I always gravitate to using a timeline. It is great in a pinch, but with a timeline you get so much more control, see below pen where a timeline has all these animations on it and ScrollTrigger controls that timeline on scrolling, some tweens start at the same time as other twens using the position parameter and other tweens wait for their turn, this al gets explained in the getting started guide, so be sure to check it out. If you need any further assistance, please show us what you've already tried and provide a minimal demo, so that we can dive directly in the code. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYaBqrm?editors=0010

Hello Rodrigo, thank you, that is a good starting point for me! Ben

Hi @Rodrigo, Thank you! CSS.escape() did the trick! 😍

Hi, This is not a GSAP related issue, if you inspect the console you'll see that the error stems from the way the selector is being passed to the querySelectorAll() method GSAP uses under the hood. Here you can find a couple of ways to get around this: https://stackoverflow.com/questions/73894096/react-useid-creates-invalid-selector Finally if I was you I'd drop that particular hook and find another way to add dynamic ids to my elements. Hopefully this helps Happy Tweening!

Thank you so much for the tutorial link.

A couple tutorials which may help. https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-2/ Other helpful info. https://www.motiontricks.com/cut-your-path-start-points-in-adobe-illustrator/ https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Happy tweening.

The trial isn't time-based. It's domain specific. So you can use the trial plugins for as long as you like, but only locally and on sites like codepen. https://gsap.com/resources/trial/ Hope that helps!

Hi @stemolti, And welcome to the GSAP forums! This page is a good starting point: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin/ Some inspiration here: https://codepen.io/collection/DYmKKD?grid_type=grid Note: The DrawSVG plugin isn't required to create the effect you're looking for, but it makes it really simple, as it does all the complex SVG stroke calculations for you, which is well worth it, IMO.

It depends on if you want the user to actually see a scrollbar and have access to it. If not, Observer is perfect. If you want to have that scrollbar, then personally I think that'd be a nightmare from a UX standpoint as I explained above. I'd be super ticked if the browser absolutely refused to let me use the scrollbar at the very top (as if I could only drag to a certain point and then it just stops?) But yeah, you could give Observer a shot. It's not really something we can build for you for free, but if you get stuck on a specific question, feel free to post back here with a minimal demo. Good luck!

Images inside an SVG need to be written a little differently. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image I've also switched this to a timeline with the ScrollTrigger attached to the timeline itself. https://codepen.io/PointC/pen/YzgWarj/652dec827d2ee326aee800655ad68620 Happy tweening.

To figure out what the issue is you need to focus on the issue. So removing irrelevant complexity is a vital part of what needs to happen. And unfortunately doing so is outside of the scope of what we're able to do for free here in these forums. If you'd like someone else to help remove that complexity for you please look into hiring someone for that job. At its core, what you're trying to do is trivial with ScrollTrigger: https://codepen.io/GreenSock/pen/PoGbogK

Hi lasercode, Thanks for the question. I'm not quite sure I understand when or how often this is necessary. Using the position parameter does exactly the same thing: tl.to(obj, 1, {x:200} .to(obj, 1, {y:200}, "+=2") // added 2 seconds later Sometimes people want some dead space between the last tween in a timeline ending and the onComplete callback firing, in which case a dummy tween like you are using works fine, but that's a pretty small use case. Could you provide a demo or more detailed explanation of when wait() is needed?