Leaderboard

Hi @Stasicus welcome to the forum! Check out this awesome tutorial by our own @Carl better than this I can't explain how it works. Hope it helps and happy tweening!

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.

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

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

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.

I've just build something similar, check it out! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNWxPGV?editors=0010

I think something like this is what you're looking for. I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/bGJxXXG?editors=0010 For React, if you have set up the useGSAP() hook correctly and your elements have the same classes and CSS everything should just be a drop in replacement from Codepen. Be suer to check out the following if you need some more guidance. If you're stuck we also have Stackblitz starter templates for all the major frameworks. Again hope it helps and happy tweening!

Hey! Just parachuting in here, but maybe we're focusing on the solution you've attempted instead of the problem you're trying to solve? This made me remember something that may be useful? Without using a motion path, another common animation pattern for curved motion is to animate the x and y values with different eases to get a curve. Check out this demo - https://codepen.io/snorkltv/pen/dyoxXaQ This is useful because it's not trying to animate the element through set coordinates, it's more dynamic. There's a start and end and it's the ease that's handling time rather than position to make the path curved I needed to do a curved flip animation a while back and found out that you can separate out x and y and animate them individually with customProps. (undocumented right now because animating the properties in a flip animation is quite a rare need due to it's dynamic/transitionary nature) but if you want a curved path - it allows you to separate out the properties in the flip animation and ease them individually. https://codepen.io/GreenSock/pen/bGjXGeX/cc6a1577ab5d5ea8ab0722dc407a7929?editors=0010 Maybe that will achieve the "scenic taxi route" for you?

Thanks for providing the demo, it made my approach much easier than starting completely from scratch. This is a cool effect and as stated earlier, I'd probably try to use SVG for this 99% of the time. However, I was intrigued about making a more flexible clipPath approach. In the demo below I animate the y value of each bar independently using a stagger. https://codepen.io/snorkltv/pen/rNbrEra?editors=0010 In the onUpdate I glue all the values together into a giant clipPath string. Using this technique you can animate the bars from center, start, or end adjust the stagger's each amount adjust the distribution of start times with an ease (in the stagger object)

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, That's because of the way the Horizontal Loop helper function works, nothing more. The helper function moves a group of items in the direction you tell it to (reversed config option) and when that element reaches the edge of it's parent is move to the opposite side nothing more. Sure enough sounds simple but the logic behind it in order to make it fully responsive and performant is not 😉. https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop With that being said, why are you trying to animate elements in different parents or outside the parent? I fail to see the logic behind it. We have these demos that use the Observer Plugin and ScrollTrigger to change the direction and speed of the loop instance: https://codepen.io/GreenSock/pen/zYaxEKV https://codepen.io/GreenSock/pen/GRwePYw Finally is worth noticing that you have only two elements in your loop, so for obvious reasons there is going to be a jump and empty space when the elements have to be placed at the start again. Is a good idea to have enough elements to use the entire width of the screen ( in large screens of course). Hopefully this clear things up Happy Tweening!

It's not really a bug. It's just a fundamental logic problem in the way you're setting things up. Let me explain... In order for a callback to fire, the playhead must cross that spot on its parent timeline, or land directly on top of it. So it's based on the playhead moving (its new position). The timeline doesn't render for the first time until the next tick (it'd be silly to render right away by default because the playhead hasn't moved anywhere yet, so it'd be a waste of CPU cycles). That's why the very first one didn't fire right away. The timeline's playhead updates on each "tick" which is typically about every 16.67ms but that really depends on the browser and how busy the CPU is, etc. Your timeline is 2 seconds long and has repeat: -1. So let's say it renders almost at the end, at like 1.9857 seconds, and then on the next tick, the totalTime renders at 2.013 which means that it went past the end and wrapped around to the beginning, and 0.013 seconds into the timeline (from the start). In that ONE tick, it'd fire that callback that's at the very end of the timeline AND since it looped back to the beginning and went a little bit past, it ALSO triggers the callback that's sitting at the very start. Great. BUT What if the playhead happens to land EXACTLY at the end of the timeline (2 seconds precisely)? What do you think should happen? Obviously the callback at the end should fire, but should the callback that's sitting at the very START of the timeline also fire? I mean the end of the timeline and the start of the timeline are not the same technically, so it'd be weird if both fired. The playhead can't be at 2 seconds AND at 0 seconds. It wouldn't make a lot of sense to fire the callbacks from BOTH places on that ONE tick. See the problem? There are many ways to accomplish what I think you're trying to do there (alter visibility of things in a synchronized way), but I'd need to see what other requirements you have in order to offer the best recommendation. Thanks for the excellent minimal demo, by the way. 👍

