Leaderboard

We usually don't code a custom solution for you in these forums, but I knew how to do this and figured it'd be fun challenge, so here you go: https://codepen.io/GreenSock/pen/PogzKNO?editors=0010 Is that what you're looking for?

Hi Eden, Yes, by default the timeline will repeat using the random values it finds on its first play, unless you add repeatRefresh=true. I think this will keep your rough ease looking random on each repeat, too. https://codepen.io/geedix/pen/zYXBNvL

When you use function based values and call ScrollTrigger.refresh() these values get recalculated. If you don't use function based values, but use functions in your values, ScrollTrigger will think they do not update and keeps the values it has calculated on initial load. I've also moved the item.getBoundingClientRect() in to the value, to be sure it recalculates the values. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ZEZOOEv?editors=0010

The endTrigger is an optional property, the trigger element is normally also the end trigger just with different values set in the end: property. But as you can see GSAP has thought of everything, so if you want a different start trigger and a different end trigger, this is all possible with the tools provided. But it is defeantly not required. Sounds boring, but I really recommend just reading the docs once. There is just so much info in there that you didnt think you even needed https://gsap.com/docs/v3/Plugins/ScrollTrigger/

Hi, I think the issue here stems from the approach you're using. Why not use a single GSAP Timeline to control all your accordion and then tie that to a ScrollTrigger? I don't have time to make everything for you but this is the timeline at least: https://codepen.io/GreenSock/pen/GRLZbYr Hopefully this helps. Happy Tweening!

Hi, Since you have an array with all the sections that you loop trough to create the ScrollTrigger instances, you can store those ScrollTrigger instances in another array, in order to loop through and refresh just those: const stArray = []; sections.forEach(() => { navLinks.forEach((item, index) => { const rect = item.getBoundingClientRect(); stArray.push(ScrollTrigger.create({ trigger: section, start: `top ${rect.y}`, end: `bottom ${rect.y + rect.height}`, scrub: 1, toggleClass: { targets: item, className: "text-black" }, markers: true })); }); }); Then in your code: $("ul li.dropdown").on("click", function () { $(this).toggleClass("show-dropdown-menu"); stArray.forEach((st) => st.refresh()); }); Happy Tweening!

There is no half adding a class to an element, it either has the class or it doesn't. Adding classes also seems a bit convoluted to me, just change the scale property directly in the tween. I don't know how React wants things, so this seemed simpler to me. You can just keep calling a tween and feed it a new number. If in your setup you refresh a tween or have multiple that need to wait to get their values, check out the JS comments I've placed. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ExJybPp?editors=0010

I'm not 100% sure I understand what you're asking but for what I can infer you're trying to create an horizontal pin, so the cards that are moving horizontally pause at some point while scrubbing? If so, that can't be done, horizontal pinning is not supported when using vertical scrolling, you are scrolling in the Y axis but you want to pin on the X axis. ScrollTrigger simply can't manage that. The demo pins an element vertically, inside that element a bunch of panels are animating on the X axis but the scroll is still vertical (on the Y axis). In order to mimic horizontal pinning you have to pause that animation on the X axis, the one that moves the cards. Here is the previous demo using ScrollTrigger: https://codepen.io/GreenSock/pen/oNOLGrJ Happy Tweening!

Try adding svg * { will-change: transform; } or at least to the elements that that have their transforms goings to change. Is it choppy in Codepen or also in you live site? Because if It watch this in the debug view in codepen on Safari Version 17.2.1 it is perfectly smooth. Some side notes TimelineMax hasn't been used since version 2 and we're currently at version 3.12.5! https://gsap.com/resources/3-migration/ Instead of rolling your own break points in Javascript check out https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ has a lot of niceties build in when working with GSAP You can add all your timelines in to a main timeline and then you can call mainTL.play() or .pause() If the text in the image is not going to change anymore, I would look in to rendering out .png (or maybe even .gif) and see how much bigger or smaller they are then your SVG, this might also improve performance, if that is still an issue. Hope it helps and happy tweening!

I figured it out. It has to do with the order that things get refreshed. ScrollSmoother forces ScrollTrigger.sort() to get called which orders things by the ScrollTrigger's start value which is a decimal for any ScrollTriggers with containerAnimations. So all you really need to do to fix it in the current version is to explicitly set a lower refreshPriority on the containerAnimation ones: https://codepen.io/GreenSock/pen/JjVKrEO?editors=0010 (I set refreshPriority: -1) It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Does that clear things up for you?

I should have paid more attention in math class 🤯

No, that's not a bug because in your non-working example, you're executing the random function ONCE and baking that into the string which is what's used in the tween. Think of it like this: // bad x: "+=10.2142" // the result of "+=" + gsap.utils.random(...) // good x: () => gsap.utils.random(...) // the randomizing function gets called every refresh It's just a logic/JavaScript thing, unrelated to GSAP.

This is certainly possible, but is going to require a lot of math to get it perfect. A while back I came across Math.atan2() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2 which gets you an angle from a center point, so I feel like this is certainly possible, but I think there is nothing build in to GSAP that is going to figure this out for you, that is why I came to that solution, given a fairly simple path and autoRotate gets you 90% there. You can certainly spend days getting that 10%, but how much is that worth? Seems like a fun challenge though, but it is beyond the scope of the help we can provide on these free forums. I'm going to mark the topic, so maybe if someone else has a brilliant idea they'll post it here. Veel geluk met het project!

Then you don't want to reverse. You have to view a tween as a video and you scrub through a video progress bar in reverse it will do the exact same thing as it would do playing, but in reverse, eg in a Youtube video people don't suddenly walk forward when scrubbing the video backwards. In your case you just want two tweens that call each other when done, I've not implemented the delays, but you could easily wrap the .restart() in a gsap.delayedCall() https://gsap.com/docs/v3/GSAP/gsap.delayedCall()/ with the delays you want. I've never seen a stagger of -0.1, when using more complex staggers I highly recommend breaking out the object and set their properties accordantly, eg here set from: "end", because you want to last item to play first https://gsap.com/resources/getting-started/Staggers Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNWxoVo?editors=0010

Here is your pen with GSDevTools installed. Now you literally get a progress bar like you get on a video. A timeline does the exact same thing in reverse, but backwards. If you want two tweens to start at the same time playing forward and playing backwards you don't want to put them on a timeline you just want two separate tweens on which you call .play() or .reverse() and they will do what you want. Again to emphasise, a timeline is as creating a video and after the video is "rendered" nothing will change in the video (you of course still can change things, because we're working with code here, but as a general rule of thumb, nothing will) https://codepen.io/mvaneijgen/pen/BaEzQZX?editors=0010

... works a dream! Thanks again to you both, not only for your generous work on solutions, but also for the informative insights on working with GSAP!

It is probably scroll-behavior: smooth; which gets added by Bootstrap to the html, if that is not the issue a minimal demo would be needed, to help you debug.

My issue was resolved. Thank you again, for helping me out

Check out this post I've made. It shows you how you could setup your CSS to create any card stacking effect you want with GSAP. After reading the post you probably want to pay special attention to this demo from the post . Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/MWxgQbV