Leaderboard

Don't pin just the header pin the whole block and move the content inside. Same as the Stackblitz demo. Again everything in GSAP is an animation. Also always make sure you're loading the latest versions of the plugins, your demo loaded version 3.4.0 we're currently at 3.12.5! https://codepen.io/mvaneijgen/pen/MWRXJgM?editors=0010

If you want to overlap each little group of elements, I'd go with a child timeline for each group and add those to a parent. The parent then plays/reverses on click. Something like this. https://codepen.io/PointC/pen/jORKGax The overlap is on line 47. Each child timeline is 0.45 seconds in duration so I overlapped by 0.2 seconds (approximately half way), but set everything to your liking. The nice thing with a parent timeline is you can set a timeScale too if everything is too fast or slow for your needs. Happy tweening.

Hi there! Thanks for the kind words. Yeah, canvas is usually better for stuff with lots of elements. Pixi is a library that uses canvas so it makes stuff a little easier than using the browser API directly. Your example is pretty simple though so maybe you could just skip pixi and use canvas? Here's a canvas demo that may help https://codepen.io/ninja1pro/pen/abMMOar?editors=1010 And a pixi demo (this is using old GSAP syntax - but it's using pixi to add images so that's helpful) https://codepen.io/Koenie/pen/qBEJVeN The pixi docs are good too https://pixijs.com/8.x/guides/components/sprites

Hi @Fumiho welcome to the forum! 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. You have four "hello" blocks and you want them to move off screen, but have the last one stay. Your logic right now is move them all 100% of their width times the number of .project elements, this is what it is doing now, but your logic is they should all do that expect for the last one, so just subtracted one from your calculations. This is why removing ScrollTrigger is such a powerful move, now you can check just the animation if it is doing what you expect it to do and don't have to worry about what is causing your issue. What could be even more powerful when debugging is changing out projects.length for a hard coded value eg just try the hard coded value of "4" and see what that does, then try "3" and see what that does, this always helps me. Getting dynamic values is great for final code, but before you can get there you first have to know what it is you're trying to do and trying hard coded values probably results in you finding your own solutions. A few weeks back I've written the following post with a philosophy that really helps me debug any project I'm working on, give it a read. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/gOyKwqa?editors=0010

The demo you've shared is a way of working with ScrollTrigger, but personally I find it a hard way to wrap my head around what this is doing and how to modify it. What if you want to header to spin before it pins or move the white boxes in one by one from opacity: 0. That is why when starting out treating everything as an animation and worry about the scrolling part later. Yes, but a timeline can have a hundred animations on it. You could create a timeline + ScrollTrigger combo for each section, but if you just want things to happen in sequence you could easily just create one timeline with all the animations on it and one ScrollTrigger that controls that one timeline. I've written a guide how to create a card stacking effect and what is the logic behind it. I think reading this will help you understand how with this way you can easily modify what is happening on scroll and thus make any type of animation you want. Where the demo you've shared is just for that one effect and isn't really easily modified to do anything else. Also below a demo from the collection of that post that shows you with a timeline every 'section' can have it's own effect which is easily possible with this setup, but doesn't mean you need to use it, just to demonstrate. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abMbwYd

First a big thanks to GreenSock for creating this amazing animation platform! The more I use it the more impressed I get. I was wondering if there is a way to set autoKill to true as default for all my scrollTo animations? I've made some naive attempts with gsap.defaults, e.g. gsap.defaults({scrollTo:{autoKill:true}}) But I haven't managed to make it work.

Hello! I'm new to the forum and GSAP world. Few days in, browsing the documentation, forum and I was able to create this starry background. For the project I am using nextjs 14 with tailwind. The thing is that those simple animations I created uses a lot of CPU. At this code pen I have created a minimal demo so you can see what animations I am talking about. And this is a stackblitz of my project and the animations itself, all 3 that you see consumes like 20% of my 10th gen 8cores i5 processor. The animation is not laggy, I'd say it's pretty smooth actually. But I am worried that the application will be slow at one moment if I add more animations to it. I wanted to learn more and more about gsap while creating my portfolio. Note: For the animated stars I am using react icons. I found some related posts in the forum, that explaining the animation of the opacity of many objects could be indeed heavy in terms of CPU usage. I saw you suggest gsap in combination with PIXIjs. I just have hard time to find where exactly to start researching on that combination, a starting point would be greatly appreciated. Overall, any ideas for optimization and other usefull tips will be nice! Great community by the way, love your wild code pens!

Thank you so much for your help! @mvaneijgen You've truly made my day. I get it now. Also, I've just realized that all I need is a just sticky header. https://codepen.io/metal-joker/pen/yLrEVKQ

Hey, so you can achieve this with another loop within your current loop. https://codepen.io/GreenSock/pen/LYvrxwd?editors=1010 If that's not the correct order, the easiest way to fix that is to change the order of the items within the SVG, but you could also use array methods in JS to swop the order around. If you need to adjust the timing, you should look into the position parameter. Hope this helps!

Thanks Rodrigo, I mistakenly had the autoKill outside of the scrollTo, like this... //DON'T DO THIS// gsap.to(window, { duration: 1, scrollTo: '#anchor' + jumpChapter, autoKill: true }); //DON'T TO THIS//