As with everything to do with GSAP, build an animation. When wanting to create a scrolling effect you frist have to remove the scrolling part and just focus on the animation you want to happen. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ A while back I've written a guide how to create a card stacking effect, but the logic you're looking for can also be build with it. Below a demo that has a horizontal animation, it is probably not 100% what you're looking for, but if you give it a go I think you'll be able to get it to do what you want with the resources provided. If you still need help please provide a minimal demo showing what you've tried your self and someone here will be happy to point you in the right direction. Happy tweening! https://codepen.io/mvaneijgen/pen/poYzaJW

We're back up again everyone! Thanks for bearing with us through this outage. 💚 We appreciate you all!

@jdhadwin Hello there. While your demo is not exactly minimal, which makes it kind of hard to see through everything, on a quick glimpse I noticed, that you are trying to animate svg elements that are in <g> groups from a scale of 0, which I think is at least part of your problem - and I don't think this specifically is GSAP related. I stumbled upon this a few days ago, too - happening for me in all Chromium based browsers on Windows 11. It appears to be a bug in the chromium browser base that was already reported in September 2022 by @Cassie and later marked as solved from what I can tell reading that old bug report - but now it seems to have resurfaced. @Cassie if you find the time, could your maybe re-new that report or something like that? ... I have absolutely no clue how those work, tbh. https://issues.chromium.org/issues/40240236 These following pens don't use GSAP at all - and as you should be able to see, when elements in groups are being 'manipulated' so they start out with a scale of 0 and then changed later on, their values will get changed properly inline on the element - but the element just won't get rendered then (unless you resize the window along the process, e.g., or scroll the SVG fully out of viewport and then back into view again). https://codepen.io/akapowl/pen/vYMWZrL This will not happen with elements that are not in <g> groups, though. https://codepen.io/akapowl/pen/QWPOgzm What helped for me as a workaround was to tween from a very small scale like 0.001 instead of absolute 0. Maybe that can help you out somehow, until that issue gets resolved again. I will add, that this is just something I was able to quickly notice. If it doesn't help in your case, and you suspect that there still might be some issues with GSAP, please create a demo that is boiled down to the bare minimum but still reproduces the issue you're having, so it is easier to identify for others, what could be causing it. https://codepen.io/akapowl/pen/dyLZzyM

You don't need GSAP to add a class to an element, just use .classList.add(yourClass); The problem with that is that it either has the class or it does not, there is no in-between state, so nothing will animate, see below. You're on the GSAP forum, so I think you look to animate things, then just create an animation for each property you want to change, much more fun and easier to control! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLzJxg?editors=0011

GSAP is smart and on page load calculates everything it needs to do the animation, so that when it is time it to animate it doesn't need to do calculations anymore. In your case you have two ScrollTrigger animating the same element, so both of them see the initial state of your gradient and record that and when it is time they animate from that initial state to their new state. You want the second ScrollTrigger to wait until the first one has finished. You could do this multiple ways, but the easiest is to give the second tween immediateRender: false, so that it waits until it needs to do the animation. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwOgqJj?editors=0010

That's because the browser's getComputedStyle() doesn't return the calc() data properly. So when GSAP gets the starting (from) value, the browser gives it a value with no calc(), and then the end string has calc() in it with multiple numbers. It's the same issue with your other demos (mis-matched data/quantities). There are two solutions: 1) Use CSS variables: https://codepen.io/GreenSock/pen/RwOgRJQ 2) Use a normal .fromTo() tween so that GSAP understands what you're trying to do and can use the raw starting value instead of a computed one from the browser: https://codepen.io/GreenSock/pen/wvZeWXQ?editors=0110

Alright, I couldn't help myself - I just had to find an algorithm to try to smooth out the movement when the path goes backwards. After about 10 hours, I think I've figured it out, and also demonstrated how you can make the bee kinda twist itself to remain oriented in the direction it's moving using scaleX and scaleY: https://codepen.io/GreenSock/pen/mdgmawg?editors=0010 Notice that pathEase() helper function has been updated and you can pass in a config object with smooth: true. I hope that helps!

