ApplePieGiraffe

@GreenSock That's perfect! 🤩 Thanks so much for your help! 😊

@GreenSock Hey, do you mind if I ask for your help with one more thing? I edited the code above to change the height of the box at a certain screen size, and I realized that some of the values for the animation need to be recalculated then (otherwise the circles don't move all the way to the top of the box). I tried killing and re-creating the timeline when the window is resized, but that's giving me some funky results, and I'm not sure why. CodePen How can I recalculate the values for the animation and play it again when I need to (like when the screen is resized)?

@GreenSock Wow, that looks really nice and works great, thank you! ❤️

Hi, Blake, thanks for that! I'm not sure I understand how to do that with tweenFromTo(). I currently have something similar to... this I'd like to have something like... this instead Except I don't want to simply copy-and-paste the animation code for each .circle element in order to set a different start progress point for it if I can avoid that. Is there a more concise way of doing this? 🙂

Hi, sorry for my late reply! What I meant was that I would like all of my animations to start playing at the same time, but at different points in their animation progress (e.g., one at 50%, another at 75%, etc.). GSAP's staggers adds a delay between when each animation begins to play (which is not what I want because I want all of the animations to start playing at the same time), and I'm not sure how to accomplish what I want using a functional value for the delay property (I tried returning negative values for the delay property to see if that would start any animations in the middle of its progress, but that didn't seem to do anything). Is there some way I can use either of those methods to accomplish this?

Hi, I'm animating a bunch of elements with the class name circle in a timeline using the to() method, like so: let tl = gsap.timeline() tl.to('.circle', { duration: 1.5, repeat: -1, y: 100, }, 0) At the moment, all of the animations have the same progress point at which they begin (0). I would like to specify a different start progress point for each element animated with the tween shown above. So I could start the animation of the first circle element at 50% progress, the next at 75% progress, or whatever, etc. How can I do this when animating a collection of elements with to()?

Hey, kvncnls! (I think I remember seeing you on Frontend Mentor, as well! 😆) I actually ended up storing my animations in a separate file and then importing them into App.svelte, which is where I set up ScrollTrigger and smooth-scrollbar. That way, the script tag for App.svelte wouldn't be like a million lines long. 😅 (Here's the repo, if you want to check it out.) This was first time using Svelte and ScrollTrigger together, so there might be a better way to do things, but this worked out okay for this project, I guess. 🙂

Oh, I see—I was creating my timelines in separate file, anyways, then simply importing and instantiating them in different components in my project. For now, I'm just importing and instantiating them in App.svelte instead, and (along with including the rest of the settings and putting things in the correct order) everything's working fine. 👍 @Dipscom, @akapowl - Thank you both for your help!

Thank you very much, @akapowl! The REPL you made works perfectly, so I implemented all of those tips in my project and things are working great, now! As @Dipscom mentioned, I do have to initialize my animations in App.svelte after setting up ScrollTrigger and smooth-scrollbar in order for the animations to play (which, yes, isn't ideal, but I'm just happy that things are working). 😅 Just to be clear—do I only have to setpinType: transform if I'm using the body as the smooth-scrollbar container? If I decide to switch to a container within the body for the scroll container instead, should I leave it as pinType: fixed?

Thanks for the tip! 😀 I gave initializing the scroll animations in App.svelte (after setting up smooth-scrollbar and .scrollerProxy()) a try, and while nothing much seemed to change in my project, the scroll animation plays in the REPL demo that I linked to! The only problem I see now is that the pinning that was set up with ScrollTrigger doesn't work (and the animation seems to be a tad bit choppy).

Hey, @Dipscom! Do you have any experience with combining ScrollTrigger and a smooth-scrolling library (such as smooth-scrollbar) in Svelte? I seem to be able to get the two to work just fine independently, but I'm having trouble bringing them together via ScrollTrigger's .scrollerProxy() method. The animations created with ScrollTrigger stop working after enabling smooth-scrollbar, and using .scrollerProxy() doesn't change anything. I've created a small demo in this Svelte REPL as an example of this. It's structure is very much like that of my project—I'm managing ScrollTrigger animations in their respective component files while trying to add smooth-scrollbar to App.svelte. The results are very much the same, too. The ScrollTrigger animations should work normally if you comment out the smooth-scrollbar code, save, and refresh the page. I'd be grateful if you took a look! Here's my original forum post for this, BTW.

Thank you, @Cassie! I'll be sure to take a look at that! 🙂

I'm using Svelte, GSAP, ScrollTrigger, and smooth-scrollbar in my website. Everything works fine until I try to add smooth-scrollbar and use the .scrollerProxy() method to make sure the ScrollTrigger animations still work. smooth-scrollbar seems to be okay (e.g., smooth scrolling works and the custom scrollbar is visible), but none of the animations play anymore. I thought the reason for this was the order in which I was initializing smooth-scrollbar and registering ScrollTrigger and initializing my timelines, but I've tried all sorts of combinations of those things (keeping in mind that I can't do things like initialize smooth-scrollbar until the components of my page are mounted by Svelte) and nothing seems to work. Has anybody else used ScrollTrigger and .scrollerProxy() in Svelte? Is there a certain way of doing things to ensure that they work? Here's a demo in a Svelte REPL.