Search the Community

Hi Rodrigo, I did some experiments after reading through your response. The animation goes back to normal after the window is resized. However, we can't just ask the visitors to resize the window to see the effect, right? And, I am unsure what you mean by "the order things are called". Assuming I am right, I moved the About section above all other animations. However, the problem still occurs. Then, I try to comment out the command lines one by one. I noticed that as long as the "homePlanet" animation is not calling. Everything will work just fine, as you showed me in your reply. So, I started asking myself about my looping rotation and its speed. Please see my codes below. planet .to(".dot-line", { repeat: -1, rotation: "+=360", duration: 100, ease: "none", transformOrigin: "center center" }) .to(".planet", { repeat: -1, rotation: "+=360", ease: "none", svgOrigin: "431.92 431.92", duration: 30, overwrite: "auto" }, 0) .to(".planet-ab", { repeat: -1, rotation: "+=360", ease: "none", svgOrigin: "566.76 566.76", duration: 60, overwrite: "auto" }, 0) I am using duration to control its speed. I wonder if it could be the duration that caused the issue. This looping feature involved 2 sections, which you can see in the below codepen link. https://codepen.io/danclp/pen/KKEarwe The rotation works as a continuing animation, even after it has been scroll-triggered away in the first section. You can still see the rotation animation available in the second section (the sliding text section). Did I code correctly, or does it have another way of calling when we want it to animate continuously? Also, should I use duration or something else when I want to slow down the rotation speed? Can you give me some advice? Thank you.

juste a self note, this will make tl more hard to manage: example: so i need to alway think to override complexe tl. example here the pivot not work because the last crush the first ! am not sure i understand what happen underhood ! It's a shame not to have an understanding to just overwrite the delays and keep the classic behavior on auto.

ho sorry , oki after many test i just starting found correct solutions: `overwrite: 'auto'` => ` overwrite: true,` https://codepen.io/djmisterjon/pen/BabpgPx?editors=0011 i will need make more deep test to see if this broke behaviors in my app !? but seem promising, de delay animation seem override thanks