transform is a lot of properties in one, so in your example what happens when you also want to animate scale? or translateX? You would have to merge them all in to one string and animating strings is not always the best idea. GSAP has exposed all the transforms and GSAP also does a lot of optimisations under the hood, so it is best to use the exposed properties for each transforms check the list here https://gsap.com/docs/v3/GSAP/CorePlugins/CSS?_highlight=transform#transforms Hope it helps and happy tweening!

That's typically beyond the scope of help we can provide here, but as a courtesy I tweaked the helper function to accommodate new enterAnimation and leaveAnimation functions that you can use to return an animation which gets plugged into the timeline: https://codepen.io/GreenSock/pen/qBwmOex?editors=0010 Does that help?

here is a quick one you can add any effect you want or play with the other options, just 5-10 min to take a look at the seamlessloop documentation and you're ready https://codepen.io/ahmed-attia/pen/RwOpyVX?editors=0011 you can check Carl's courses here and GSAP3 Express is free by the way https://www.creativecodingclub.com/bundles/creative-coding-club https://www.creativecodingclub.com/courses/FreeGSAP3Express

We don't typically provide custom solutions like this in these free forums, but I was curious about this and decided to clean up your demo for you: https://codepen.io/GreenSock/pen/GRLWvGp?editors=0010 I assume that was what you're looking for, right? You just had various logic issues and overcomplicated things a bit in my opinion. 🙂 I hope that helps!

Hi, You might want to have a look at this thread, especially the posts by @mvaneijgen and @PointC: Happy Tweening!

And here's another way to do it - a custom plugin: gsap.registerPlugin({ name: "autoWillChange", init(target, vars, tween) { this.target = target; this.active = false; this.tween = tween; return !!vars; }, render(ratio, data) { let progress = data.tween.progress(), active = (progress > 0 && progress < 1); if (active !== data.active) { data.active = active; data.target.style.willChange = active ? "transform" : "auto"; } } }); Usage: gsap.to(".container", { x: 100, duration: 2, autoWillChange: true, // <-- magic! onComplete() { console.log("complete"); } }); 🥳

@Chromium One of the MOST important things to us at GreenSock is cultivating a warm, smart, non-shaming community. We're widely known as having forums that are uncommonly so. Most tech communities are characterized by harsh, arrogant, shaming responses. When someone has a question, it takes a lot of humility and courage to risk posting. We get it. We really try to be compassionate and gentle. It sounds like you felt criticized and insulted. I'm very sorry if that was your experience. We actively work to avoid that; if we failed, I hope you'll forgive us. Glad we ultimately got on the same page with a solution. 🥳

Fixed background only works if element and any of its parent element doesn't have any transform applied or doesn't have position set to fixed. In order to create scroll effect, ScrollSmoother wraps content in a fixed parent, you can see this by inspecting from dev tools. To achieve this effect in ScrollSmoother, you will need to position the image manually. https://codepen.io/SahilAFX/pen/GRLXaGJ

@Rodrigo Thanks for picking up the call. Yup, I learnt the technique from her video. I was trying my luck to see if I could hear a second opinion. Anyway, thank you so much for all the patience and help. Hopefully, I will be strong enough to be the next contributor soon. And teach people what I have learnt. Take care, mates.

Thanks for the image. That's a great way to try to keep track of the points. Sorry, for any confusion, but in my haste I actually had the "bar3" values duplicated in my clipPath code which is why you were seeing extra points. Thanks for catching that. I removed the extra row of values. As for the from values, you can use those point objects for each bar to come up with a totally custom starting position using a set(). In the demo below I removed the animation to hopefully make it easier to understand how each bar now has a custom y starting value https://codepen.io/snorkltv/pen/qBwMPMw For what it's worth, keeping track of all those points in the clipPath string is pretty tricky for me too, so don't feel bad if it feels like a lot ot take in. As for using svg, the post @mvaneijgen linked to is quite comprehenisve. However, below is a demo from one of my svg lessons if it helps https://codepen.io/snorkltv/pen/rNKVrYx there are now 10 clipping and masking video lessons in SVG Animation with GreenSock if you want to dive deeper.

Welcome to the forum. If you're talking about the whole path changing as you scroll, you'd move the trigger to the timeline and add a second tween to animate the stroke color as the ball animates. https://codepen.io/PointC/pen/xxeaKeo/48ff3b51feeaaec506ed6260b59efa17 If you meant the path would change to green only as far as the ball has traveled, you'd need a second green path that is drawn as you scroll. https://codepen.io/PointC/pen/dyLqybY/f291cb8f00561f83216ca7df0680ea9b Happy tweening.

