Leaderboard

Yeah, I'd have to disagree on this. If I add a set tween to the beginning of a timeline I expect the timeline to start at that set state. It's an explicit instruction to immediately set a value. It's not saying 'animate to' Similarly with your demo you've linked above, you've said 'doesn't initially apply' to all the from tweens. But quite the opposite is true, they are all immediately 'applying' by rendering at their end value. Let's break it down a bit - first step, initial positioning ✨ I think potentially the thing that's tripping you up here is referring and thinking of 0 duration tweens as 'animations' The thing is, they aren't animations. Animations imply a duration, in order to animate we have to have some values to animate between and a period of time to 'tween' between those values. What you have here with 0 duration tweens and set 'tweens' are immediate commands. Let's just take a look at the initial positioning. I've added some set tweens, some time stamps so that the starts are staggered and I've got rid of scrollTrigger for now (as that adds some different rendering behaviour which will likely confuse things further) https://codepen.io/GreenSock/pen/MWPxbEa?editors=0010 First thing to know is that all from() tweens render immediately by default. Now, an immediately rendered from tween with a zero-duration will render immediately at the end of the tween, the final state. Because it's a from tween it runs backwards, so you're 'setting' the end value. You'll never see the values in the vars object because those are the initial values. The two tweens and set calls would also render immediately if they weren't on a timeline as they have zero duration. I've added some standalone tweens so you can see this. BUT, because they're on a timeline they're set to immediateRender: false and they're waiting for the playhead to hit them in order to 'set' their position. --- If you bop immediateRender:true on all the tweens (commented out for you in the defaults) you'll see that all the tweens act the same as the from tweens, not waiting for their place on the timeline, just immediately rendering at their end state. Probably worth saying too that 0 duration from tweens are incredibly uncommon and unintuitive. From tweens essentially say 'animate from these values' which is useful. But a zero duration from tween is basically a back to front, upside down set call. 🫠 It's inherently going to ignore everything in the vars object. It makes my head feel funny just trying to read it. So I really don't know why anyone would be using a zero duration from tween in the first place. --- It seems to me that what you're running into and trying to understand is basically immediateRender - So here's some information. it's a little tricky to wrap your head around but it should help things click into place a little. And here's a deeper dive into this behaviour by Jack If that makes sense and we're on the same page I'm happy to elaborate more about the reversing behaviour and how ScrollTriggered timelines differ from normal timeline rendering. ✨ Also, you're not the first to get baffled by this and you won't be the last! ✨ Hope this helps!

I think the refreshPriority is beter, because you don't know in which your order the site will end up, so if you have a dynamic way to set the refreshPriority, so that they are always in order it will be the most robust. You could check the ScrollTrigger demo pages https://greensock.com/st-demos/ the Greensock YouTube channel https://www.youtube.com/c/GreenSockLearning/videos or our own @Carl's YouTube channel also has a lot of great content. https://www.youtube.com/user/snorklTV/videos

Hi @Shahram welcome to the forum! What I would do is create timelines for each animation "open navigation", "shop panel", "blog panel" and "contact panel". Then animate "open navigation" and the menu item that is clicked. Then when clicking on blog check if "open navigation" has already played and reverse the panel that has already been clicked. If the animation "open navigation" has not been clicked it probably means that none of the panel animations has been played. // Person clicks shop, then blog Animate "open navigation Animate "shop panel" // User now clicks blog "open navigation" als already been open Reverse "shop panel" Animate "blog panel" As a side note: is there any reason you're loading GSAP 3.9.1? Where are currently one version 3.11.5 and you're using the old GSAP 2 syntax the GSAP 3 syntax is much easier and more readable check out https://greensock.com/3-migration/

So for initial state setting I usually either just use CSS or I use set the initial state outside of a timeline. Then the shutter would be a set tween on a timeline. My animation files usually end up looking like this - set initial state and transform origins up top, then you have a fresh starting point for the timelines. https://codepen.io/GreenSock/pen/xxyBzYd?editors=0010 Although nothing wrong with a small duration tween here either, different strokes for different folks and all.