120Tracking Prevention blocked access to storage for <URL>. require.js:168 Uncaught Error: Mismatched anonymous define() module: function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function n(t){return"string"==typeof t}function o(t){return"function"==typeof t}function p(t){return"number"==typeof t}function q(t){return void 0===t}function r(t){return"object"==typeof t}function s(t){return!1!==t}function t(){return"undefined"!=typeof window}function u(t){return o(t)||n(t)}function K(t){return(l=pt(t,at))&&ie}function L(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function M(t,e){return!e&&console.warn(t)}function N(t,e){return t&&(at[t]=e)&&l&&(l[t]=e)||at}function O(){return 0}function Y(t){var e,i,n=t[0];if(r(n)||o(n)||(t=[t]),!(e=(n._gsap||{}).harness)){for(i=dt.length;i--&&!dt[i].targetTest(n););e=dt[i]}for(i=t.length;i--;)t[i]&&(t[i]._gsap||(t[i]._gsap=new Ft(t[i],e)))||t.splice(i,1);return t}function Z(t){return t._gsap||Y(yt(t))[0]._gsap}function $(t,e){var r=t[e];return o(r)?t[e]():q(r)&&t.getAttribute(e)||r}function _(t,e){return(t=t.split(",")).forEach(e)||t}function aa(t){return Math.round(1e5*t)/1e5||0}function ba(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function ca(t,e,r){var i,n=p(t[1]),a=(n?2:1)+(e<2?0:1),o=t[a];if(n&&(o.duration=t[1]),o.parent=r,e){for(i=o;r&&!("immediateRender"in i);)i=r.vars.defaults||{},r=s(r.vars.inherit)&&r.parent;o.immediateRender=s(i.immediateRender),e<2?o.runBackwards=1:o.startAt=t[a-1]}return o}function da(){var t,e,r=ot.length,i=ot.slice(0);for(ut={},t=ot.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function ea(t,e,r,i){ot.length&&da(),t.render(e,r,i),ot.length&&da()}function fa(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(nt).length<2?e:t}function ga(t){return t}function ha(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function ia(t,e){for(var r in e)r in t||"duration"===r||"ease"===r||(t[r]=e[r])}function ka(t,e){for(var i in e)t[i]=r(e[i])?ka(t[i]||(t[i]={}),e[i]):e[i];return t}function la(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ma(t){var e=t.parent||F,r=t.keyframes?ia:ha;if(s(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function pa(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function qa(t,e){!t.parent||e&&!t.parent.autoRemoveChildren||t.parent.remove(t),t._act=0}function ra(t){for(var e=t;e;)e._dirty=1,e=e.parent;return t}function ua(t){return t._repeat?_t(t._tTime,t=t.duration()+t._rDelay)*t:0}function wa(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function xa(t){return t._end=aa(t._start+(t._tDur/Math.abs(t._ts||t._rts||B)||0))}function ya(t,e){var r;if((e._time||e._initted&&!e._dur)&&(r=wa(t.rawTime(),e),(!e._dur||gt(0,e.totalDuration(),r)-e._tTime>B)&&e.render(r,!0)),ra(t)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-B}}function za(t,e,r,i){return e.parent&&qa(e),e._start=aa(r+e._delay),e._end=aa(e._start+(e.totalDuration()/Math.abs(e.timeScale())||0)),function _addLinkedListItem(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t}(t,e,"_first","_last",t._sort?"_start":0),t._recent=e,i||ya(t,e),t}function Aa(t,e){return(at.ScrollTrigger||L("scrollTrigger",e))&&at.ScrollTrigger.create(e,t)}function Ba(t,e,r,i){return qt(t,e),t._initted?!r&&t._pt&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&d!==Mt.frame?(ot.push(t),t._lazy=[e,i],1):void 0:1}function Ea(t,e,r){var i=t._repeat,n=aa(e)||0;return t._dur=n,t._tDur=i?i<0?1e10:aa(n*(i+1)+t._rDelay*i):n,t._time>n&&(t._time=n,t._tTime=Math.min(t._tTime,t._tDur)),r||ra(t.parent),t.parent&&xa(t),t}function Fa(t){return t instanceof Bt?ra(t):Ea(t,t._dur)}function Ha(t,e){var r,i,a=t.labels,s=t._recent||mt,o=t.duration()>=E?s.endTime(!1):t._dur;return n(e)&&(isNaN(e)||e in a)?"<"===(r=e.charAt(0))||">"===r?("<"===r?s._start:s.endTime(0<=s._repeat))+(parseFloat(e.substr(1))||0):(r=e.indexOf("="))<0?(e in a||(a[e]=o),a[e]):(i=+(e.charAt(r-1)+e.substr(r+1)),1<r?Ha(t,e.substr(0,r-1))+i:o+i):null==e?o:+e}function Ia(t,e){return t||0===t?e(t):e}function Ka(t){return(t+"").substr((parseFloat(t)+"").length)}function Na(t,e){return t&&r(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&r(t[0]))&&!t.nodeType&&t!==i}function Qa(t){return t.sort(function(){return.5-Math.random()})}function Ra(t){if(o(t))return t;var p=r(t)?t:{each:t},_=zt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,v={},e=0<m&&m<1,y=isNaN(https://requirejs.org/docs/errors.html#mismatch at makeError (require.js:168:17) at intakeDefines (require.js:1254:36) at Object.localRequire [as require] (require.js:1446:21) at requirejs (require.js:1797:24) at custom.js:32:1 makeError @ require.js:168 intakeDefines @ require.js:1254 localRequire @ require.js:1446 requirejs @ require.js:1797 (anonymous) @ custom.js:32 testrahul.js:1 hiiiiiiiiiiiiiiiiiiiiiiiii testrahul.js:42 Service Worker registered with scope: https://totalfood.greenhonchos.in/ totalfood.greenhonchos.in/:1100 [Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113 customtest.js:34 gsap test[object Object] customtest.js:35 {"Back":{},"Bounce":{},"CSSPlugin":{"name":"css","aliases":{"autoAlpha":"opacity,visibility","scale":"scaleX,scaleY","alpha":"opacity","transform":"x,y,z,scale,scaleX,scaleY,xPercent,yPercent,rotation,rotationX,rotationY,skewX,skewY","translateX":"x","translateY":"y","translateZ":"z","rotate":"rotation","rotationZ":"rotation","rotateZ":"rotation","rotateX":"rotationX","rotateY":"rotationY"},"core":{}},"Circ":{},"Cubic":{},"Elastic":{},"Expo":{},"Linear":{},"Power0":{},"Power1":{},"Power2":{},"Power3":{},"Power4":{},"Quad":{},"Quart":{},"Quint":{},"Sine":{},"SteppedEase":{},"Strong":{},"default":{"utils":{},"effects":{},"ticker":{"time":0.537,"frame":5,"_listeners":[null]},"plugins":{},"globalTimeline":{"vars":{"sortChildren":false,"defaults":{"duration":0.5,"overwrite":false,"delay":0},"autoRemoveChildren":true,"id":"root","smoothChildTiming":true},"_delay":0,"_repeat":0,"_ts":1,"_dur":0,"_tDur":0,"labels":{},"smoothChildTiming":true,"autoRemoveChildren":true,"_sort":false,"_dirty":0,"_zTime":0.006,"_tTime":0.537,"_time":0.537,"_act":false,"_initted":1},"core":{},"version":"3.3.1"},"gsap":{"utils":{},"effects":{},"ticker":{"time":0.537,"frame":5,"_listeners":[null]},"plugins":{},"globalTimeline":{"vars":{"sortChildren":false,"defaults":{"duration":0.5,"overwrite":false,"delay":0},"autoRemoveChildren":true,"id":"root","smoothChildTiming":true},"_delay":0,"_repeat":0,"_ts":1,"_dur":0,"_tDur":0,"labels":{},"smoothChildTiming":true,"autoRemoveChildren":true,"_sort":false,"_dirty":0,"_zTime":0.006,"_tTime":0.537,"_time":0.537,"_act":false,"_initted":1},"core":{},"version":"3.3.1"}} customtest.js:36 Uncaught TypeError: gsap.to is not a function at customtest.js:36:14 at Object.execCb (require.js:1696:33) at Module.check (require.js:883:51) at Module.<anonymous> (require.js:1139:34) at require.js:134:23 at require.js:1189:21 at each (require.js:59:31) at Module.emit (require.js:1188:17) at Module.check (require.js:938:30) at Module.enable (require.js:1176:22) (anonymous) @ customtest.js:36 execCb @ require.js:1696 check @ require.js:883 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 enable @ require.js:1176 init @ require.js:788 (anonymous) @ require.js:982 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 enable @ require.js:1176 init @ require.js:788 (anonymous) @ require.js:1014 (anonymous) @ require.js:134 runCallbacks @ domReady.js:24 callReady @ domReady.js:35 pageLoaded @ domReady.js:50 setTimeout (async) (anonymous) @ domReady.js:94 execCb @ require.js:1696 check @ require.js:883 enable @ require.js:1176 init @ require.js:788 callGetModule @ require.js:1203 completeLoad @ require.js:1590 onScriptLoad @ require.js:1717 load (async) req.load @ require.js:1942 load @ require.js:1685 load @ require.js:834 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 callPlugin @ require.js:1098 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 (anonymous) @ require.js:1161 (anonymous) @ require.js:134 each @ require.js:59 enable @ require.js:1113 init @ require.js:788 (anonymous) @ require.js:1460 setTimeout (async) req.nextTick @ require.js:1815 localRequire @ require.js:1449 requirejs @ require.js:1797 (anonymous) @ customtest.js:29 current_location_modal.js:11 custom-checkout location/index/index/ current_location_modal.js:21 test modal compat.js:43 Fallback to JQueryUI Compat activated. Your store is missing a dependency for a jQueryUI widget. Identifying and addressing the dependency will drastically improve the performance of your site. (anonymous) @ compat.js:43 execCb @ require.js:1696 check @ require.js:883 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 enable @ require.js:1176 init @ require.js:788 (anonymous) @ require.js:1014 (anonymous) @ require.js:134 (anonymous) @ mixins.js:129 execCb @ require.js:1696 check @ require.js:883 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 enable @ require.js:1176 init @ require.js:788 (anonymous) @ require.js:1014 (anonymous) @ require.js:134 (anonymous) @ mixins.js:129 execCb @ require.js:1696 check @ require.js:883 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 enable @ require.js:1176 init @ require.js:788 (anonymous) @ require.js:1014 (anonymous) @ require.js:134 (anonymous) @ mixins.js:129 execCb @ require.js:1696 check @ require.js:883 (anonymous) @ require.js:1139 (anonymous) @ require.js:134 (anonymous) @ require.js:1189 each @ require.js:59 emit @ require.js:1188 check @ require.js:938 enable @ require.js:1176 init @ require.js:788 callGetModule @ require.js:1203 completeLoad @ require.js:1590 onScriptLoad @ require.js:1717 load (async) req.load @ require.js:1942 load @ require.js:1685 load @ require.js:834 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 (anonymous) @ require.js:1161 (anonymous) @ require.js:134 each @ require.js:59 enable @ require.js:1113 init @ require.js:788 (anonymous) @ require.js:1460 setTimeout (async) req.nextTick @ require.js:1815 localRequire @ require.js:1449 load @ mixins.js:128 (anonymous) @ require.js:1095 (anonymous) @ require.js:134 on @ require.js:517 callPlugin @ require.js:955 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 (anonymous) @ require.js:1161 (anonymous) @ require.js:134 each @ require.js:59 enable @ require.js:1113 init @ require.js:788 callGetModule @ require.js:1203 completeLoad @ require.js:1590 onScriptLoad @ require.js:1717 load (async) req.load @ require.js:1942 load @ require.js:1685 load @ require.js:834 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 (anonymous) @ require.js:1161 (anonymous) @ require.js:134 each @ require.js:59 enable @ require.js:1113 init @ require.js:788 (anonymous) @ require.js:1460 setTimeout (async) req.nextTick @ require.js:1815 localRequire @ require.js:1449 load @ mixins.js:128 (anonymous) @ require.js:1095 (anonymous) @ require.js:134 on @ require.js:517 callPlugin @ require.js:955 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 (anonymous) @ require.js:1161 (anonymous) @ require.js:134 each @ require.js:59 enable @ require.js:1113 init @ require.js:788 callGetModule @ require.js:1203 completeLoad @ require.js:1590 onScriptLoad @ require.js:1717 load (async) req.load @ require.js:1942 load @ require.js:1685 load @ require.js:834 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 (anonymous) @ require.js:1161 (anonymous) @ require.js:134 each @ require.js:59 enable @ require.js:1113 init @ require.js:788 callGetModule @ require.js:1203 completeLoad @ require.js:1590 onScriptLoad @ require.js:1717 load (async) req.load @ require.js:1942 load @ require.js:1685 load @ require.js:834 fetch @ require.js:824 check @ require.js:856 enable @ require.js:1176 enable @ require.js:1557 (anonymous) @ require.js:1161 (anonymous) @ require.js:134 each @ require.js:59 enable @ require.js:1113 init @ require.js:788 (anonymous) @ require.js:1460 setTimeout (async) req.nextTick @ require.js:1815 localRequire @ require.js:1449 requirejs @ require.js:1797 (anonymous) @ (index):418

Hi @adapfityDesigns and welcome to the GSAP Forums! Just use the tickerDirection boolean in your mouseleave event handler to conditionally set the timescale to either 1 (forward) or -1 (backwards): link.addEventListener("mouseleave", () => gsap.to(tl, { // Conditionally set the timescale timeScale: tickerDirection ? -1 : 1, overwrite: true })); That seems to work the way you intend. Hopefully this helps. Happy Tweening!

thanks for the additional info. I believe this has to do with overwriting. You are creating conflicting tweens and my guess is that when played in reverse the animation that animates from x:0, y:0 to x:0, y:0 is winning the battle and thus you see the box jump back to the initial start state. If you set overwrite:"auto" on tweens 2 and 3 then: tween 2 will kill the y portion of tween 1 tween 3 will kill the x portion of tween 1 I think this works for this exact scenario you have https://codepen.io/snorkltv/pen/PoLZZaE?editors=0010 If you set overwrite:true then tween 3 will kill BOTH tween 1 and tween 2. You can give it a try to see how that looks (bad) from the docs https://gsap.com/docs/v3/GSAP/Tween I also think this video will help with overwrite modes I know you are saying that the tweens are automatically generated, but my advice would be to add whatever logic necessary to avoid creating conflicting tweens in the first place. Hopefully overwrite:auto solves the problem Carl

Hi, Thank you again for clarifying on the issues in the implementation of logic. The solution works well in the CodePen, but I observed a strange issue with Pinned container in my actual project. Unfortunately this does not happen in CodePen and I don't know how can I explain it well enough for you to understand. But let me try. Whenever I am scrolling with container pinned, and like 1 or 2 of the 4 cards have already animated (to the top), if I refresh the page at that very point, and when the page reloads, it doesn't seem to start from that particular point - say for example, when container gets pinned and all the cards animate to the top with stagger, and then I scroll further to animate first card to the top, then I refresh the page, it logs card's index "0 enter" but the card will be still there. And when I scroll further, the next card starts animating with the first card still there. To investigate on this issue I commented out all the code keeping only the pinned trigger, initial set method for cards and the main ScrollTrigger for staggered animation of cards like below mentioned code. To my surprise, this didn't work as well - it works fine when I have not scrolled to the pinned section and reload, but when I try to reload the page after scrolling into the pinned section the trigger markers jump to some unimaginable point(usually at the very top of the page), not at all at the same point before reload. And the cards animation stops there because the it will never hit the trigger. Upon carefully observing this, I saw a strange jumping behavior of scrollbar thumb whenever page reloads, it goes up once and then come to the original position or vice versa sometimes. In CodePen it always stayed at the top on refresh, although I don't have any specific code to scroll to the top on reload, but this is how it is. To check it further, I commented-out the pinned container ScrollTrigger and the reloaded the page - to my surprise, this time the scroll thumb was not jumping up and down at all, it stayed there no matter whatever the scroll position is. So, pinning the container is causing the issue here. I hope I made myself clear about the issue I am facing here, unfortunately I am not able to show this very awkward behavior with pinned sections. And I do not have any clue on how do I resolve this. Please help. ScrollTrigger.create({ id: "pinned", trigger: '.pinned', start: 'top top', pin: true, end: "+=" + pinDistance, }); gsap.set(cards, { y: 1000, rotate: (index) => -angle * index, zIndex: (index) => cards.length - index, }); ScrollTrigger.create({ trigger: '.cards_wrap', start: 'top top', end: 'bottom bottom', // markers: true, onEnter() { console.log("enter"); gsap.to('.card', { y: 0, duration: 1, delay: 0.5, stagger: { amount: 0.5 }, overwrite: true, }); }, onLeaveBack() { console.log("leave back"); gsap.to('.card', { y: 1000, duration: 1, stagger: { amount: 0.5, }, overwrite: true }); } });

I noticed several problems: It's extremely inefficient code, performance-wise. Every single time the user scrolls at all, you're creating new tweens on the same elements, over and over and over again, without even overwriting (so they'd be fighting for control). At the very least, I'd recommend setting overwrite: "auto" or overwrite: true, but honestly I think I'd re-engineer the entire approach so you're not constantly doing that on every scroll. It's much more efficient to animate to scale: 0.9 or scale: 1 instead of transform: "scale(0.9)" or transform: "scale(1)". And instead of constantly creating new tweens, if your goal is to just go back and forth between those two values, why not just create a single tween instance and then play() or reverse() it? You created a "timeline" variable and you only put a set() call in it, so it literally has no duration at all. Well, it's 0 seconds. And then you're restarting that but I assume you're asking us how you could smoothly go back to that initial value, right? If so, just create a tween that goes to that value. You're not doing any cleanup of your Lenis stuff. Beware that React calls hooks TWICE in strict mode. So be careful - you might accidentally be creating redundant Lenis stuff. That's not a GreenSock product, so we can't really support it here. It's very difficult to offer advice when we don't have a minimal demo. If you'd like more help, please make sure you create a minimal demo that clearly illustrates the issue. That'll GREATLY increase your chances of getting a good answer. Here's a starter template with Next.js that you can fork: https://stackblitz.com/edit/nextjs-5cm4qn

Yep, it's all pure logic issues. Imagine you scroll down and then back up rather quickly. So your onLeaveBack() fires for the first card: gsap.timeline() .to(card, { duration: 1, ... }).to(card, { y: 0, duration: 0.8, overwrite: "auto" }, '-=0.2'); That means the card's "y" won't start animating for 0.8 seconds. But we keep scrolling back to where this gets triggered: gsap.to('.card', { y: 1000, duration: 1, stagger: { amount: 0.5, }, overwrite: "auto" }); So this one starts IMMEDIATELY animating that same element's y back to 1000 (this is where we want it to land at this point), and overwrite: "auto" means that it'll only find IN-PROGRESS tweens of the same property of the same element and kill those...but remember that the previous one we started would WAIT 0.8 seconds before beginning...so it hasn't started yet, thus it won't get overwritten. 0.8 seconds later, that [old] tween starts animating card.y back to 0! See the problem? You could set overwrite: true on the main staggered animation so that it immediately overwrites any tweens of that same element, regardless of if they're in-progress or not. Again, this is all just logic stuff. I hope that clears things up.

Yeah, that's a logic thing in your code - you've set it up so that you've got multiple tweens running on the same element in totally different directions at the same time. No bueno. Also, keep in mind that .to() and .from() tweens use the CURRENT value for one of the ends of the to/from animation. Those get recorded when the tween runs for the first time. For example, if obj.x is at 0 to begin and you animate to x: 100, it will use the current value (0) as the start. But if another tween is animating obj.x when that 2nd tween first renders, maybe obj.x is at 12.245 at that particular moment - that 2nd tween will lock in the starting value as 12.245 and animate to 100. If you reverse() that tween, it'll of course end at 12.245. If you really need to have overlapping/conflicting tweens like that, I'd recommend setting it up in a more dynamic way so that it'll just always animate to the most recent end value that you want, and set overwrite: "auto" (or true, depending on what effect you want). Maybe something like this: https://codepen.io/GreenSock/pen/eYXpyYx?editors=0010 I hope that helps. Have fun!

Hi @Federico2811 welcome to the forum! The issue here is your CSS position fixed and probably also bootstrap which adds scroll-behavior: smooth; which you'll need to overwrite with scroll-behavior: auto !important; (they either put it on the body or the html or everything I don't know anymore) Next you're overwriting the default scroll of the browser, you need to be a really skilled web developer and 100% know what you're doing if you want to take that control away from the browser and roll you're own! I've been doing this for over 10 years now and I've never needed to overwrite the scroll in that way. Here is your demo with the overflow and position properties set back to normal and now ScrollTrigger works like a charm. If I was you I would restructure your layout a bit and pin the element that contains all your elements instead of creating position: fixed; elements you can even pin the body like so pin: "body", but better is to create an element, something like #pinMe an use that as the pin. As you've found you can indeed set a different scroller in ScrollTrigger, but there was to much code in your minimal demo to figure out how that would work, my advise first do it the 'normal; way, by having the browser handle the scrolling, before you do your custom scroll and again you really need to know what you're doing if you want to go that route. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ExMjqvV?editors=1010

Welcome to the forum! In that video you attached, it very much looks like you have CSS transitions applied on elements that are affected by ScrollTrigger. Themes like Elementor often apply something like transition: all .3s to lots of elements - those will interfere with GSAP, so you'll have to make sure to overwrite them in your custom CSS. On top of that I would also make sure to overwrite the scroll-behaviour to auto because if I recall correctly, Elementor will by default set it to smooth, which can also interfere with your scroll related JS at some point. I hope this will help already. If it doesn't, unfortunatelly we won't be able to help without a minimal demo clearly demonstrating your issue. Good luck.

The direction of Marquee changes on hovering when scrolling upwards but it works fine when scrolling downwards. Somebody pls help me with this. 🙃 CodePen File attached! HTML: <div class="marquee"> <div class="marquee-inner"> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> <div class="marquee-part"> Technology Redefined <div class="shape"></div> </div> </div> </div> JS let currentScroll = 0; let isScrollingDown = true; const marquee = document.querySelector('.marquee'); const marq = document.querySelector('.marquee-part'); const mrq = document.querySelector('.marquee-inner'); const loop = horizontalLoop(mrq, { paused: false, repeat: -1, }); marquee.addEventListener("mouseenter", () => { gsap.to(loop, { timeScale: 3, ease: "power1.in" }); }); marquee.addEventListener("mouseleave", () => { gsap.to(loop, { timeScale: 1 }); }); window.addEventListener("scroll", function() { if(window.pageYOffset > currentScroll){ isScrollingDown = true; }else{ isScrollingDown = false; } gsap.to(loop, { timeScale: isScrollingDown ? 1 : -1, }).totalProgress(1); currentScroll = window.pageYOffset; }); /*---------------HORIZONTAL LOOP FN-------------------*/ function horizontalLoop(items, config) { items = gsap.utils.toArray(items); config = config || {}; let tl = gsap.timeline({repeat: config.repeat, paused: config.paused, defaults: {ease: "none"}, onReverseComplete: () => tl.totalTime(tl.rawTime() + tl.duration() * 100)}), length = items.length, startX = items[0].offsetLeft, times = [], widths = [], xPercents = [], curIndex = 0, pixelsPerSecond = (config.speed || 1) * 100, snap = config.snap === false ? v => v : gsap.utils.snap(config.snap || 1), // some browsers shift by a pixel to accommodate flex layouts, so for example if width is 20% the first element's width might be 242px, and the next 243px, alternating back and forth. So we snap to 5 percentage points to make things look more natural totalWidth, curX, distanceToStart, distanceToLoop, item, i; gsap.set(items, { // convert "x" to "xPercent" to make things responsive, and populate the widths/xPercents Arrays to make lookups faster. xPercent: (i, el) => { let w = widths[i] = parseFloat(gsap.getProperty(el, "width", "px")); xPercents[i] = snap(parseFloat(gsap.getProperty(el, "x", "px")) / w * 100 + gsap.getProperty(el, "xPercent")); return xPercents[i]; } }); gsap.set(items, {x: 0}); totalWidth = items[length-1].offsetLeft + xPercents[length-1] / 100 * widths[length-1] - startX + items[length-1].offsetWidth * gsap.getProperty(items[length-1], "scaleX") + (parseFloat(config.paddingRight) || 0); for (i = 0; i < length; i++) { item = items[i]; curX = xPercents[i] / 100 * widths[i]; distanceToStart = item.offsetLeft + curX - startX; distanceToLoop = distanceToStart + widths[i] * gsap.getProperty(item, "scaleX"); tl.to(item, {xPercent: snap((curX - distanceToLoop) / widths[i] * 100), duration: distanceToLoop / pixelsPerSecond}, 0) .fromTo(item, {xPercent: snap((curX - distanceToLoop + totalWidth) / widths[i] * 100)}, {xPercent: xPercents[i], duration: (curX - distanceToLoop + totalWidth - curX) / pixelsPerSecond, immediateRender: false}, distanceToLoop / pixelsPerSecond) .add("label" + i, distanceToStart / pixelsPerSecond); times[i] = distanceToStart / pixelsPerSecond; } function toIndex(index, vars) { vars = vars || {}; (Math.abs(index - curIndex) > length / 2) && (index += index > curIndex ? -length : length); // always go in the shortest direction let newIndex = gsap.utils.wrap(0, length, index), time = times[newIndex]; if (time > tl.time() !== index > curIndex) { // if we're wrapping the timeline's playhead, make the proper adjustments vars.modifiers = {time: gsap.utils.wrap(0, tl.duration())}; time += tl.duration() * (index > curIndex ? 1 : -1); } curIndex = newIndex; vars.overwrite = true; return tl.tweenTo(time, vars); } tl.next = vars => toIndex(curIndex+1, vars); tl.previous = vars => toIndex(curIndex-1, vars); tl.current = () => curIndex; tl.toIndex = (index, vars) => toIndex(index, vars); tl.times = times; tl.progress(1, true).progress(0, true); // pre-render for performance if (config.reversed) { tl.vars.onReverseComplete(); tl.reverse(); } return tl; }

Hi @benrbnt. Yes, this is definitely expected behavior. From the docs: In your demo, the animations that haven't started yet aren't "active", thus they'd be immune from the overwrite behavior. It is not intended to find all future animations that haven't even started yet and overwrite those; it's only for ACTIVE (in-progress) animations. It could be quite problematic if you've got a whole bunch of animations that do various things to a particular element in the future and then you start a tween now that has overwrite: "auto" that nukes all future tweens, even ones that haven't started or are paused or whatever. See the problem? You can simply do overwrite: true if you'd like to nuke all those instead. Or you can use gsap.killTweensOf() to target just specific properties, like gsap.killTweensOf(myObject, "opacity,y"); Does that clear things up? And thanks for being a Club GSAP member! 💚

Hello! I just faced a problem where overwrite: 'auto', is not overwriting pending staggered items. In the codepen, you can easily reproduce by clicking the show button and then quickly the hide button (while the "show" timeline is still animating), or by pressing the simulate button (which show then hide quickly). The issue is that the elements currently showing using a stagger, are not going to be "overwrited" by the hiding timeline that is not using any stagger. I guess that's because the overwrite: 'auto' of the "show" will be applied when the staggered items start animating, so it will overwrite the tween applied in the "hide". I I believe that this should not behave like that, but maybe I am wrong and this is the expected behaviour. Waiting for your answer! Thanks !

Hi, By default a GSAP Tween/Timeline doesn't return a promise, it returns a GSAP instance. You have to attach the then() method in order to treat it as a promise inside an async/await block: const tl1 = gsap.timeline().then(() => {}); const tl2 = gsap.timeline(); console.log(tl1);// -> Promise {<pending>} console.log(tl2);// -> Timeline {vars: {…}, _delay: 0, _repeat: 0, _ts: 1, _dur: 0, …} This seems to work the way you intend: gsap.defaults({ overwrite: 'auto', onInterrupt:function() { this.progress( 1 ); // force progress 100%, kill la promise pour les async await. } }); // test gsap promise all setTimeout( async () => { console.log( '💚' ); const obj = { x:0 }; const tl1 = gsap.timeline().to( obj, { x:8 }).then(() => {}); const tl2 = gsap.timeline().to( obj, { x:5 }).then(() => {}); // comment me for resolve Promise.all setTimeout( async () => { await tl1; console.log( '💚1' ); await Promise.all([ tl1 ]); console.log( '💚2' ); // never fired if tl2 executed }, 10 ); }, 1000 ); Hopefully this helps. Happy Tweening!

hi, i have issue with promise, is there any way to resolve `await Promise.all([ tl1 ])` when we overwrite a instance properties ? Some of my promise wait for animations but never resolve because they get crush somewhere in another child actions. ```ts gsap.defaults({ overwrite: 'auto', onInterrupt:function() { this.progress( 1 ); // force progress 100%, kill la promise pour les async await. } }); // test gsap promise all setTimeout( async () => { console.log( '💚' ); const obj = { x:0 }; const tl1 = gsap.timeline().to( obj, { x:8 }); const tl2 = gsap.timeline().to( obj, { x:5 }); // comment me for resolve Promise.all setTimeout( async () => { await tl1; console.log( '💚1' ); await Promise.all([ tl1 ]); console.log( '💚2' ); // never fired if tl2 executed }, 10 ); }, 1000 ); ``` is a `onInterrupt` bug ? or maybe we have another global cb for handle those case ? thanks

Sorry for the confusion, it's a bit hard to explain. In short, if you ignore the safari problem from the first pen above, this is the animation I want in the second pen. The second pen is currently pretty much the same as the first one but without the radius animation. I have updated the second pen with the problem I mentioned above, just added two animations at the end of the timeline to change the radius of the shape. You can currently see that when scrolling down the radius doesn't quite animate like the first pen and also when scrolling up (after you've passed the animation) you can see the overwrite problem I mentioned and the radius being janky. I'm not sure if the problem is still clear tho 🤔

I don't have a lot of time to dig into this right now, but I'm having a hard time understanding what exactly the problem is and what you mean by "...but without success because of overwrite problems." When I remove all the GSAP code and just look at your demo in Safari, the clip-path doesn't work at all. I don't see the video, period. Weren't you trying to do this without clip-path because Safari botches it so much? Have you thought of just using a normal <div> with overflow: hidden and a border radius? And then you could animate its height/width and counter-animate the top/left of the absolutely positioned video child? Just an idea; I'm not sure how hard it'd be. But if you could try to be SUPER clear about exactly what the problem is and how we can reproduce it, that'd be swell.

Hello. I had previously a problem in Safari when using clip-path to animate a shape with scrolltrigger. Thread here: So I went ahead and over engineered a solution that solves the problem just with a small issue. The solution pen: https://codepen.io/marcorodriguesdev/pen/MWLPmpG Now I need to animate the shape Rect rx value from 40 to around 280 (when it hits around 30% of the animation scrolled) and back to 40 again. The main goal here is to make the animation feel like this pen: https://codepen.io/marcorodriguesdev/pen/WNPydEZ (pen from previous issue). If you take a closer look, you can see the radius animates while the shape is decreasing size until it's a full pill shape. I have tried animating the svg rect rx property with the position parameter but without success because of overwrite problems.

Hi, Your demo is far too convoluted and has a lot of HTML and not mention CSS (more than 20,000 lines!). On top of that your JS is a bit hard to follow and has a bunch of commented out content in it. The best I can achieve is this: https://codepen.io/GreenSock/pen/rNPZKdb The reason is not working as expected could be the layout or CSS you have in place, but we don't have the time resources in these free forums to provide general consulting services or comb through hundreds of lines of code trying to find issues for our users. As you can see the demo I posted is using a magic number (that's far from doing actual magic) in order to accommodate for all the padding, margins, etc. on each section, but still is not accurate enough to achieve the sections landing where they should: const heights = sections.map((section, i) => { if (i) { cummulativeHeight += section.offsetHeight; return cummulativeHeight - 100; } else { return 0; } }); links.forEach((link, i) => { link.addEventListener("click", (e) => { e.preventDefault(); const target = st.start + heights[i]; console.log(target) gsap.to(window, { ease: "none", scrollTo: target, overwrite: "auto" }); }); }); The idea is to use the ScrollTrigger instance's start point and add the height of each section to that (plus all that padding, margin, etc.) to get the final value, but unfortunately those calculations are not 100% accurate, most likely because of the layout structure you have in place. Hopefully this serves as a good starting point. If you keep having issues, please reduce the code of your demo to a bare minimum, just a few colored divs, as little CSS as possible and only the relevant JS in order to replicate the issue. Happy Tweening!

Believe me, I have scoured this forum for the answer, and have found numerous similar forum posts, but none of them have solved my issue. I have a set of <button>'s which work as a nav to scroll you to the pinned section in a vertically pinned GSAP container. The scrolling behavior is buggy. I believe it's due to the transform position screwing up GSAP. If I click a nav item one time, I will get the wrong position (the position depends on where I am, because I believe the transform value is a culprit here). If I keep clicking repeatedly, it gets closer and closer to the correct position, until it ultimately ends up in the right position. I've tried doing some math to provide an exact pixel number for GSAP to scrollto, but I have yet to succeed. I even tried implementing the getScrollLookup function in this thread gsap.registerPlugin(ScrollToPlugin, ScrollTrigger); let tlPosts = document.querySelector(".homepage-explore .tex-wrapper"), fullCont = document.querySelector(".homepage-explore"), imageSections = gsap.utils.toArray(".homepage-explore .image-slide"), sections = gsap.utils.toArray(".homepage-explore .explore-item-container"), getMaxHeight = () => sections.reduce((val, section) => val + section.offsetHeight, 0), maxHeight = getMaxHeight(), tl = gsap.timeline(); let st = ScrollTrigger.create({ animation: tl, trigger: ".homepage-explore", pin: true, start: 'top top', scrub: 1, end: () => `+=${document.querySelector('.tex-wrapper').offsetHeight - window.innerHeight}`, invalidateOnRefresh: false }); tl.to(sections, { y: () => window.innerHeight - (maxHeight + 650), duration: 1, ease: "none" }); const sectionIndex = parseInt(this.getAttribute("data-section-index")); const scrollToSectionButtons = document.querySelectorAll(".homepage-explore .explore-button-nav"); let links = gsap.utils.toArray(".homepage-explore .explore-button-nav"), linkTargets = links.map(link => $(".explore-item-container").eq(link.getAttribute("data-section-index"))[0]); // const targetSection = sections[sectionIndex]; links.forEach((link, i) => { let target = linkTargets[i]; console.log(target); link.addEventListener("click", e => { ScrollTrigger.refresh(); console.log(getScrollLookup(target, "top top")); let getScroll = getScrollLookup(target, "top 125px"); e.preventDefault(); gsap.to(window, { duration: 1, scrollTo: getScroll(target), overwrite: "auto" }); }) }); Basically what you see here is that "explore-button-nav" is the class of each <button> which should be what I'm clicking to scroll us to the specific pinned section. What am I doing wrong here? I can create a minified example if needed. ".tex-wrapper" is the direct parent of the 4 pinned sections that I'm trying to scroll to (there are 4 ".explore-button-nav"'s which correlate to the 4 pinned sections directly inside of ".tex-wrapper".

Hi, Another alternative is to use overwrite in your mouse enter/leave animations so GSAP kills any animation that is affecting the same element and property: https://gsap.com/docs/v3/GSAP/Tween#special-properties overwrite If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false. This code seems to work the way you expect: divs.forEach((div) => { // Select the span element inside the div const span = div.querySelector("span"); gsap.set(span, { scaleY: 0 }); // Add a mouseenter event listener to the div div.addEventListener("mouseenter", () => { // Animate the height of the span element from 0% to 100% gsap.to(span, { scaleY: 1, transformOrigin: "bottom center", ease: "power3.out", overwrite: true, duration: 0.5 }); }); // Add a mouseleave event listener to the div div.addEventListener("mouseleave", () => { // Animate the height of the span element from 100% to 0% gsap.to(span, { scaleY: 0, transformOrigin: "bottom center", ease: "power4.in", overwrite: true, duration: 0.4 }); }); }); Hopefully this helps. Happy Tweening!

I noticed several problems: You're altering the raw attribute values for the <line> elements which fundamentally changes their bounding box and consequently their transform origin calculations. I think it'd be much cleaner to either animate the attributes or the transforms, not both. You could even translate them to <path> elements and use morphSVG (well, if you're a Club GSAP member). You're setting duration and overwrite on a timeline object, but that's not a thing. Did you mean to set {defaults: { duration: .6, overwrite: "auto"}} You created conflicting tweens (wastefully). One tween in the timeline animates ALL the hand rotations, and then you also have another tween for each one of the hands animating them to a different rotation. Same goes for opacity. svgOrigin is not something you animate. It's almost NEVER what people want to do, like if they set .to(".hand", {rotation: 360, svgOrigin: "100 100"}) they just want it to rotate around that spot (so set the svgOrigin immediately) rather than slowly over time moving svgOrigin to that spot. If you really need to animate that (and again, almost nobody ever actually needs to do that), you could use a proxy object and apply it in an onUpdate. You had 3 values in the svgOrigin, like "100 100 90" but that's not valid. SVGs can only be 2D (so 2 values, not 3). I'd probably approach it more like this: https://codepen.io/GreenSock/pen/WNPdbjB I hope that helps.

Hi there. I recently came across a problem and I can't seem to figure out what is causing the issue. My animations do not work unless a hard reload occurs and the component of the page is mounted. For whatever reason, this particular animation does not work but my other animations do. One animation contains ScrollTrigger and it works completely fine unlike the one I am having issues with. I've posted a snippet of my code below and would appreciate any help given. The positioning of the markers are wrong when the component has mounted and when the window resizes it snaps to the right location. Although, when this occurs, the animation does not function. All my animations go into one single component file and are initialized with an import and a call function. Thanks so much. No codepen because this problem seems hard to replicate without having set up multiple pages with unmounting and remounting. export const SplitWord = () => { useEffect(() => { const ctx = gsap.context(() => { const animateIn = (element) => { const textsplit = new SplitType(element, { types: 'words' }); const words = textsplit.words; const staggerValue = element.classList.contains('long') ? 0.04 : 0.02; gsap.set(words, { opacity: 0 }); return gsap.fromTo( words, { x: -10, rotationX: 45, opacity: 0 }, { x: 0, rotationX: 0, opacity: 1, duration: 2, stagger: staggerValue, ease: 'power3.out', overwrite: true, } ); }; gsap.utils.toArray('.splitword').forEach((element) => { let animation; ScrollTrigger.create({ trigger: element, start: 'top top', onEnter: () => { if (!animation || !animation.isActive()) { animation = animateIn(element); } }, scrub: true, markers: true, }); }); }); return () => ctx.revert(); }, []); };