Leaderboard

Don't worry everyone here has more experience and could have explained it better, it's your bad luck you got me 😂 🤣 have a good day

Hi, I'm not sure I follow exactly what you're trying to do, but as @Toso shows in his demo, the main issue here is the fact that you're using onToggle in a wrong way and that you're not doing proper cleanup of the ScrollTrigger instance that pins the element. Either use GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() Or use our new useGSAP hook to simplify things quite a bit: https://gsap.com/resources/React Here is a demo using useGSAP for that result: https://stackblitz.com/edit/stackblitz-starters-sz6hxj?description=A create-react-app project based on react and react-dom&file=src%2FApp.js&title=React Starter Hopefully this helps. Happy Tweening!

Hi, Because of this Happy Tweening!

Yeah, filters are notoriously bad for performance rendering-wise and that includes box-shadow. It has absolutely nothing to do with GSAP - it's just a browser thing. You can try setting will-change: transform on the affected elements, or you could maybe apply that shadow to the image artwork itself, like in Photoshop so that you're not forcing the browser to do all that work dynamically. The performance issue is almost surely NOT related to the helper function either.

Hey Innrev, did you get someone to build your project???

Yeah my bad, I was mixing water and oil here, you should use ScrollTrigger's config method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.config() Happy Tweening!

@Toso, I don't know what could have happened to me if you were not there 😁. Thanks a lot mate.

I've started with @Carl's course and couldn't be happier with it! Still revisited some courses from time to time. https://www.creativecodingclub.com/bundles/creative-coding-club if you want some samples check out their YouTube channel https://www.youtube.com/user/snorklTV/videos And also of course the GSAP channel https://www.youtube.com/c/GreenSockLearning/videos

🤔🤔 1 question per day that is the limit, I'm kidding, and here is your demo 🙏 you need to use the https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop its works on x and y axes, in the demo i only added it to one line of boxes so you can play around it and test the other config https://codepen.io/ahmed-attia/pen/MWxYbVr?editors=1010 also, it can be useful to check this topic on how to create a demo since you were adding the CDN inside your code

here you go, i just added ease:'none', and also now it's working on the img, not the .box so you don't have this overflow issue with the body https://codepen.io/ahmed-attia/pen/WNmboRx

A couple things - Your demo was missing the ScrollTrigger plugin. You're triggering all animations with the same class at the same time. You can loop through and create a trigger for each image like this https://codepen.io/PointC/pen/eYXmNge/06cc4d1f848523ff0a28fb6151664226 The problem with that is all the pictures in the same row animate at the same time. That may be what you want, but quite often you want to stagger the targets in each row. That's the perfect use case for batch. https://codepen.io/PointC/pen/vYPEOKM/34fbf1d6bf627411758c1cac157f0d20 More info about batch. https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch()/ Hopefully that helps. Happy tweening.

Thanks, yes makes sense. I have been working on some Nuxt3 page transitions and tracked this jump down to the effects=true, when I do a delayed scroll smoother initialisation. I will take this back into the there and see if this solves it Many thanks

That curve distributes the start times of the staggers. Where it's flat, more targets start at the same time. Professor @Carl has an excellent video about it here: Happy tweening.

You are just looking for a custom ease then! Something like M0,0 C0,0 0.3,0.5 0.3,0.5 0.312,0.5 0.5,0.5 0.5,0.5 0.5,0.5 0.7,0.5 0.7,0.5 0.7,0.5 1,1 1,1 but feel free to tweak it to your liking Your Stackblitz example crashed for me, so I updated my pen. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/xxBxMwz

Would love to see the none working versions, that way we can see your thought process and thus better help you understand the tools. Having them full height is even easier, now they all can be just barely offscreen with window.innerHeight. I've over complicated my example a bit just to show you can can create what ever tween you like for each card, my original example was with one tween and some fancy staggers, but some times it is just easier to write the animation you want for each card out by hand, just to get a feeling for what it is you want to happen. What I see a lot (and also do my self sometimes) is trying to optimise the code before it is even working, but then I remember you need to have working code before you can optimize! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/VwRwGdB?editors=0010

Solution turns out to be: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js'; Works in latest version of SvelteKit/vite.

Hi, I've just created a preloader with a handful of options(ease and other config options) to play. Just wanted to share this here. Play with it!! Thank you Cheers, Sven.