Yeah, a ton of thought has been put into zero-duration tweens (as Cassie said) and they're just inherently tricky because there's literally no distinction between the start and end positions. If the playhead lands directly on top of that spot...is it supposed to render the start or end state? To complicate things further, .from() tweens that immediately render bring a whole different set of challenges - in the vast majority of cases people want from() tweens to render immediately which means the starting state shouldn't get baked into the tween (if it did, anytime the playhead is at a position BEFORE the from() tween, it'd render at that pre-tween state which is almost surely different than the "from" state). Anyway, I'll resist writing 3 pages about all the challenges, why things behave the way they do, and why changing the behavior could cause a lot of other problems...but suffice it to say that you should be able to just use a duration of 0.001 to accomplish your goals (if I understand them correctly).

Since the morph already happened on the first tween of the timeline, it appears nothing is morphing for tweens 2 & 3. Easiest solution is to use a .fromto() tween rather than a .to() tween. https://codepen.io/PointC/pen/Jjmzdxp/6382a2db1d9550ba86e6e33f3f318b9a Happy tweening.

Oooh fun one. you could make a tween for the ticker and then animate the progress? I've got to crack on with some other stuff, but maybe something like this could be a starting point? https://codepen.io/GreenSock/pen/eYPwZZb?editors=1011

@mvaneijgen Thanks again for your help, advice and links, I really appreciate it. Yes, I've paid for a subscription for snorklTv and can't recommend it enough. Time to do some scrollTrigger nerding out! Thanks again

Hi, Your problem is here: gsap.set(gsap.utils.toArray(entry, name, desc, details), { clearProps: true }); If you check the docs for the toArray method you'll see that the second parameter it's a scope element or selector: Parameters targets : [Object | String | NodeList | Array] - The target(s) that you want wrapped in a flattened Array (it can be selector text, objects, NodeList, jQuery objects, etc.) scope : [Element | Ref] (optional) - The Element (or React ref) to which the selector text scope should be limited, like calling .querySelectorAll([selector-text]) on this Element rather than the document. In other words, it will only return descendant Elements of the scope Element, like jQuery.find(). This is only helpful when targets is selector text. So basically you're telling GSAP, create an array with the entry element and use the name element as scope, the other two (desc and details) are just ignored, because the method is expecting two parameters. There are two solutions: Pass an array with the elements to the method: gsap.set(gsap.utils.toArray([entry, name, desc, details]), { clearProps: true }); Don't use the toArray method. Those elements are already DOM nodes so you can wrap them in an array and be done with it: gsap.set([entry, name, desc, details], { clearProps: true }); Hopefully this helps. Happy Tweening!

Oh wow, that's so much simpler than anything I was trying to do. I changed my .npmrc to that and added my Greensock Club token as NPM_TOKEN at the env var section of Vercel, and that's that. Thank you so much!

I recently got acquainted with GSAP and I can confidently say that it has really made my work easier and more professional. Thank you very much GreenSock team ✌️

