Search the Community

Thanks for the reduced test case, @emsee. It is a bit of a tricky scenario. Solution: add these lines after you enable() the ScrollTrigger: g.scrollTrigger.refresh(); // re-calculates start/end gsap.set(g, {progress: g.scrollTrigger.progress, overwrite: true}); // sets the progress immediately instead of scrubbing, and overwrites the scrubbing tween // or you could replace the line above with: gsap.getTweensOf(g)[0].progress(1); When you enable() a ScrollTrigger, it automatically refreshes its start/end values to ensure they're correct, but timelines have to wait one tick to do that (I'll spare you the lengthy explanation, but just ask if you want one). Anyway, when you disabled the ScrollTrigger, it was at a progress of around 0.1 and then when you re-enable it, it must scrub to the new value (0.5) which is what you were seeing. To get the behavior you want, we've gotta basically make the progress jump there instead of tweening there. So we refresh() to ensure the start/end are set correctly, then we directly set the progress and use an overwrite: true in order to overwrite the scrubbing tween. Does that resolve things for you? https://codepen.io/GreenSock/pen/e500c7ad56ff97f35149ba60d194e521

Hey, folks! My team over at The DataFace has this nifty Svelte action powered by GSAP that we've been using for the past few projects. It blends a few approaches that we've seen in the forums. I thought we'd share the wealth with a few key examples in this repl. We have a more complex version that handles timeline positioning that I can share once it's refined. import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger); export default (node, { type, children, scrollTrigger, ...args }) => { let targets = children ? node.children : node; let timelineArgs = scrollTrigger ? { scrollTrigger: { trigger: node, start: 'top center', ...scrollTrigger } } : {}; let timeline = gsap.timeline(timelineArgs)[type](targets, { ease: 'power2.out', overwrite: true, ...args }); return { update(params) { timeline.duration(params.duration); }, destroy() { timeline.killTweensOf(targets); } } };

Yep, we expected there'd be some speed bumps during the transition. Just keep in mind: No other animation engine I know of has ever done auto-overwriting (or any kind of overwriting that I can remember). So having overwrite: false as the default seems common/expected in the greater context (outside legacy GSAP) There's a performance penalty to overwrite: "auto". I'm not excited about imposing that on everyone, especially since I'd guess that 95%+ of users don't create conflicting tweens to begin with. In other words, a tiny portion of the audience benefits from something that 100% would pay the performance penalty for. Frankly, I'm a bit uncomfortable making it EASIER for people to create conflicting animations (without even realizing it) In some ways, I see it as a GOOD thing that some people have run into issues with their animations due to their conflicting tweens - yes, it's one more question in the forums for us moderators to answer, but ultimately it helps users understand what's going on and why they should avoid creating conflicts (or at least how to mitigate them intentionally if they must create them to begin with). I'm not totally closed off to changing the default to "auto", but I think we need to push through at least another month or two and let people settle in a bit. It seems premature to revert just because some people have stumbled. Remember, plenty of people have stumbled on the old default overwrite:"auto" behavior and wondered why their tweens got killed. It isn't as if overwrite: "auto" is going to solve everything. Wouldn't that be the case with any other animation library as well? And I'm curious - what are the common scenarios that tend to trip you up? I think it'd help me to understand the context a bit. In other words, when does the overwrite: false behavior tend to catch you off-guard?

Hi, The issue is not really about overwritting, that's a completely different situation. Basically what's happening here is that you have different event handlers battling for control to play/reverse the same GSAP instance, nothing more. A simple boolean and some conditional logic seems to solve the issue, in order to prevent ScrollTrigger's update callback from controlling the instance: https://codepen.io/GreenSock/pen/Yzvdpog Here you can read more about overwrite: https://greensock.com/docs/v3/GSAP/Tween/vars Let us know if you have more questions. Happy Tweening!

