Leaderboard

This is when having MDN in your bookmarks is a great idea, no matter how many years you've been in development those resources always help 😉 https://developer.mozilla.org/en-US/docs/Web/API/Element/closest Happy Tweening!

Is the repo you provided in the original post up to date? I'll take a deeper look today.

Hi, I would try to avoid calling the refresh method recursively like that. There is a lot that goes on when that happens and it could lead to some bad UX if the user starts scrolling before the refresh method is called. If possible disable scrolling, wait a full second, allow scrolling again and call the refresh method then. Happy Tweening!

@Rodrigo Noted! MDN bookmarked! Thanks buddy!

Perfect! Yes, arrived at the same conclusion with the PIXI image scaling issue. I figured timelines were going to be the way so thanks for the example! https://codepen.io/neworigin/pen/NWVwBeJ

it appears that the scale is set relative to the native size of the images not the width and height that you set in pixi. I haven't used pixi in years so I'm just going off what I see. When loading the images the first image is loaded at 300 x 300 but the rest are 150 by 150 and and it seems to work. If you want to stagger different properties at different rates you need a tween for each property. in the demo below I created a timeline. https://codepen.io/snorkltv/pen/qBGVyYR?editors=0010 Hope this helps. if you're not familiar with timelines I'd strongly recommend my free beginner's course available via the link in my signature.

Carl, thanks so much for your reply--really helped! I dug more into the stagger to create some nice effects. One thing that's still unclear is how you stagger multiple properties independently. For example, I have the elements fading in but the colorizing also happens immediately. Possible to sequence so they fade in and then transition to color? Also not sure if it is a GSAP or PIXI issue, but when I set the initial scale to 0.5 and have GSAP scale up to 1.0 the elements get too large. Here is my updated pen: https://codepen.io/neworigin/pen/qBGVYPY

Hi, Mhhh.... I'm not sure how that can be done without some amount of custom logic. The thing is that you're moving the elements on the Y axis so that inevitably will create separation between them. The simplest way I can think to solve this is to move each section inside a wrapper that doesn't move. I forked your demo and made some changes to it: https://codepen.io/GreenSock/pen/YzbEvKo Hopefully this helps. Happy Tweening!

OMG! Y'all are amazing! Exactly what I wanted to do. Damn, took me days and took you all of a few minutes. Oh well, at least I am learning along the way lol. You all are rockstars and I appreciate this community so much. I will always be a member! Thank you!!

Additionally, if you have to wait 200-300 ms to do anything inside an effect or otherwise state related, it is worth looking at the tick() function.

@Rafal Potasz Not sure what solution you came up with, but I tried my hand and made something work: https://github.com/StevenStavrakis/svelte5-gsap-scrollsmoother (You'll have to install GSAP yourself because I get a 403 when trying to use the private npm registry for some reason) The meat of the code is here: <script lang="ts"> import "../app.css"; import { navigating } from "$app/stores"; import { ScrollSmoother } from "gsap/ScrollSmoother"; import {ScrollTrigger} from "gsap/ScrollTrigger"; import gsap from "gsap"; let { children } = $props(); gsap.registerPlugin(ScrollSmoother, ScrollTrigger); $effect(() => { // on first load, we need to create the smoother ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", }); }) $effect(() => { const smoother = ScrollSmoother.get(); if ($navigating === null) { // When navigating is null, that means we are no longer navigating; the page has been loaded ScrollSmoother.refresh(); } else { // when we start navigating, we scroll to the top otherwise we get some weird behavior if (!!smoother) { smoother.scrollTo(0) } } }); </script> <div class="flex" id="smooth-wrapper"> <div class="h-screen w-[200px] bg-slate-600 text-white p-8"> <h2 class="text-xl font-bold">Menu</h2> <a class="block" href="/">Home</a> <a class="block" href="/second-page">Second page</a> </div> <div class="w-full" > <div id="smooth-content"> {@render children()} </div> </div> </div> It makes use of effects and the `navigating` store. There is some strange behavior where the scroll position isn't reset when navigating pages, so I just force a scroll to the top of page. I'm sure there is a more elegant way to deal with it, but that is probably already covered in another post.

Hey Christina! I've rewritten this a little for you, https://codepen.io/GreenSock/pen/LYoOjLr?editors=0010 Some notes & further reading. Use transforms where possible instead of width/height/margin etc as it's better for performance (smoother animation) This solution is based on a technique called staggered staggers which @Carl from the wonderful creative coding club explains here https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ This thread covers more details about your particular use case, where you have images overlapping and z-index changes Hope this helps to give you a better starting point!

Hi, We've seen some issues with the view transitions implementation in NextJS as well, so there could be some broader problems with that specification. My recommendation would be to wait until the view transition is completed before creating the new ScrollTrigger instances and be sure to remove all the ScrollTrigger and GSAP instances when you're changing routes (cleanup), which can be done super easy with GSAP Context. Finally you might want to have a look at this video by @SteveS on last year's Svelte Summit: Happy Tweening!

Hey there @dzestis94 Your element has position: absolute so if you tween it down 100vh like you did, it will tween into your second section. It would need to be position: fixed for it to behave like what you probably expected as the outcome with the values you set for the path. Also, since you have set the end of all your ScrollTriggers to an absolute value of 100 via defaults, it would only scrub over the distance of 100px (from scroll-position 0 to 100) and that's probably not what you want either. I'm not sure if this is what you had in mind, but here's an example for how you could go about it. I kept the position of the element absolute, but changed the values of the path and the end of the ScrollTrigger instead, to match that absolute position of the element. https://codepen.io/akapowl/pen/qBYgzwP