Hi there, I'm using near latest npm greensock (3.11.4), and there seems to be a change in behaviour since version 2.0.1 and I'm not sure how to resolve it. Before I could have 3 items with infinitely repeating tween inside a timeline, but later I want to stop those tweens on a delay (so they don't stop at the same time), but I don't want to pause the timeline... so I'd add my tweens to a timeline like this: ``` // start rows anim this.spinTimeline = new TimelineLite({paused:true}); _.each(this.rows, (row, i) => { var slideTween = new TweenMax(row.sprite, 3, {x: row.offset, ease: Power0.easeNone, repeat: -1 }); this.spinTimeline.add(slideTween , "startRowT" + i, "-=0.1"); }); this.spinTimeline.play(); ``` then later I could stop them animating repeatedly by just calling a new tween on the row.sprite, with a slightly increasing delay on each, and the animations would transition smoothly from repeating x to landing on a specific point on the x axis. ``` stopRows() { _.each(this.rows, (row, i) => { TweenMax.to(row.sprite, 0.75, {x: row.offset, ease: Elastic.easeOut, delay: 0.75 * i, onComplete: this.animComplete.bind(this) }); }); } ``` Now with latest gsap versions I can't figure out how to recreate this. the repeating tween just keeps playing after the stopping tween finishes. If I pause the timeline first, it works but the repeating anims pause immediately.. If I use overwrite: true, then the repeating anims pause immediately (not when the stop anim starts after the delay). If I use timeline.killTweensOf(row.sprite) onStart, then it happens immediately, (not after the delay).. so i can't transition from one tween to the other anymore. My new code looks like this: ``` // start anim const tl = this.tl; this.rows.map((row, i) => { const offsetX = row.container.width / 2; tl.to(row.container, {x: offsetX, duration: 3, ease: 'none', repeat: -1}); }); tl.play(); // stop anim: this.rows.map((row, i) => { const toX = row.stopOffset; gsap.to(row.container, { duration: 1, x: toX , ease: 'elastic.out', delay: 0.75 * i, overwrite: true, // i'd expect this overwrite to happen after the delay, not immediately. onComplete: () => { //this.tl.killTweensOf(row.container); this.state = 'ready'; }, }); }); Edit: I found the problem, I needed to remove the duration from my new version and use t.killTweensOf in the onComplete (the line i had commented!).. that works as I want now!

Hi, Be sure to have something like this in your .npmrc file: always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken=${NPM_TOKEN} This repo was deployed less than two weeks ago to vercel without any issues: https://github.com/rhernandog/gsap-bonus-npm-vercel Here is the live page (not a lot, just a proof of concept of a successful deployment and CI/CD pipeline): https://gsap-bonus-npm-vercel.vercel.app/ If you inspect the console you'll find this line there: https://github.com/rhernandog/gsap-bonus-npm-vercel/blob/main/pages/_app.js#L8 Hopefully this helps. Happy Tweening!

Definitely, There's a lot to explain here. Viewport heights and height measurements/pinning in general is quite tricky on mobile because of the browser resizing. That's why we have different viewport units now. https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/#large-viewport And ignoreMobileResize https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.config() --- Bearing that in mind, not all solutions that work for desktop work for mobile. Which is a ok because we have media queries and matchMedia to utilise. https://greensock.com/docs/v3/GSAP/gsap.matchMedia() Before rolling a solution, it's also worth mentioning that this solution is specific to ScrollSmoother, where there are limitations around position fixed, it also looks like this user had markup limitations too. If you don't have markup limitations and you're not using ScrollSmoother, then this isn't the right solution for you. You don't even need GSAP for this, you can just do it with CSS https://css-tricks.com/the-slideout-footer/ Hope this helps. If the above solution doesn't work for you for some reason, let me know and we can see how best to achieve it with GSAP. Good luck!

Heya! So the majority of the issues here lie in scoping ScrollSmoother isn't the problem here. If you pop things out of the containers and into the body at the moment the code's gonna break because you're targeting stuff inside the container elements with el.querySelector, so that would need to be updated to reflect the new DOM structure. // loop around and target elements within each container gsap.utils.toArray(".container").forEach((el) => { let image = el.querySelector(".hover-reveal") }) You're also kinda mixing and matching your scoping. You have some stuff targeting *just* the elements in that container, but then also a few lines down you have some GSAP tweens which are globally targeting by class. scaleTl.fromTo( ".hover-reveal__inner",{...}) You could simplify this quite a bit by just making one mouse follower, also gonna be way better to scale. I assume you've made multiple because you want a different image on each section, but you can just do that dynamically. Saves having a bunch of different elements. Here's a little adjustment, hope it helps https://codepen.io/GreenSock/pen/GRYLMzX?editors=0011

Also a note - Not sure if this is what you're referring to, but in the demo you linked the height is set in the CSS as the contents of the page are absolutely positioned, so there's no native height. This isn't a necessity - Here's a demo without absolutely positioned elements https://codepen.io/GreenSock/pen/rNqbxvR?editors=0100

Here's a quick demo with a loop through the targets and creating a simple timeline for each. Then we add the enter/leave listener to play/reverse the timeline on hover. https://codepen.io/PointC/pen/rNqbOxm Happy tweening.

Hi @Display Name posting the same question at multiple places will not get you help faster. Yes this is possible with GSAP, is it easy? NO! There are multiple things that need to be build to get this effect to work. You'll need something like this to have the shape follow the mouse https://codepen.io/GreenSock/pen/WNNNBpo And indeed the post the @Cassie linked seems like a good resource to base your version on. Again, this will not be an easy first project. I would recommend starting with something easy in GSAP and try getting some experience with the tools, before tackling such a major project. If you don't have time to wait and do it yourself you can always check the "Jobs & Freelance" forum for paid consulting, or contact us directly. Hope it helps and happy tweening!

I wouldn't figure why this would not be possible, but it is! But to repeat both strings need to be the EXACT same! If there are percentages in one value the other value also needs %, even if it is tweeting to zero (0). If you use the calc() string for one value the other also needs calc (even if it isn't calculating anything!) Your CSS string was also with spaces. To make sure both strings were the same I've moved it all to one line. To make it easier to debug I've moved the GSAP line to the css commented out to compare both strings and this is what it needs to look like to make it work. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/rNqRgPW?editors=0110

You're are animating to something and the next time you animate to the exact same point, so nothing will happen because it already is at its end position. What I would do is create a timeline, with the repeats and the repeat delays build in, this way you don't need to repeat your code. If you do want to change your animation each time, but have the same end point you could also use a .fromTo() animation to ensure it always starts from the beginning. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/KKGEEoW?editors=0010

Yep - the relative value on each iteration is the culprit here. There are a few ways to solve it, but I think the easiest is just to set the lines back to 0 after they fade out. Add this to the end of the timeline in the clearData() function and you'll be good to go. You also won't need relative y values on the tweens in that function with this change. Just y:20 will work perfectly. tl.set("#para-long-line, #para-short-line", { y: 0}); Happy tweening.

This is typically caused when you have a filter effect applied (via filter effect within Animate's UI). If you apply the filter via code instead, you shouldn't get that issue. Can you try removing any filter effects and see if you get the same issue?

Thanks for the replies people! 🤙 Sorry if I wasn't clear @Rodrigo, I had an idea about what I was going to do for the Draggable part. It was animating the little ticker part so it syncs up with the inertia of the wheel I hadn't attempted in my head yet 😅 @Cassiehas come in with an awesome starting point! 🙏 That's pretty much there. I guess it'll just be a case of fiddling with the keyframes/timing of the ticker so I can almost scrub the ticking/clicking. It won't have to be super accurate for the demo I'm presenting. But, I'm always curious how close we can get with these things or what crafty techniques come out of exploring. – Jhey ＼ʕ •ᴥ•ʔ／

It looks to me like a logic issue in your code - you set up that initial tween to run no matter what, but you actually only want it to run if the page starts out scrolled to the very top (or maybe within the first window.innerHeight)? So currently you've set it up so that the two tweens would fight with each other when the page is scrolled down far enough (one is trying to fade it in and the other is scrubbing a timeline animation of that same element's opacity, etc. Wouldn't a conditional logic wrapper suffice?: https://codepen.io/GreenSock/pen/oNarvpL?editors=0010

Thank you for your help. I've managed to find a solution for this and updated the codepen above.

Hi, You can also tap into GSAP's ticker in order to change the update frequency: https://greensock.com/docs/v3/GSAP/gsap.ticker But as @mvaneijgen mentions, it'd be far better to know exactly what you're looking for in order to give you the proper advice. Happy Tweening!

Oh, and one very important thing to note about the Blobmixer site: they aren't scrolling the page. There is no scrollbar. They are using the mousewheel to control the progress of an animation.

Hi @iDVB I don't have the time to try to figure it out, but I think it would be worth looking at the Inertia Plugin Investigate both demos with snapping enabled (not live snap) You'll see the elements you throw or flick will very naturally end at the proper snap location. A core feature of the Inertia plugin is to apply a velocity to something and over time it will naturally slow down. Inertia Plugin has features to track the currently velocity of things and allow you to create a new tween with that velocity passed in as the starting velocity. Also, if you fail to throw something hard enough it will naturally glide back to it's starting state. I think the key to what you want to do is to track the velocity of your scrolling and apply that to the progress() of an animation. The Observer plugin has functionality to track wheelspeed velocity. I'm guessing you could use that in conjunction with the Inertia Plugin https://greensock.com/docs/v3/Plugins/Observer/velocityY I think the tools are available here to accomplish your goals, but it will take some tinkering and perhaps a very different approach.

Heya! Maybe you need to wait for your custom font to load? Give this a pop - document.fonts.ready.then(function () { // do the thingsss });

Hi @CptRobby and welcome to the GreenSock forums! This seems to be related to some stuff Vue does to refs that is a bit longer to explain here. But is definitely not a GSAP issue. If possible don't store your GSAP timeline in a ref, since that particular element becomes reactive as well, so if nothing in your app depends on that ref being updated, there is no actual need to store the GSAP Timeline in a ref, just create a variable and update that variable inside the GSAP Context instance: const block = ref(); const button = ref(); let tl; let ctx; onMounted(() => { ctx = gsap.context(() => { tl = gsap.timeline(); tl.to(button.value, { opacity: 1, duration: 1, }); }, block.value); }); Finally is not a good idea to make paused: true a default in your Timeline configuration, since every single instance you add will be paused and you'd have to change that as you create them. Is better to just make the timeline paused: let ctx; let tl; onMounted(() => { ctx = gsap.context(() => { tl = gsap.timeline({ paused: true, }); tl.to(el, { /*...*/ }); // Later in your code or in a method tl.play(); }, scope); }); Hopefully this helps. Happy Tweening!

Wow, Thanks a lot. Solved the issue in a flash. Didn't know it was possible with just css. Initially viewed it as a pinned section, and immediately thought of the scrolltrigger "pinning", and just kept my head rolling around gsap methods. Been using gsap for quite a while now. Absolutely love it. I've come to the forums several times for help, but never had any unresolved questions. Appreciate a lot for the whole team to keep this forums alive. Don't think there's any other forums, this helpful. Much love....

That thread is an absolute gold mine of information. You should be able to extrapolate what you need if you go through the demos and info! Largely you just need to know that canvas needs to be redrawn every tick, that's why you add the function that draws the elements to the GSAP ticker. After that, what you animate and draw is up to you. I've simplified your code down so that there's an obvious draw function. (That's what gets called every tick) Then you can just call that. You can either call it from GSAP's ticker, or you could call it from an onUpdate callback in a tween, timeline or ScrollTrigger. https://codepen.io/GreenSock/pen/xxyezNd?editors=0010 If you want to stagger you'll need to have the concept of individual circles with individual size values for GSAP to target, which you don't really have right now, you just have one 'size' value that they're all using. So you'll need to create more objects to work with, just like you'd have with DOM or SVG. Possibly using a constructor, that would likely be the easiest way. Then you can use GSAP to stagger them. Here's a demo https://codepen.io/osublake/pen/xabPyx And a thread

@Cassie absolutely spot on thank you so much mate! Performance on good ol' Safari isn't exactly stellar even without my usual 8001 open tabs... but I'm guessing that may be just a Codepen iframe thing. Famous last words but this was pretty much the last thing to sort on my portfolio project framework, so extra grateful points to you. Have a great bank holiday! 😎

People are welcome to chime in on others posts - there's space to help everyone! And yeah, sure, you can change the properties to whatever you need. I just copy-pasted your start and end and scrub value in - Is that what you're after? https://codepen.io/GreenSock/pen/yLRrewG?editors=0010

There's a demo in the thread I linked to that does exactly what you're after https://codepen.io/osublake/pen/XWWPPWy/946d5ebb14c5f5790369ce9ef0c84b39

In addition to @Rodrigo's sound advice, I'd add that you don't really need to worry about initial values with hover animations. You'd generally just create a tween or timeline and play/reverse on hover in/out. Thanks for being a Club member and welcome to the forum.

When you're clipping an H1 separate from the SVG, I'd recommend just using a container div for the H1 and setting overflow to hidden. Something like this: https://codepen.io/PointC/pen/EMOwaO Just a few other notes: You could save a lot of JS if you apply a common class or select an array of groups to apply your autoAlpha set(). Currently you have 20 identical set() tweens in a row. I'm not sure setting the autoAlpha:1 is necessary as that would be its default state. No need for <body> tags in the HTML panel of CodePen You can load scripts via the little gear icon on the JS panel rather than pasting the script tags in the HTML panel Happy tweening.

Hi @Dean Draper and welcome to the GreenSock forums! Thanks for being a Club GreenSock member and supporting GreenSock! 💚 You can use the getProperty method for that: https://greensock.com/docs/v3/GSAP/gsap.getProperty() Also another option could be the revert method that every GSAP Tween/Timeline has: https://greensock.com/docs/v3/GSAP/Tween/revert() If you keep having issues, please remember to include a minimal demo so we can have a better look at what could be the problem. Hopefully this helps. Happy Tweening!

Heya! Something like this should do you ☺️ https://codepen.io/GreenSock/pen/yLRwEEN?editors=1010

Hi, On top of Jack's advice we have this starter template for Next with the app folder so you can take a look https://stackblitz.com/edit/nextjs-ysf649 Hopefully this helps. Happy Tweening!

Increase the end value to something arbitrary like 3000px or set it to x amount the window height. Take a look at the following video great demonstration how ScrollTrigger works. end: "3000px bottom" end: `${window.innerHeight * 5} bottom`,

It should do it, but you have a scrub of 2 which means it lags behind for 2 seconds, if you would set it to true it will be more accurate. Also tweens have a few defaults, I already told you their duration 0.5s, but it also has an ease: "power 1.out", when working with ScrollTrigger scrub having a ease: "none" can feel smoother. This one I don't understand. I've add some more logic to your start and end values, the second part has to do with the viewport triggers, so I've set it to start: "top top", which means start when the top of the element hits the top of the viewport and end: "bottom bottom", which means stop when the bottom of the trigger element hits the bottom of the viewport. The default of these are both on the top of the viewport as seen in your pen both labels are on top of the screen overlapping each other, on my screen the end trigger would never touch the top of the screen, because there wasn't enough room to scroll further. https://codepen.io/mvaneijgen/pen/PoyLppm?editors=1010 Also you've now set position fixed via CSS, but you could also set this via ScrollTrigger, which allows you to pin and element over the scroll duration (this will require a rewrite of your CSS logic), but check the pen below. The shoe is not pinned when scrolling down, but when you scroll further ScrollTrigger will start and it will pin the shoe, then the ScrollTrigger will finish and the shoe gets unpinned. You can set pin: true in ScrollTrigger to pin the trigger element, but your can also pin and element pin: ".myElement". Check out the ScrollTrigger demos on https://greensock.com/st-demos/ for more awesome examples. https://codepen.io/GreenSock/pen/gOabMXv

Hi, I see that you have will-change: transform applied to the smooth content element. Try adding the normalizeScroll option in the ScrollSmoother config: /*------------------------------ Register plugins ------------------------------*/ gsap.registerPlugin(ScrollTrigger, ScrollSmoother); /*------------------------------ Init ScrollSmoother ------------------------------*/ // No need for this here since it goes inside ScrollSmoother // ScrollTrigger.normalizeScroll(true); // create the scrollSmoother before your scrollTriggers const scrollerSmoother = ScrollSmoother.create({ smooth: 1, effects: true, smoothTouch: 0.1, normalizeScroll: true, }); Give that a try and let us know how it works. Happy Tweening!

That's so obvious! I did didn't even think to check if both versions were compatible 🤦‍♂️ Thanks for pointing that out. Both versions work the same for me if as long as I use the same version of both ScrollTrigger and SmoothScroll. However I noticed the markers are not behaving as expected on 3.12.0. I don't think there are issues with the actual triggers only the markers Edit: the start marker works as expected the other ones are pinned to the bottom https://codepen.io/jmorgadosoares/pen/XWxGJQJ

Hi Jack, thanks for replying so quickly. Upgrading to GSAP fixed my issue! What's weird is that I thought I was using the latest gsap already. I'm a Business Green member, after all, but indeed I was using the old TimelineMax from a folder deep in my project! What an idiot. But please, to those of us who started out with Macromedia Flash and still consider animating with JS a new thing, please don't call our tools "a relic from the distant past" - we feel old enough already! 🤣 But for future reference, with the advent of offscreencanvas, web workers are no longer just for off-screen computations. We can now render to canvases in separate memory threads and free up the main thread: https://threejs.org/examples/webgl_worker_offscreencanvas.html. I guarantee you'll be hearing a lot more about it from hereon... Thanks again, George

ffmpeg docs here - https://ffmpeg.org/documentation.html

That looks perfect. Thank you so much!

Found the solution! ..it was an Elementor transition property.. Thanks for the code!

Ah, that does help me understand it. A bit unintuitive, but I'm sure it's probably like that for a reason. It's definitely a bit of an edge case, since it's only instant tweens. I definitely think it would be worth putting some thought into what the behavior should be in this case. I think changing changing the duration should only impact timing, not behavior. It's also a recurring cause of animation bugs on my team, even those of us who've been working with GSAP for years. Then again, I'm nowhere near as experienced in animation as any of you guys are, so if you decide it genuinely should be this way then I'll trust that. Here's another fun example I made while trying to figure out the behavior. It does a better job of showcasing the different behaviors in each of the possible cases. https://codepen.io/RJWadley/pen/BaqbyEV?editors=0010

Hi, No you don't need multiple scrollTrigger. In this pen I dded a timeline and added another tween for drawing. Just make the path reverse and it will be fine. Blog explains reversing: https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ https://codepen.io/tripti1410/pen/NWzXgdb?editors=1010 you can checkout this ex as well: https://codepen.io/tripti1410/pen/GRyBxeZ