Leaderboard

Just as a general note, as soon as you think you're going to need more then one ScrollTrigger, there will be probably an easier way to do it with one. Timelines are the most powerful part of GSAP and is my opinion the best start point for any animation. So also in your case, you have two things you want to perfectly line up. If you put them on a timeline and use some clever position parameter they will be perfectly in sync. Then one ScrollTrigger that controls that timeline and your animation is hooked to the scroll bar of the visitor! 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/abxdWRP?editors=0010

This thread might be helpful: I made a helper function for creating a specialized ease for something like this: https://codepen.io/GreenSock/pen/zYXrJJw I hope that helps.

No need to post your question multiple times. It is even better to keep it in the same topic so everyone reading gets the context of what has already been asked. I've moved to DrawSVG, because I don't know the syntax of animating strokeDasharray, I just grap DrawSVG and know I don't have to fight browser bugs. But if you're set on using it, you sure can convert it back. I had to remove style="stroke-dashoffset:0; stroke-dasharray: 4807px, 4807px" from your path because this was throwing off the calculations and made sure your start and end point where in the center. Most importantly I've set ease: "none", so that the animation is linear all the way through. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjVGLgR?editors=1010

Seems correct to me. We've Stackblitz starter templates for all the major frameworks. See here the once for Vue and Nuxt.

Nope, this is left open intentionally. This way you can have a path that is off screen and is not visible at all, also multiple elements could have the same path, but be aligned to their own parents. Personally I've always used a path that that is also used as the alignment, but that is the beauty of GSAP, you can build what ever you like and because some smart people have thought of all possible solutions you ever want, you are never locked in to how the tool wants you to work. Hope it helps and happy tweening!

Hi @zidzad1 and welcome to the GSAP Forums! The issue here is merely a mathematical one, nothing messed up here. First, snap works based on percentage values between 0 and 1. So when you pass a value of 0.333 (1/3) to the snap value ScrollTrigger will snap it's progress to 0, 1 and every value that is a multiple of 0.333 in between, so it goes like this: 0 - 0.333 - 0.667 - 1, so that snaps to every slide without any issues. Your tween is 1 second so the left side of the first slide will be at the left of the screen at 0 seconds. The left side of the second slide will be at the left side of the screen at 0.333 seconds and so forth. Now when you add a delay the left side of the first slide will be at the left of the screen at 0.25 seconds, so there are 0.25 seconds where the first slide doesn't move. Then the slides start to move. The left side of the second slide will be at the left of the screen at around 0.583 seconds, the left side of the third slide will be at the left side of the screen at around 0.917 seconds 🤯. Finally the left side of the fourth slide will be at the left side of the screen at 1.25 seconds, so you have to feed the snap config an array with the percentages of each slide which are very different than 0.333 for each slide, see the problem? Here is a fork of your demo with a dynamic approach to this: https://codepen.io/GreenSock/pen/xxeZONE Hopefully this helps. Happy Tweening!

Thank you very much, Rodrigo! That is indeed what I was looking for.

The place it tweens to is actually not random at all in your case, but exactly what you tell it to. In your current case with feeding in an object of x:0 and y:0 to the convertCoordinates method what you will get in the end is the distance of the dragged element to your point element on both axis anytime you release - but then to your tween you're feeding those as absolute values, so it will always tween to that absolute point from the draggables origin - try getting very close to your point and you'll see that you'll end up very close to where the dragging originated. Or alternatively just log the values and compare them with the values of the transformMatrix on the element after the tween is done - logging values is a always a huge help with identifying your problems, btw. So I see two ways you could go about this: Keep the object at {x: 0, y: 0} but instead of using absolute values for your tween, use relative values like x: "+=" + point.x https://codepen.io/akapowl/pen/XWQXaLa Keep your tween at the absolute values, but instead feed an object of the current coordinates of the draggable object to the convertCoordinates method - something like {x: this.x, y: this.y} https://codepen.io/akapowl/pen/yLrezgX I will say, that since I never had the need for that method before myself, I can't give you much of a guarantee for any of the two ways to be the right way to go - and if something is inherently wrong with what I suggested, I'm sure someone with some more experience on that will pop in to help out. While version 2 to me feels like it's more in line with what the documentation says about the object you feed into the convertCoordinates method; ... after a bit of tinkering, it also feels like version 1 seems to work more reliable with quick drags and releases. In general though, both versions should work in your current case; but one might be better or worse suited for you when extending your usecase. I hope this will at least help in some way.

If I take a quick glance at your live site I see you're loading locomotive scroll, which is not part of the sandbox demo you've shared. That is why you make a minimal demo of your current setup, you already have a start point, great, so start introducing all the parts of your live site to the demo, so you can easily see when things break. 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. This is not something we normally do on this forum, but because you're new here I've forked the pen from our own @Carl you've shared and add locomotive scroll to it and indeed everything breaks! We can't support third party tools on this free forum, we like to scope questions to GSAP tools only. We do however have our own smooth scroll library aptly named ScrollSmoother, you'll see this works out of the box with all the GSAP tools, but is only available for our club members. So you'll have to ask your self "how much is smooth scrolling worth for my project?", are you going to spend your free time debugging locomotive scroll with ScrollTrigger or become a member? I know what I would choose, but I can't judge that for you. In the past there where some to topic about locomotive scroll and ScrollTrigger, but since we've created our own plugin the advice use that this will work out of the box and will be much easier. https://codepen.io/mvaneijgen/pen/poBgrxy?editors=1010