(See: http://forums.greensock.com/topic/7184-oncomplete-event-does-not-fired/) "If you create a competing tween of the same object that's tweening the same property, it will overwrite the previous one by default, and if that previous one has no tweening properties left, it will also kill the tween so that its onComplete doesn't fire." Sometimes this can be very annoying and can (potentially) break your project since there can be a lot of logic dependent on the onComplete call of a tween. Could you please add the following overwrite options: 1. Don't kill tweens that doesn't have properties, but still have an onComplete (or an other method) handler. 2. Throw an error when you create a second tween on an objects, when the first isn't finished yet.

I'm not entirely sure how you want it to work, but it may be as simple as: ScrollTrigger.create({ trigger: el, start: 'top 50%', end: (self) => '+=' + el.offsetHeight, onToggle: (self) => { if (self.isActive) { gsap.to('body', { backgroundColor: color || 'transparent', duration: 0.6, overwrite: 'auto', }); } }, }); The way it was set up in Rodrigo's demo made the ScrollTriggers overlap which would cause the tweens to fight with each other during the overlaps.

Hi @eliphino and welcome to the GreenSock forums! First, thank you for being a Club GreenSock member and supporting GreenSock! ? I think this approach works better, since you are also adding the event listener to the window object on every loop: window.addEventListener("mousemove", e => { gsap.to(targets, { duration: 0.35, x: e.pageX, y: e.pageY, ease: "none", overwrite: "auto", stagger: 0.035, }); }); Also I'd recommend you to use less elements, since adding a bunch of them tends to look a bit off, but I'll leave that to your better judgement and the needs of your project. Let us know if you have more questions. Happy Tweening!

If you want to overwrite the default scroll behavior of the browser you'll need to have a clear goal with it and know what you're doing. If you do not have this or you are new to coding I would not recommend doing this. ScrollTrigger taps in the to default scroll behavior. If you have some other element you want to use as the scroll container you can define a scroller (see the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger) String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. If you instead just want to watch for the scroll event you can also use the Observer plugin https://greensock.com/docs/v3/Plugins/Observer Instead of showing the issue you're having can you maybe explain what your goal is? If we know what it is you want to do it will be easier to help you with an appropriate solution.

Hi @Rodrigo, Thank you for your detailed answer! All clear. I finally managed to do it but without using the snap functionality, cause I needed to scroll up and down. The solution was based on another example found on the forum by @ZachSaucier (the codepen : https://codepen.io/GreenSock/pen/NWxNEwY , and the thread: Here is the (a) solution : let panels = gsap.utils.toArray('.block-scroll'), scrollTween; function goToSection(i) { scrollTween = gsap.to(window, { scrollTo: {y: i * innerHeight, autoKill: false}, duration: 1, ease: Power3. easeOut, onComplete: () => scrollTween = null, overwrite: true }); } panels.forEach((panel, i) => { ScrollTrigger.create({ //markers: true, trigger: panel, start: 'top 75%', end: 'top 25%', onEnter: self => { self.isActive && !scrollTween && goToSection(i+1); console.log(panel); }, onEnterBack: self => { self.isActive && !scrollTween && goToSection(i); } }); }); Anyway, thanks for your quick answer.

Hi and welcome to the GreenScok forums. After reviewing your file, we have some advice to you as it seems you're not very familiar with some key-core concepts about GSAP. First and most important in order to simplify and speed up the support process, we advise users that they create a reduced sample in codepen that illustrates the issue they are having. To learn how to do that please look at this post and video from @Carl Second, among many amazing tools, GSAP has the CSS Plugin, that takes cares of any non-experimental CSS property you want to animate in a DOM element. Having said that, in your file we could spot quite a few of these: var tween = TweenMax.to(sec, 1, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 421.8, 1010.15, 0, 1)'}); var tween2 = TweenMax.to(sec, 1, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1004.58, 1011.1, 0, 1)'}); var tween3 = TweenMax.to(sec, 3, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1008.7, 3100, 0, 1)'}); Now for what I see mostly you're applying a 2D translate in these cases. Well GSAP has you covered, all you need is to pass x and y values to it: var tween = TweenMax.to(sec, 1, {x: 421.8, y: 1010.15}); var tween2 = TweenMax.to(sec, 1, {x: 1004.58, y: 1011.1}); var tween3 = TweenMax.to(sec, 3, {x: 1008.7, y: 3100}); Quite simpler and cleaner, right? If your concern is passing the animation to the GPU, no worries, when animating any type of transform property, GSAP uses a transform matrix for you, so it gets rendered by the GPU on it's own layer. You can read more about the CSS Plugin here: https://greensock.com/docs/Plugins/CSSPlugin The final issue is applying more than one GSAP instance on the same element and the same properties at the same time. When that GSAP overwrite manager will kill any pre-existing tween and apply the new one. In your case it kind of works like this: You create tween, the instance read the start and end values, and then starts to apply the updates to the css styles. A few milliseconds later you create tween2, GSAP sees that the target is already being animated and the properties are the same, it kills the existing tween, records the start and end values and start applying the updates to the css styles. A few milliseconds later you create tween3, same as #2. If you want to concatenate a series of animations during time, my advice is to create a timeline. Here is an extract from the docs, regarding overwrite: overwrite: String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property): "none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controlling the target at a time. "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet. "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role. Remember, please do your best to create a reduced case sample so we can take a better look at it and that illustrates what you're trying to achieve. Happy Tweening!!