I agree with you, you made is easy. Thank you.

Thank you so much, it really works for me!

You can achieve that with position sticky, you need to set top property as well for it to work. Check updated demo.

The ScrollTrigger has a direction property that's 1 if the last scroll was forward, and -1 if it was backward. Sorta like: let tl = gsap.timeline({ scrollTrigger: { scrub: true, ... } }); tl.to(...); tl.add(() => { console.log("direction", tl.scrollTrigger.direction); }); Notice I'm using add() for the callback just because it's a little simpler than call() which is only useful if you're passing parameters (uncommon). Is that what you're looking for? If you're not using a ScrollTrigger at all, there's also a helper function for tracking the direction of an animation: https://gsap.com/docs/v3/HelperFunctions/helpers/trackDirection

Just check the docs for the scroller property. scroller: "#your-scroller"

sure - just use the start/end properties motionPath: { align: sparklePath, path: sparklePath, alignOrigin: [0.5, -0.5], start: 1, end: 0 }, Happy tweening.

Hi, I believe the API hasn't changed over the years, just use the autoKill config: gsap.to(myDiv, { duration: 2, scrollTo: { y: 400, autoKill: true }, ease: "power2", }); Hopefully this helps. Happy Tweening!

Wow at first sight it looked more complicated than that. Thank you very much!

Looks like they just use a curved path in the SVG and scale the y from 0 → 1 on scroll. This should get you started. https://codepen.io/PointC/pen/abxYroe Happy tweening.

Also, you can easily force a render of a tween or timeline, and even improve runtime performance slightly by forcing all the tweens inside a timeline to initialize and grab their start/end values like this: // jump to the end and immediately back to the start animation.progress(1).progress(0);

Sure, that's one way you could do it. A few suggestions: Don't use "new": // BAD let childTl = new gsap.timeline({}); // GOOD let childTl = gsap.timeline(); This can be simplified: // OLD elements.forEach((element, index, array) => { element.style.display = "none"; }); // NEW gsap.set(elements, {display: "none"}); Since you're not using params anyway, just use .add() instead of .call(): // OLD childTl.call(() => { //... }, [], 1); // NEW childTl.add(() => { //... }, 1); I think you could greatly simplify the logic too: https://codepen.io/GreenSock/pen/YzMaBME?editors=0010 Like I said, there are many, many ways to tackle this. Hopefully this helps get you on your way to something that works well for you.

That looks like all React-related logic. You were adding a .from() animation to the timeline that targets usernameFormRef.current...but at the end of the previous tween you're calling setJoined() which triggers a re-render of the component, so that element that you were tweening with the from() tween no longer exists! It was replaced by React with something else or removed altogether. When you setJoined(), React takes a little time to actually create/render the new state, so you have to wait for React to finish that before you can actually animate what it creates. That's the perfect case for a useGSAP() with a dependencies Array - it'll get triggered as soon as a dependency changes and is rendered. You created your timeline instance outside of any context, therefore it won't get reverted or cleaned up properly. You don't really need to set a scope if you're never using any selector text, just so you know. It doesn't hurt anything, of course. It's just that it is only useful for selector text. Are you trying to do this?: https://stackblitz.com/edit/nextjs-7ex2g3?file=app%2Fcomponents%2FControls.tsx

Hey Paul! Well when it comes to react is better to react (pun not intended) to state changes in effect hooks. If you want to just toggle a single Tween/Timeline that's stored on a ref, a regular useEffect hook: const container = useRef(); const tl = useRef(); const [play, setPlay] = useState(false); useGSAP( () => { tl.current = gsap .timeline({ paused: true }) .to('.box', { x: 200 }) .to('.box', { rotation: 360 }) .reverse(); }, { scope: container, } ); useEffect(() => { tl.current.reversed(!play); }, [play]); Of course you can use a second useGSAP hook for this as well, it doesn't have to be a useEffect hook: useGSAP( () => { tl.current.reversed(!play); }, { dependencies: [play], } ); https://stackblitz.com/edit/stackblitz-starters-jd2dee Another option is to just pass the dependency to useGSAP and create individual Tweens/Timelines according to the state property value: const container = useRef(); const [play, setPlay] = useState(false); useGSAP( () => { if (!play) { gsap.to('.box', { x: 0, rotation: 0 }); } else { gsap.to('.box', { x: 200, rotation: 360 }); } }, { scope: container, dependencies: [play], } ); But that depends on the fact that you want to create a different Tween each time. https://stackblitz.com/edit/stackblitz-starters-9q1yxz Hopefully this clear things up. Let us know if you have other questions. Happy Tweening!

Think of it sorta like this: let tl = gsap.timeline({ scrollTrigger: {scrub: true, ...}}); tl.to(...); tl.add(() => { gsap.to(...); // non-scrubbed. Just a regular animation that's triggered at a certain spot in the timeline }); tl.to(...); tl.add(() => { //maybe you need to go to different values if it's going backwards... if (tl.scrollTrigger.direction === -1) { gsap.to(...); // backwards } else { gsap.to(...); // forwards } }); I hope that helps.