Leaderboard

Your response is impeccable. Don't worry about any sense of honor with me. Moreover, I completely understand the necessity and normality of earning money for the work done. It's the very essence of evolution that comes with rewards. Your tools are excellent, so as soon as my finances allow, after getting my first clients, I'll purchase the license. Thank you.

Short answer: Just force the playhead to the end and then back to the beginning like this: tl.progress(1).progress(0); That basically pre-renders everything. The problem was that you're doing a stagger on a from() tween, thus technically the start of the sub-tweens are offset and you're seeing those start in a staggered fashion. GSDevTools employs a trick to force the playhead to the end as an optimization.

Hi @Ken Flores. Seamless loops are actually a lot more tricky than you might expect logic-wise (unrelated to GSAP). That's why we made a helper function for that: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Here's what I think you were trying to do, but this is much more efficient: https://codepen.io/GreenSock/pen/XWQmoMp?editors=0010 Does that help? Thanks for being a Club GSAP member! 💚

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!

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!

Yeah, I think the logic @Carl uses will help you for your animation. Instead of reversing the animation just have a second part of the animation that animates it away again to its original position and then call .restart() when you want to replay it. Great course, highly recommend just pick a topic that intrest you most and then just watch a video a day.

You can still report the bug - we're just not the people to report it to! https://webkit.org/reporting-bugs/ I wouldn't hold your breath though, SVG is a *very* slow layer of the web ecosystem, it's rare for stuff to get fixed, updated or worked on.

@GreenSock THIS IS PERFECT THANK YOU!!!! 😭🥰

There is no first scroll or second scroll in ScrollTrigger. The animation you make gets hooked to the scrollbar of the browser, so if you scroll 10% the animation is also at 10% of its progress. If you don't want that ScrollTrigger will not be the right fit for your project. If you want to do specific things like that you'll have to move your project to the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/. Here an example that scrolls to labels on a timeline, you can scroll as much as you like, but it only goes to the next label in the timeline and until the animation is done will it go to the next label. https://codepen.io/mvaneijgen/pen/GRzrPPy And here an example that mixes normal scroll with the Observer plugin https://codepen.io/GreenSock/pen/oNQPLqJ

@Toso I just spent 30 minutes toggling that dark mode button on and off in awe! Such a fun transition! any chance you have something similar to share? It does seem to do what I'm lookin for. I have no idea why the demo isn't working, I just tried that link in incognito to double check and it's working on my end. Also, I was actually using the useGSAP hook on my project, however I couldn't make it work on codesandbox for some reason. Either way, thanks for the help! Even just knowing you ended up going on a different approach helps a lot!

The behaviour you describe seems to be happening in the pen you linked. If I just scroll the page scrolls, when I'm over the zoomContainer and hold ctrl it zooms. When I then release and scroll again the page scrolls. Tested on macOS Safari and Chrome

Hi, You can use the callbacks system ScrollTrigger has, more specifically onLeave and onEnterBack: onLeave Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). onEnterBack Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). So you can add the class in the onLeave callback and remove it on the onEnterBack callback, if you want to remove it of course. Hopefully this helps. Happy Tweening!

Hi, Here is a simple demo using GSAP MatchMedia with the useGSAP hook: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx&terminal=dev Hopefully this helps. Happy Tweening!

Hi, In no case this means that React can't work with GSAP, you can use GSAP in react environments without any issues. The problem stems from a shortcoming (and this is 100% a personal opinion and in no case a reflection of the thoughts of GreenSock on the subject) in the way React was created, since at no point a native animation solution was considered. By this I don't mean React creating an animation library or anything like that is about controlling animations, that's why developers have to resort to external libraries and packages to handle some aspects of the animations (like animate before unmounting, right after mounting, control render states, etc.), which sometimes feels quite hacky and convoluted. On the other hand Vue did considered animations and added them to it's core: https://vuejs.org/guide/built-ins/transition.html Using the JS hooks in Vue is super simple and reduces the hassle you have to go through in order to create animations and you don't need any external libraries to make it work. Of course Nuxt abstracts this even more making something simple even simpler: https://nuxt.com/docs/getting-started/transitions If you're still on the fence of which framework to choose, I'd strongly recommend you to go the Vue/Nuxt route (again 100% personal opinion), they general approach is simpler and cleaner. Directives are far more intuitive IMHO than JSX, you can scope your styles on an easier way with Vue, they keep JS out of the HTML and Vue is compatible with the web component API: https://developer.mozilla.org/en-US/docs/Web/API/Web_components I haven't dig on Svelte but I heard nothing but great things about it. I know that @Dipscom uses it on his projects and that's good enough for me. Also @SteveS one of our superstars here in the forums made a nice presentation for the Svelte summit that you can find here: Finally demos, because those speak more than words. Page Transitions in Next: https://stackblitz.com/edit/nextjs-13cw4u Page Transitions in Nuxt: https://stackblitz.com/edit/nuxt-starter-bthjlg Hopefully this helps. If you have more questions feel free to ask. Happy Tweening!

hi @Ev1lMush unfortunately, the demo is not loading but i would recommend using only scrollTrigger to do all your scroll-related animations for you, scrollControls was killing me also, and I didn't find a clear fix for making them both work together in most cases drei is great but still not enough to use it alone for everything something like where i was trying to make drei scroll and scrolltrigger work together but in the end, i only used scrolltrigger maybe its different in your case idk what you are building https://garden-self.vercel.app/ (Hit a refresh if it doesn't work it was a demo for testing so it's a mess and dusty) I am not R3F expert so keep looking for a solution that suits you also since you are using react you can check the new useGSAP() its a replacement for useEffect and useLayouteffect https://gsap.com/resources/React#usegsap-hook- and here are some templates you can fork one , for me its easier to work with React on stackblitz https://stackblitz.com/@GreenSockLearning/collections

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. Below your pen with ScrollTrigger removed and GSDevTools installed, so you can really focus on the animation an make sure it is doing what you want it to do I've just written a guide how to create any cards stacking effect with GSAP (and ScrollTrigger), the most important point is start with all your elements in a known position and start animating from there. In your demo on line 40 you tell it to animate '-=0.3' seconds before the start of the timeline, that seems weird to me. The start is zero, but you tell it the start is -0.3. The property autoAlpha sets the visibility, so no need to also set it in your tween. To make it simple on your self I would create just one timeline and add all the tweens to there, when you think everything is working you can always optimise it later and split it out to separate timelines. https://codepen.io/mvaneijgen/pen/WNWQEWx?editors=0010 The pen below might really help you in your setup, from my post above. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWxgQbV

The syntax of the media you're trying to match is the same as the CSS spec, so you need to make sure you write it like you would write it in CSS. The useGSAP() is a new plugin special made for use in React, so if you use React or its other frame works, check out our Stackblitz starter templates, React (please read this article!), Next. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOyaxQV?editors=0010