@Rodrigo - I truly appreciate your detailed explanation. Everything you said makes sense and speaks to the core of the issue that I was facing. I was not aware of the overwrite property, so that was super helpful as well. I believe I'll be able to come up with a good solution based on your feedback. Thanks again for your time and knowledge!!

hi I am trying to figure out overwrite manager. The arrow doesn't start out at scale 0, but at the .8 scale from the other tween applied to it later. var WebpageCreate:TimelineMax = new TimelineMax({paused:true,delay:0,onComplete:websiteOut}); //url arrow click WebpageCreate.append(TweenMax.fromTo(donut_site.urlBar.arrow,.75, {scaleX:0,scaleY:0},{bezierThrough:[{x:-97, y:-56}, {x:145, y:5}, {x:-49, y:45}, {x:-11, y:0}], orientToBezier:true,scaleX:1.2,scaleY:1.2,ease:Circ.easeOut,onComplete:donut_site.urlBar.arrow.burst.SunBurst}),0); WebpageCreate.appendMultiple([ TweenMax.fromTo(donut_site.urlBar.arrow, .2,{scaleX:.8,scaleY:.8,ease:Back.easeInOut}, {scaleX:1.2,scaleY:1.2}), TweenMax.to(donut_site.urlBar, .2,{scaleX:2.7,scaleY:2.7,ease:Back.easeInOut}), ], 0, TweenAlign.START,0);

Hi, Your setup is a bit convoluted IMHO and you are clearly running into overwrite issues. I think this approach is better and a bit more flexible: https://codepen.io/GreenSock/pen/oNyGLgv Granted, due to the fact that you are using two different blur animations in different situations makes it a bit difficult to find a flexible and dynamic solution, but at least for three elements this works. Let us know if you have more questions. Happy Tweening!

Ha!, well this is not the case, by defining an extra ScrollTrigger object within a tween you'll define a second ScrollTrigger that has nothing to do with your timeline and will just overwrite what you'll try to do within the ScrollTrigger in your timeline. So don't do that! Removing the ScrollTrigger in your tween will fix your issue. https://codepen.io/mvaneijgen/pen/zYadQYP?editors=0010

Hi, Scrolltrigger version 3.11.3 (and probably older versions too) save the history.scrollRestoration value at the beginning and it seems it's not possibile to overwrite that value later: _scrollRestoration = _win.history.scrollRestoration || "auto"; Then the stored value is applied again every clearScrollMemory call: _isString(scrollRestoration) && (_win.history.scrollRestoration = _scrollRestoration = scrollRestoration); Even setting history.scrollRestoration to manual at the beginning of my script, due to Webpack bundle, the Scrolltrigger code is extecuted before mine. In my case I need to set the scrollRestoration to manual because I use Barba.js Is there a way to do it? Am I missing something?

It looks to me like the problem is the fact that you're creating conflicting tweens and the "mouseEnter" animation is LONGER (0.3) than the "mouseLeave" (0.2), thus if you move fast enough, you could create a situation where the "mouseLeave" animation ends BEFORE the "mouseEnter" one does, thus the "mouseEnter" renders last. By default, overwrite is false. You could simply set overwrite:"auto" but if you want absolute best performance you could manage that overwriting manually like this: https://codesandbox.io/s/beautiful-leavitt-7o2tw?file=/src/App.js