Hi, this is a very very old thread. The correct way to do this now is using our flip plugin. https://codepen.io/GreenSock/pen/zYqLjre Hope this helps!

No, that isn't really possible to do a nested default value like that. But perhaps in the next release, I could add a ScrollToPlugin.config({ autoKill: true }) method. I don't think anyone has ever requested something like that before. It wouldn't be terribly expensive kb-wise. I assume you'd both vote for this addition?

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

Hi @Rodrigo, 🤦‍♂️ Total facepalm moment, thank you for picking up on that! Thanks for the resources also, I've been looking over them and they definitely feel more like home to me. I imagine we'll be mixing both react components and vanilla JS in an upcoming project, so it will be nice to use an animation library that's more framework agnostic than what Framer Motion offers. Going forward I anticipate GSAP becoming a staple in our future projects. Thanks again!

Hello and welcome to the GSAP forums, If you just want a timeline to repeat a few times and then do something different at the end I would set up and repeating timeline with a callback that can play a custom animation when the repeat count reaches a certain value. In the example below the bottom flashes green after the final iteration. https://codepen.io/snorkltv/pen/poeEmWP However, since you want to scrub in GSDevTools I would create the repeating timeline and scrub through it multiple times in another timeline using tweenFromTo() In the example below the red box does not fade out (reset) on the last iteration which is what it sound like you want. https://codepen.io/snorkltv/pen/ZEZoqBV?editors=1010 Both of these approaches are explained in detail throughout my GSAP courses if you are interested in gaining a deeper understanding. Hopefully this gets you on the right track for now.

Hi @WakuWakuCodingu welcome to the forum! Looks perfect to me I would not change a thing! Certainly not if this if your first time using the tool. Pin spacing is needed for ScrollTrigger to do its magic, so you can really remove it. You can but then all your further sections will overlap you animation You could use gsap.utils.toArray, but you can also just feed a query selector to the GSAP tween and it will also get all the elements. In this case I've set all your .innerBox elements and add a stagger to the animation so they come in one by one. I've also move the ScrollTrigger logic to the timeline, so now it is even more clear what ScrollTrigger is controlling. Indeed in this case is it not strictly necessary to set overflow: hidden; but it also doesn't harm anything. https://codepen.io/mvaneijgen/pen/bGJvLZz I've written a guide how to create the kinds of card stacking effect, yours works perfectly, but maybe you can get some knowledge from it. Hope it helps and happy tweening!