I've restructured your pen, mainly HTML and CSS what I would do is create an <img> element that is bigger than the current container it is in and then move the element minus on the x axis (I think you want it to move that way right) Always turn on makers so that you can see what it is doing. I've set your start and end marks to be left center and end right center, but be sure to tweak them to your liking. Still the images need to be bigger then how much you want to move them, that is not setup perfectly here. I've also moved the <img> instead of the container. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWRKvry?editors=0010

Hi @abernal96 welcome to the forum! Great illustration and great demo! Sharing this makes helping you a breeze, great work! A small note to start, be sure if you fork something to always update GSAP to the latest versions. In your example you'd loaded version 3.9.1 and we are currently at version 3.12.5, so if there were any bugs they would be fixed using the newest version! If you open the JS panel you get a search box and this way you can load most of the popular plugins including all GSAP plugins (even the paid once!) and below here a codepen which just always loads the latest versions of all the plugins, which I personally use to start a new project. https://codepen.io/GreenSock/pen/aYYOdN This helped me understand snap, so maybe it also does you. Snap snaps to a value between 0 and 1, where 0 is the start of the ScrollTrigger and 1 the end. As you have done you can do some fancy calculations, but it is maybe also good to understand what it is doing. You can feed an array to the snap value and this helped me understand it. You want to snap to the start, end and the middle, so if you feed it an array like so [0, 0.5, 1] it would do that. If you would log the value you set now 1 / (videoSections.length - 1) you will see that this gives you the value 0.5, which means it will snap to each value with increments of 0.5, so that would also be 0, 0.5 and 1. If you want to also snap the the initial slide on page load you'll need to create another ScrollTrigger which has the trigger that starts on the top of the browser and then has the end trigger of the top of your .horizontal_container then you can set a snap value of snap: 1, which will make it snap to the end of the ScrollTrigger you've created. 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/oNObWKN?editors=0010

Hello Sir , Thank you for the reply and the tips 😊. I had very few knowledge on gsap timeline and I wasn't very sure when and where to use that . Thanks to you now I will read the docs and try to get more info on it . The comments you have provided are very helpful . I am very much new to gsap and I was hard stuck on this . Thanks to you now I will continue with my project . Hope you have an amazing day sir 😊

By default, the normalizeScroll() feature targets the main window/body scroller, but it looks like you're using something different. So set that as the target in your normalizeScroll() call: ScrollTrigger.normalizeScroll({ allowNestedScroll: true, target: ".side-menu" }); https://codepen.io/GreenSock/pen/GRLpRQx?editors=0010 Is that what you're looking for?

Yeah, that's because the position is affected only after the playhead isn't at 0. So for example, if you reverse the tween and the playhead goes all the way back to the very beginning and beyond, the element would go back to the original position (before the motionPath tween affected it). You can easily work around that like this: https://codepen.io/GreenSock/pen/ZEZQQpQ?editors=0010 Just use an onRefresh to force the playhead to be slightly past the very start if it's at 0. And I set invalidateOnRefresh so that the path gets re-calculated since resizing the window would make the SVG change size. Is that better?

Hi, The article Mitchel points to has all the information on the particular subject: https://gsap.com/resources/React Also @Cassie created this video explaining all the ins and outs of the hook, you should really see it: Finally here are a couple of demos that use ScrollTrigger in React apps: https://stackblitz.com/edit/react-cxv92j https://stackblitz.com/edit/vitejs-vite-d73sck Hopefully this helps. Happy Tweening!

Hi, The issue with the scrolling lagging is completely related to Lenis, not a lot we can do there sorry. As for the event handler, keep in mind that by default most event listeners are not passive except for some events. The wheel event is one of them: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive It seems that you'll have to roll your own custom logic in this one since apparently Observer can't make all of this work in Firefox at least. This seems to work as expected in Chrome and Firefox on Ubuntu 20 & 22: zoomContainer.addEventListener( "wheel", (e) => { if (e.ctrlKey) { e.preventDefault(); } }, { passive: false } ); For anyone stumbling upon this thread because of a weird issue in Firefox with Lenis, please see and follow this issue in Lenis' Github: https://github.com/darkroomengineering/lenis/issues/311 Hopefully this helps. Happy Tweening!

Hi, @PointC has you covered: https://codepen.io/PointC/pen/YRzRyM That should provide a solid starting point. Happy Tweening!

Hi, Just a matter of making the right calculations. Keep in mind that when dragging to the left the numbers are negative, so the max number in terms of the bounds is zero. For the minimum number is the natura width of the element minus the scroll width: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth Here is a fork of your demo (thanks for creating such a simple demo, we love those around here 🥳) https://codepen.io/GreenSock/pen/VwNZaxQ Hopefully this helps. Happy Tweening!

Absolutely! That should be pretty simple: trigger: ".start-div", start: "top top", endTrigger: ".end-div", end: "bottom bottom", Is that what you're looking for? You don't even need a timeline: https://codepen.io/GreenSock/pen/XWzNMeW

FYI yes! see here:

GSAP is not going to help you out much here. You have to find the angle from the absolute transform origin to the mouse for every thing you want to rotate. var dx = mouse.x - origin.x; var dy = mouse.y - origin.y; var transform = "rotate(" + Math.atan2(dy, dx) + "rad)"; element.style.transform = transform; So something like this, although I'd probably use canvas for this many elements.