Thanks for the explanation. Setting overwrite: true I can still get the animation to go awry on very rare occasions. I've not been able to isolate the exact circumstances and will report back when I do. The manual overwrite approach works perfectly and I've settled on that. Thanks again.

Hi Here's my JS: var del = 0; divs = $('.nav'); for(ind in divs){ del+=.1; div = divs[ind]; var target = div; TweenMax.to(target, 1, {css:"opacity:1", delay:del, ease:Sine.easeOut, overwrite:"none"}); } and CSS: .nav { color:#000; font-family: 'custom', helvetica, sans-serif; font-size: 4.25em; opacity:0; } Problem: the tweens overwrite each other, resulting in this 'graded' effect attached (half opacities). What am I doing wrong? I want all divs to tween to an opacity of 1. Thanks!

I wasn't sure if you just wanted a very simple "jump to the speed" effect or something more advanced like gradually changing speeds, but here's the simplest approach: https://codepen.io/GreenSock/pen/50f4d16dcbb7acd8f85e540e8a4e2011?editors=0010 Notice we're just reusing the same tween instance and just altering its timeScale. You could certainly do it other ways too. Rodrigo is using a more advanced thing for the "off", but I think there's an easier way even for that. But before I dive into that, I want to confirm that's what you want. Oh, and @Rodrigo I wouldn't recommend accessing the _gsap stuff directly like that. Just use the built-in getProperty() which automatically returns a number anyway (unless you declare a unit): // OLD (bad) currentAngle = parseFloat(box._gsap.rotation.replace("deg", "")); const finalAngle = endAngles[Math.floor(currentAngle / 90)]; // NEW (good) currentAngle = gsap.getProperty(box, "rotation"); const finalAngle = gsap.utils.snap(90, currentAngle); Oh, and @Greg Stager remember that the default overwrite mode is "false", so tweens won't automatically overwrite each other. You were creating infinitely repeating tweens on every click on the same property of the same object. That's probably why you weren't seeing it stop - you had a bunch of tweens running on that same object. You can set overwrite: true on your tweens or even set gsap.defaults({overwrite: "auto"}) to have the engine auto-sense conflicts like that and kill just the parts that overlap. Also, if you want to kill all the tweens of a particular object, check out gsap.killTweensOf(). In your case, gsap.killTweensOf("#box"). Oh, and @Rodrigo here's a fork of yours with InertiaPlugin doing the magic of stopping the spin: https://codepen.io/GreenSock/pen/25d4fed9370f27e03a0f5627be73ae5d?editors=0010

@Isla that is correct, bootstrap will apply a lot of CSS to your layout. You either have to overwrite that or write your own logic for this particular block of content. It's really important how you build your layout if you want to animate it and with bootstrap this is not something you get great control over, because it will imply that you want everything underneath each other on mobile.

I can't figure something out. I am trying to: Simply stated, I have loaded an XML doc. Changed it within Flash. I then want to update the XML doc on the server. Then reload the XML back into Flash. I have one main .xml document - "StudentXML.xml" (This is the file I want to overwrite with new info - it is also the file I read from with the application begins.) And one main .php document - "index.php" (sorry for my crappy naming standards..) Here is the PHP code I found (hoping it would do what I wanted) located in "index.php": <?php $filename = "StudentXML.xml"; $raw_xml = file_get_contents("php://input"); print $raw_xml; $fp = fopen($filename, "w"); fwrite($fp, $raw_xml); fclose($fp); ?> Here is my data I want to change and see transfered to the server to overwrite the current XML Document. At this point, I have already loaded, accessed, and read my StudentXML.xml within Flash. var newLogin:XML = <badge>eStudioLogin</badge>; studentXML.id.(@number == studentID.toString()).allBadgeNames.prependChild(newLogin); studentXML.id.(@number == studentID.toString()).badgesEarned = int(studentXML.id.(@number == studentID.toString()).badgesEarned) + 1; So far, and this is not working, I have pieced together this lovely bit of code: var requested:URLRequest = new URLRequest("www.mysite.com/index.php"); requested.data = studentXML; // This does trace the entire [i]edited[/i] XML document that is in Flash requested.method = URLRequestMethod.POST; var loader:XMLLoader = new XMLLoader(requested,{name:"StudentXML",onProgress:showProgress}); loader.load(); I know I am being dumb. It can't be this hard to transfer data and overwrite an existing xml document. Any help would truly be appreciated. Thanks, Adam