Hi @Brandium welcome to the forum and thanks for being a club member! There is a bit much going on in your demo if you could reduce it to just the mask animation (the part you're having trouble with) it will be much easier for us to help you debug. A note your animation also doesn't work on Desktop Safari (at least not in Version 17.2.1). There are a lot of ways mask animation can work in on the web and a few weeks back I'd written a guide how to use most of them. Maybe your the solution you're looking for is already in there. Take a look an I hope it helps you solve your problem, if not post back here (preferably with a more minimal demo) and someone will be here to point you in the right direction!

@Rodrigo Thanks! That's what I ended up doing. Once you get the hang of going back and forth to the ease visualizer (it would just be impossible without it) you begin to see the relations between the curves and the path movement. It's laborious but interesting! As a reference for anyone trying this approach in a framework with SSR (I'm using Next.JS) always leave your markers on until you are done! I came across a problem with the ScrollTriggers getting moved up when I refreshed the page (because the whole document wasn't ready), and only noticed it far ahead. Had to implement a fix (A ScrollTrigger on the 'body' with a ScrollTrigger.refresh();) and had to start over... I would have noticed the markers being offset if they were on... <<trial and error>> indeed. @GreenSock This helper function is like magic to me! Your initial description says it all <<Helper function that returns an ease that bends time>>! I love it. It's beyond my current coding full grasp, I can kinda read the code, but towards the end get lost in its complexity. None the less it mostly works. I'll definitely use it eventually. Thank you both! As always, the best community I've ever seen.

Hi there, thanks for the heads up. There's an issue with our SSL cert I'm afraid. I've contacted @Prasanna who handles our private repo and we'll keep this thread updated. In the interim you can use the zip install to access the files. So sorry everyone. Hold tight! https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=zip&tier=free&club=true&require=false&trial=true

Just did 👍 Edit - For anyone wanting updates on this: Since that is not considered a regression of the fix for the original issue, it got opened as a new issue. https://issues.chromium.org/issues/332328859

Hi there! Our React docs are a good place to start. There's everything you need to know there in order to port the animation over to react https://gsap.com/resources/React/ If you need specific help, pop back with a demo showing what you've tried.

Also, just a heads up but safari is really struggling recently to paint big changes like this. I tried a few weeks ago and whole sections of the page were chunked out on scroll 🫠 I'd suggest using fixed divs and doing opacity fades instead of targeting background color. https://codepen.io/cassie-codes/pen/YzMVRrr/4a679cfaa6f8a96bd83bceaea0fa01b4?editors=1010

I built a helper function specifically for this: https://codepen.io/GreenSock/pen/vYMJdjB?editors=0010 Related forums post: I hope that helps!

Thx for the answer. Setting ScrollTrigger.normalizeScroll(true)Solved the problem.

@Cassie This looks like it made everything work... Now the triggers after the horizontal scroll trigger at the height it should. Thank you! ScrollTrigger.create({ refreshPriority: -1, // lower priority makes it happen later in the refresh() calculations ... });

Honestly my first step here would be to use transforms instead of backgroundPosition, that'll be easier on the browser to render. Give this one a go? https://codepen.io/GreenSock/pen/JjVWmJj?editors=1010 debug link for mobile If that doesn't work, then maybe try smooth scrolling and transforms, (with the caveat that it's not a magic bullet and may not be appropriate for your project, it's a very aesthetic choice and I wouldn't add smooth scrolling on a website without consideration of the tradeoffs. E.g - You'll need to adjust your markup to allow for fixed elements to be outside of the smooth scrolling area https://codepen.io/GreenSock/pen/jORBeKe?editors=1010 debug link for mobile If those options don't work it's time to face the reality that sometimes animations can be a little much for mobile browsers, safari makes our lives difficult sometimes. I often remove certain animations or create more simplified fallbacks for mobile. You can do that nice and easily with gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Hope this helps!

Hi @Iischeese welcome to the forum and thanks for being a club member! We love to see what you can come up with in a minimal demo so that we can beter understand your thought process and thus better help you understand the tool. Above are some links to Stackblitz templates so that you can directly work in your frame work of choice. (here is the Next.js version) I've written a guide how you can create these kind of card stacking effects, see the blog post here. And a demo below that uses that logic with a similar effect that you want. If you still need help please show us what you've tried in something like Stackblitz and someone here will be happy to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abMbwYd

Yep, because if we combine them all into a single tween, there's only one transform render that must occur on each tick (that's the part where the transforms get combined into a string and applied to the style). Just a small performance optimization that you'd likely never even notice in real-world scenarios but I obsess about performance. You had to create a new tween anyway on each update, so might as well just combine the x/y into that rotation one.

Hi @Atap Tailor welcome to the forum! GSAP records its starting values and when you set repeat: -1, it will repeat to its original position, so you have to call repeatRefresh: true, to have it recalculate new values on each repeat. When working with timelines I would put all the logic on the timeline and keep the tweens just for animations. Also check out our Seamlessly loop elements along the x-axis might be helpful https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/oNOByvj?editors=0110

Yeah, it's a little frustrating that the browsers moved the goal post and switched up how things work (they've gone back and forth actually). will-changed is really a mixed bag. Sometimes it helps, sometimes it hurts. And sometimes it depends on which browser. Here's the real question: have you ever seen any real-world benefit to switching back and forth between will-change values? Why not just set will-change: transform in the CSS and leave it alone? I know you mentioned memory savings and in theory that's true, but you also need to factor in the cost of switching that value back and forth because that takes CPU cycles and involves funneling data to the GPU. In other words, you actually may see a DECREASE in overall performance by toggling like that. So if I were you, I'd do some tests in your particular scenario to see if there's really any benefit one way or the other. I'll keep this in mind as a possible enhancement for a future release (autoWillChange), but it'd also be pretty easy to write a helper function that does it for you: function autoWillChange(vars) { let setTo = (callback, value) => { let orig = vars[callback]; vars[callback] = function() {gsap.set(this.targets(), {willChange: value}) && orig && orig.call(this); } }; setTo("onStart", "transform"); setTo("onComplete", "auto"); return vars; } Usage: gsap.to(".container", autoWillChange({ x: 100, duration: 2, onComplete() { console.log("complete"); } })); Just wrap it around your vars object and you're good-to-go. You don't need to use those extra .set() calls at the beginning and ending of those timelines. But again, I personally would probably just set will-change: transform in the CSS and leave it alone because in most cases the memory won't be an issue and it'll deliver better performance not to shift the value around. I hope that helps!