Hi Jack, thanks for the gsap. From what i see the overwrite auto does not work for tweens initiated via css className. So if you have say an on-mouseover and add a css class {css:{className:"+=class1"}} and then mouse-out before the css property tweens are complete and remove the class {css:{className:"-=class1"}}, the first tween/s are not cancelled and continue to completion - and then the remove class takes effect immediately. If you use overwrite "all" - all tweens stop as expected. Cheers

I come from actionscript tweenLite, and I was wondering if you still could overwrite the variable to change the tween like in actionscript like so: var myTween=tweenLite.to(object,1,{left:"10px"}); myTween=tweenLite.to(object,1,{right:"5px"}); What I would like is a mouseover animation, but a different one mouseout animation (not just reversing the tween). Here's what I have now: var bot0 = $("#tapa0"); clipTween40 = TweenLite.to(bot0, .2, {top:"-192px", backgroundColor:"rgba(172, 221, 255,.85)", ease:Cubic.easeOut, paused:true}); bot0.parent().mouseenter(function() {clipTween40.play();}); bot0.parent().mouseleave(function() {clipTween40.reverse();}); Maybe by overwriting the tween... I've tried without much success.

Hello, We have come a long way with GSAP in the last several months however we have come across an issue we cannot seem to solve. We have an issue when we have two instances of our accordion slider on one page. Can you help us resolve this please? The markup looks like this: jQuery(function($){ var active; var boxes = $('.accordion-slider .box').length; var singleBoxWidth = (100 / boxes); var collapsedWidth = singleBoxWidth - ( singleBoxWidth / ( boxes - 1 ) ); var openWidth = 100 - (collapsedWidth * ( boxes - 1 ) ); function accordionSlider() { $('.accordion-slider .box').css('width', 100/boxes + '%' ) $('.accordion-slider .box').on('mouseenter', function(){ if ( !$(this).hasClass('active') && $(window).width() >= 551 ){ //hide active elements if( active ){ TweenLite.to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}); TweenLite.to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}); } //introduce new active elements var others = $('.accordion-slider .box').not(this); active = $(this); $(this).addClass('active'); others.removeClass('active'); var tl = new TimelineLite(); tl.to(others, 0.5, {width:collapsedWidth + '%'}, 0) .to(active, 0.5, {width:openWidth + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.9, {opacity:1}, 0.3) .to(active.find('.accordion-slider-content'), 0.9, {opacity:1}, 0.4); } }); $('.accordion-slider .box').on('mouseleave', function(){ if ( $(window).width() >= 551 ){ var all = $('.accordion-slider .box'); var tl = new TimelineLite(); tl.to(all, 0.5, {width: 100/boxes + '%'}, 0) .to(active.find('.accordion-slider-title'), 0.3, {opacity:0, overwrite:'all'}, 0) .to(active.find('.accordion-slider-content'), 0.3, {opacity:0, overwrite:'all'}, 0) $(this).removeClass('active'); } }); if( $(window).width() < 551 ) { $('.accordion-slider-title, .accordion-slider-content').removeAttr('style'); $('.accordion-slider .box').removeClass('active').css('width', '100%'); } } accordionSlider() $(window).resize(function(){accordionSlider()}); });

I've been tinkering with it a bit, but I don't want to judge wether this is a bug or not. One thing I found is that if you do not set box-sizing: border-box inline (as in 1.: deactivate it via dev-tools or 2.: alternatively overwrite/clear it in a refresh callback and refresh the smoother instance) on the pin-spacer of the first ScrollTrigger it appears to work as intended by @thei. Maybe this can serve as a workaround for now and if this atually is a bug, help find the root of the problem. Works for me in both, the OPs codepen and @Cassie simplified demo. https://codepen.io/akapowl/pen/rNvJXbd https://codepen.io/akapowl/pen/xxjWxRV