Jump to content

Search the Community

Showing results for 'overwrite'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. If you look in the docs for the gsap object, you will see that no method called .kill() exists for it. Only .killTweensOf() exists on the gsap object. However, if you look at the Tween docs or Timeline docs you will see that they have .kill() methods. So in order to use .kill(), it has to be used on a Tween or Timeline reference itself. Thus you could rewrite your first pen like so: https://codepen.io/GreenSock/pen/poJYgvY?editors=0010 Notice that I also set overwrite: 'auto' on each tween so that new tweens kill off previous tweens that conflict. Both can be used whenever you need to kill an animation. .kill() is more useful if you have a direct reference to the animation. .killTweensOf() is useful when you don't have that.
  2. 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
  3. GreenSock


    Ah, DynamicProps was way back from the ActionScript days Typically you could just recreate the tween each time the "target" object moves to a new position (and don't forget to set overwrite: true or overwrite: "auto" so that the previous one is killed). But if you need a single tween instance so that it definitely ends after a certain amount of time and the ease gets adjusted on-the-fly, I whipped together a helper function that you can feed into a modifier, as demonstrated here: https://codepen.io/GreenSock/pen/1ed6118d993bac95e12d3236cc836f9e?editors=0010 Notice when you drag the red dot, the blue will start animating there no matter where you move it, and it'll always end up exactly on top of it after 5 seconds (the duration of the tween). Of course when the tween ends, it doesn't keep following it. Helper function: // the "getter" can be a function with your own logic OR you can pass in another target whose property should be copied. function getDynamicProp(prop, getter) { let ratio = 0, result, initted, copy, unit; if (typeof(getter) !== "function") { copy = (typeof(getter) === "string") ? document.querySelector(getter) : getter; getter = () => gsap.getProperty(copy, prop); } return function(value, target) { if (this.ratio !== ratio || !initted) { let end = parseFloat(getter()), factor = (this.ratio == 1 || ratio == 1) ? 0 : 1 - ((this.ratio - ratio) / (1 - ratio)); if (!initted) { unit = typeof(value) === "string" ? gsap.utils.getUnit(value) : 0; initted = true; } result = (end - ((end - gsap.getProperty(target, prop)) * factor)) + unit; ratio = this.ratio; } return result; }; } Usage example: gsap.to("#box", { x: "+=1", // these values don't matter - we'll override them with modifiers. These are placeholders. y: "+=1", duration: 5, modifiers: { x: getDynamicProp("x", this.target), y: getDynamicProp("y", this.target) } }); You can define your own getter functions if you want. This isn't an "official" plugin or solution or anything, but hopefully it gets you what you need. Thanks for being a Club GreenSock member! 🙌 Does that help?
  4. If I understand your question correctly, there are many ways to do this... 1) gsap.isTweening(CONTAINER) - that's an easy test to see if GSAP is currently animating a particular object. 2) Store the tween in a variable, and then check its isActive() value. There are several others, but I don't want to overwhelm you. My bigger question is WHY do you want to know if it's tweening? If your goal is to have the new tween overwrite the old one, all you need to do is set overwrite: true on the new tween. That'll immediately kill all other tweens of that same target.
  5. @GreenSock Hi, Jack! I forgot about overwrite mode. Can you tell me is there a big difference fromTo between GSAP v2 and GSAP v3? I created exactly the same code using gsap v2 and there fromTo not working like in your code. https://codepen.io/ChicagoJostik/pen/MWwGepr
  6. The main problem is that in your mouseleave, you did a clearProps tween but you did NOT stop the other tween that was affecting the same element (from the mouseenter). The default overwrite mode in GSAP 3 is false. So all you need to do is set overwrite: true on that tween and it'll find any other tweens of that same element and immediately kill them. As for your timeline not working, you had the values inverted (you were going from height: "auto" to height: 0). And instead of doing a separate set() call and then a to(), you could just combine those into a fromTo(). Your way wasn't "wrong", it's just more verbose. Here's a fork with the corrections: https://codepen.io/GreenSock/pen/89082759e2f311dce8bb350cf740e939?editors=0010 Does that clear things up?
  7. Hey aok. I think you're overcomplicating things. I'd just use some tweens and make sure the tween for the hovered link has overwrite applied to it: https://codepen.io/GreenSock/pen/jOPabqd?editors=0010
  8. Hell yeah! Thanks for the ultra fast (and spot on!) response. I hope you don't mind me asking, as I don't want to just straight paste your code and I'd love to understand it better: What is the overwrite parameter used for? I couldn't see any changes after setting it to false. (line 29 spinningWheel.js) Is the (!rotation.current) (line 14 spinningWheel.js) check the solution for the animation not pausing? As in, every time I was pausing before, I was actually starting a new animation? Why does a change like this break timeScale?
  9. A few things: You loaded GSAP 3.2 but Draggable 3.1. I definitely recommend loading the latest of both. Your old GSAP one loads a SUUUPER old version. CDNJS stopped supporting "latest" many years ago. You've got throwProps/inertia enabled which means it'll create a tween onRelease but you ALSO created a [conflicting] tween at the same time. The default overwrite mode in GSAP 3 is false. You have to opt-in to overwriting. If you want it to automatically find (and kill) conflicting tweens, just set overwrite:"auto" on your tween(s) or do it globally like: gsap.defaults({overwrite:"auto"}); Does that clear things up?
  10. I tried it with setting the gsap.defaults({ overwrite: 'auto' }) (and also setting it to overwrite: false, just to have tested that, but both don't make any difference. [edit] I have just narrowed the issue to the real issue here as it looks like: using transformOrigin on the original svg element (a circle) still needs the same calculation in v3 as in v2, so is unchanged. But after cloning that element with cloneNode(false) and setting transformOrigin on the clone (even when cloning before setting the transformOrigin to the original) has a different behaviour in v3 vs in v2. So for the original element needs to be set with const pointOriginTransform = wheelCenterY - pointCenterY + pointHeight * 0.5; But the clones of that element (which I created before setting this transformOrigin) behave differently, eventhough they are appended to the same <g> and need to be set with: const pointOriginTransform = wheelCenterY - pointCenterY; (So without adding the element's circle radius). So for some reason there is a difference between the original element and the cloned element.
  11. Most of what you said didn't make much sense to me (not that you didn't write clearly - I'm just saying that GSAP 3 didn't suddenly change to using the center of SVGs as the default transformOrigin or any of the other "changes" you noticed). Like Zach said, the only thing that sounds like it MAY be the cause of some confusion in your project is just the shift from overwrite: "auto" to overwrite: false but that'd only come into play if you wrote conflicting tweens originally. Plus it's easily "fixed" with gsap.defaults({overwrite: "auto"}). Does that resolve things in your project? And yes, transformOrigin is always supposed to have two values separated by a space. And no, GSAP doesn't do any cloning of nodes internally, nor does it do anything "destructive" that I can think of. I'm super curious to see a demo of this. Can you please provide one that shows the different behavior in v2 vs v3? I can't reproduce any of this in GSAP 3, so I'm really struggling to figure out why you're experiencing that and I suspect there's something else at play in your app that's causing the problems but it's super difficult to troubleshoot blind. I know you said you'd work on a reduced test case. I sure appreciate your efforts in that regard, as I realize it takes some time. We can be patient.
  12. GSAP 3 stripped out a little bit of complex string parsing but most of it has been added back. I think this might be case where support should be added back? @GreenSock can give us his thoughts. I don't see this in testing. GSAP 3: https://codepen.io/GreenSock/pen/KKpNVQw?editors=0010 GSAP 2: https://codepen.io/GreenSock/pen/rNVWxJM?editors=0010 Can you please try to make a reduced test case of this? That doesn't make much sense - GSAP doesn't have a cloning method so I'm not sure how it could be related. Are you sure that it works differently than v2? Again, a minimal demo would be incredibly useful. Cloning an element with properties set via GSAP seems to work fine in my tests. My only guess given the lack of details is that it could possibly be related to the change in the default overwrite value and the tweens are in conflict. The new default is false while the old one was "auto". I hope you can get these issues sorted soon! We'd love to fix any bugs that exist, the sooner the better
  13. Using the smoothOrigin parameter in the gsap.defaults method (gsap v3.1.1) throws an error in the console: gsap-core.js:83 Invalid property smoothOrigin set to false Missing plugin? gsap.registerPlugin() These are my defaults: gsap.defaults({ overwrite: 'auto', smoothOrigin: false, }); I tried this with and without importing and registering the CSSPlugin, but there's no difference. Inside both the migration guide as well as the docs on CSSPlugin I see 'smoothOrigin' written like that. And I even copied the exact property just to be sure I didn't have a typo. But it doesn't matter, the error persist. I also tested the defaultSmoothOrigin property of the CSSPlugin directly. Setting the defaultSmoothOrigin property directly in the CSSPlugin doesn't throw an error, so at first glance it looks like that works, but that's because Javascript is just adding defaultSmoothOrigin as a new property to the CSSPlugin object there, as I can't find any 'defaultSmoothOrigin' property inside the CSSPlugin code and when printing CSSPlugin.defaultSmoothOrigin to the console without setting it the console shows 'undefined'. So this doesn't seem to work either: CSSPlugin.defaultSmoothOrigin = false; So somehow the gsap defaults() method doesn't seem to recognise the smoothOrigin property and the CSSPlugin.defaultSmoothOrigin property seems to be unavailable. Is this perhaps a known issue of the latest version, or inside the documentation and migration guide? or am I missing something here? https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
  14. Oh, I see. He didn't technically overwrite them. If the previous animation lasted longer than the new animation, it might look a little funky like here. Notice how the box goes left, then right, and then left at the very end. That is because both tweens are running at the same time. https://codepen.io/osublake/pen/0fe81acc740a083c2ddd79564e193d03 You can fix that by setting overwrite to "auto" or true. https://codepen.io/osublake/pen/68b5c9b50e61179474629f74f680c605 Or kill the first animation. https://codepen.io/osublake/pen/e02f232f003a8e2fc26b27a31003bd2f The same technique would work for timelines. Tweens and timelines are interchangeable for the most part.
  15. For projects I was working with a pretty old version of Draggable (with Throwpropsplugin), so I decided to upgrade these to the latest v3 ones from the latest Club Greensock. I found out I had to rename ThrowPropsPlugin to IntertiaPlugin and so now I use inertia: true inside a rotating draggable config. But both morphing and draggable (rotation) are somehow not working as before. What I'm experiencing now is that in whatever browser I use (Firefox / Chromium type browsers) the interaction (both mouse and touch) with the rotating draggable is not working right anymore, which was working fine in v2 with the old pluginversions; when rotating the disc it's rotating all over the place. Sometimes it suddenly reverses direction and even moves the other side in an instant. BTW I replaced the full gsap folder inside node_modules by the one from the Club Greensock zip (v3.1.1) This is how I initialize: import { gsap, CSSPlugin, Draggable, InertiaPlugin, Linear, Sine, Back, } from 'gsap/all'; gsap.registerPlugin(CSSPlugin, Draggable, InertiaPlugin, MorphSVGPlugin); gsap.defaults({ overwrite: 'auto' }); This is how I config the disc: gsap.set(this.wheel, { transformOrigin: '50% 50%' }); Draggable.create(this.wheel, { type: 'rotation', inertia: true, dragResistance: 0.005, edgeResistance: 0.01, }); So it seems like the new plugins (of coarse I also switched to gsap v3 and its new syntax, using npm and webpack btw) for some reason need a different approuch, have different value-ranges or something like that. Reading through the migration page on Greensock I don't see anything so far about this and looking at the parameters of the new plugins on the Greensock website on v3, I don't see much difference either. The methods and parameters I use still seem to be the same. Also things are wrong now with the locations of elements inside the svg. These elements are animating still, but seem to have a much smaller position-delta (scale) then before. I thought maybe this was about the transformOrigin, but it doesn't seem to be changed in v3. Weird. BTW I'm working with SVG here and all other code and the graphics (svg) are not changed. [edit] the draggable direction change (and suddenly moving in reverse direction) seems to be happening on a quart of the wheel only, the other 3 quarts seem to work as expected while dragging, but this quart moves in reverse. As if there is a problem with the angle-calculation there. I thought replacing gsap and the plugins to the new v3 would be effortless and would almost be compatible in terms of API, but I seem to be missing something here. Before spending a lot of time in creating a smaller project with this, could anybody perhaps tell me if there is something I need to know according to the migration to v3 and Draggable and why this is not working as before? Are perhaps things changed like value-ranges?
  16. I am having an issue figuring out how to resolve some console warnings with my current build, which is paired with scrollmagic. (would love any suggestions for a newer and more supported scroll library btw). My animations are working fine. I am using Web pack for bundling. I am trying to replicate the scrolling effect done in Demo 8 here: First warning: Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin() gsap-core.js:83:17 Second warning: (ScrollMagic.Scene) -> (animation.gsap) -> WARNING: tween was overwritten by another. I have tried different methods but cannot seem to resolve this one. Im sure it is because i have the code in a .each(function()) trying to target multiple containers with the same calss. Any suggestions on a different way to build this would be appreciated. Code below: import * as ScrollMagic from "ScrollMagic"; import { gsap } from "gsap"; import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap"; import "ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js"; ScrollMagicPluginGsap(ScrollMagic, gsap); gsap.defaults({overwrite: true}); var controller = new ScrollMagic.Controller(); if ( $(".cu-breakout").length > 0 ) { $(".cu-breakout").each(function() { var child = $(this).find(".breakout-content"); var tl = gsap.timeline(); tl.to(child, 1, { y: -50, ease: "none"}); var scene = new ScrollMagic.Scene({ triggerElement: this, triggerHook: 0.9, offset: 50, duration: "100%" }) .setTween(tl) .addTo(controller); }); } Thanks for any help!
  17. You mean other than what's under the "UMD / CommonJS" section? It's possible that it was accidentally overwritten in one of our updates. There's some caching issue that we can't figure out and requires us to hard refresh to not overwrite changes. If we weren't aware of your update it's possible that we didn't think we needed to hard refresh before editing. Happy to add it back in
  18. Upgrading your project from using GSAP 2 to GSAP 3? It's easy. Most legacy code is already 100% compatible, but there are a few key differences to keep in mind. This guide will help move from GSAP 1.x/2.x to the all-new (and very exciting) GSAP 3. Quick links: New Tween/Timeline Syntax Duration Easing Staggers Overwriting Plugins Cycle Ticker Defaults Callback scope ThrowPropsPlugin renamed InertiaPlugin Other things to keep in mind Frequently Asked Questions More information New Tween/Timeline Syntax (optional) The old syntax still works, but technically you never need to reference TweenMax, TweenLite, TimelineMax or TimelineLite anymore because they're all simplified into a single gsap object! // old TweenMax.to(".class", 2, {x: 100}); // new gsap.to(".class", {duration: 2, x: 100}); // -- Timelines -- // old var tl = new TimelineMax(); // new var tl = gsap.timeline(); Notice there's no "new" keyword needed to create the timeline. Internally, there's one "Tween" class (replaces TweenLite/TweenMax) and one "Timeline" class (replaces TimelineLite/TimelineMax), and both have all of the features like repeat, yoyo, etc. When you call one of the gsap methods like .to(), .from(), etc., it returns an instance of the appropriate class with easily chainable methods. You never need to wonder which flavor (Lite/Max) you need. So for the vast majority of your code, you could simply replace TweenLite and TweenMax with "gsap". You could also do a search/replace for "new TimelineLite(" and "new TimelineMax(", replacing them with "gsap.timeline(" (notice we left off the closing ")" so that any vars objects are retained, like if you had "new TimelineMax({repeat:-1})" it'd keep the repeat). Duration (optional) You can still define a tween's duration as the 2nd parameter, but in GSAP 3 we encourage you to define it inside the vars object instead because it's more readable, it fits with the new keyframes feature, and can be function-based: // old TweenMax.to(obj, 1.5, {...}); TweenMax.from(obj, 1.5, {...}); TweenMax.fromTo(obj, 1.5, {...}, {...}); // new gsap.to(obj, {duration: 1.5, ...}); gsap.from(obj, {duration: 1.5, ...}); gsap.fromTo(obj, {...}, {duration: 1.5, ...}); Easing (optional) The old eases still work great, but you can switch to the new, more compact ease format that requires less typing, is more readable, and eliminates import hassles. Simply include the ease name (all lowercase) followed by a dot and then the type (".in", ".out", or ".inOut"). Note that .out is the default so you can omit that completely. // old ease: Power3.easeInOut ease: Sine.easeOut ease: Linear.easeNone ease: Elastic.easeOut.config(1, 0.5) ease: SteppedEase.config(5); // new ease: "power3.inOut" ease: "sine" // the default is .out ease: "none" // shortened keyword ease: "elastic(1, 0.5)" ease: "steps(5)" Notice that for eases that support additional inputs, simply put them within some parenthesis at the end: // old ease: Elastic.easeOut.config(1, 0.3) ease: Elastic.easeIn.config(1, 0.3) // new ease: "elastic(1, 0.3)" // the default is .out ease: "elastic.in(1, 0.3)" RoughEase, SlowMo, and ExpoScaleEase are not included in the core GSAP file - they're in an external EasePack file. We highly recommend using our Ease Visualizer to get the exact ease that you want and easily copy the correct formatting. Staggers (optional) The old stagger methods still exist for legacy code, but GSAP 3 supports staggers in ANY tween! Simply use the stagger property within the vars parameter. // old TweenMax.staggerTo(obj, 0.5, {...}, 0.1); // new // Simple stagger gsap.to(obj, {..., stagger: 0.1}); // Complex stagger gsap.to(obj, {..., stagger: { each: 0.1, from: "center" grid: "auto" }}); Caveat: the old TweenMax.stagger* methods returned an Array of tweens but the GSAP 3 legacy version returns a Timeline instead. So if you have code that depends on an array being returned, you'll need to adjust your code. You can use getChildren() method of the resulting timeline to get an array of nested tweens. Handling repeats and onComplete: if you add a repeat (like repeat: -1) to a staggered tween, it will wait until all the sub-tweens finish BEFORE repeating the entire sequence which can be quite handy but if you prefer to have each individual sub-tween repeat independently, just nest the repeat INSIDE the stagger object, like stagger: {each: 0.1, repeat: -1}. The same goes for yoyo and onComplete. To learn more about staggers, check out this article. See the Pen Staggers demo by GreenSock (@GreenSock) on CodePen. Overwriting Prior to GSAP 3, the default overwrite mode was "auto" which analyzes the tweens of the same target that are currently active/running and only overwrites individual properties that overlap/conflict, but in GSAP 3 the default mode is false meaning it won't check for any conflicts or apply any overwriting. Why? The overwrite behavior sometimes confused people, plus it required extra processing. We wanted to streamline things in GSAP 3 and make overwriting behavior an opt-in choice. To get the GSAP 1.x/2.x behavior, simply do this once: // set the default overwrite mode to "auto", like it was in GSAP 1.x/2.x gsap.defaults({overwrite: "auto"}); Of course you can set overwrite on a per-tween basis too (in the vars object). Also note that there were more overwrite modes in GSAP 1.x/2.x (like "concurrent", "preexisting" and "allOnStart") that have been eliminated in GSAP 3 to streamline things. Now the only options are "auto" (isolates only specific overlapping/conflicting properties), false (no overwriting), or true (when the tween starts, it immediately kills all other tweens of the same target regardless of which properties are being animated). onOverwrite was removed in favor of a new onInterrupt callback that fires if/when the tween is killed before it completes. This could happen because its kill() method is called or due to overwriting. Plugins Loading plugins Similar to the old TweenMax, some plugins are already included in GSAP's core so that they don't need to be loaded separately. These are called core plugins and include AttrPlugin, CSSPlugin, ModifiersPlugin, and SnapPlugin. RoundPropsPlugin is also included for legacy code, but it has been replaced by the more flexible SnapPlugin. Other plugins, such as Draggable, MotionPathPlugin, MorphSVGPlugin, etc. need to be loaded separately and registered using gsap.registerPlugin(). We recommend using the GSAP Installation Helper to get sample code showing how to load and register each file. // register plugins (list as many as you'd like) gsap.registerPlugin(MotionPathPlugin, TextPlugin, MorphSVGPlugin); MotionPathPlugin replaces BezierPlugin GSAP's new MotionPathPlugin is essentially a better, more flexible version of the older BezierPlugin. In most cases, you can just change bezier legacy references to motionPath: // old bezier: [{x:200, y:100}, {x:400, y:0}, {x:300, y:200}] // new motionPath: [{x:200, y:100}, {x:400, y:0}, {x:300, y:200}] Keep in mind that MotionPathPlugin also supports SVG paths! If you're having trouble converting your bezier curve to a motion path, feel free to post in our forums. See the Pen MotionPathPlugin demo by GreenSock (@GreenSock) on CodePen. The old type: "soft" of BezierPlugin isn't available directly in MotionPathPlugin (it was rarely used), but there's a helper function in this forums post that'll deliver identical results. className tweens removed Support for class name tweens has been removed since they're not very performant, they're less clear, and required an uncomfortable amount of kb. Plus they were rarely used. Just use regular tweens instead that explicitly animate each property. For example if you had this CSS: .box { width: 100px; height: 100px; background-color: green; } .box.active { background-color: red; } You could use this JavaScript: // old .to(".class", 0.5, {className: "+=active"}) // new .to(".class", {backgroundColor: "red"}) // if you need to add a class name in the end, you could do this instead: .to(".class", {backgroundColor: "red", onComplete: function() { this.targets().forEach(elem => elem.classList.add("active")); }}) ColorPropsPlugin unnecessary GSAP 3 has improved support for animating color values built into GSAP's core. As such, the old ColorPropsPlugin isn’t necessary. Simply animate the color values directly as needed! // old TweenMax.to(myObject, 0.5, {colorProps: {borderColor: "rgb(204,51,0)"} }); // new gsap.to(myObject, {borderColor: "rgb(204,51,0)", duration:0.5}); skewType eliminated GSAP 3 removed skewType and CSSPlugin.defaultSkewType because they were rarely used and we wanted to conserve file size. If you still need this functionality, feel free to use the compensatedSkew helper function. suffixMap CSSPlugin.suffixMap has been replaced by setting the units inside of gsap.config() like: // old CSSPlugin.suffixMap.left = "%"; // new gsap.config({units: {"left": "%"}}) Cycle GSAP 2.x stagger methods had a special cycle property that'd allow function-based values or arrays whose values would be cycled through, but GSAP 3 replaces this with a new even more flexible gsap.utils.wrap() utility that can be used in ANY tween, not just staggers! // old TweenMax.staggerTo(".class", 0.5, {cycle: {x: [-100, 100]}}, 0.1) // new gsap.to(".class", {x: gsap.utils.wrap([-100, 100]), stagger: 0.1}) See the Pen GSAP 3 wrap() and wrapYoyo() utilities demo by GreenSock ( @GreenSock) on CodePen. Ticker If you want a function to run every time that GSAP updates (typically every requestAnimationFrame), simply add a listener to gsap.ticker with the new, simpler syntax: // old TweenLite.ticker.addEventListener("tick", myFunction); TweenLite.ticker.removeEventListener("tick", myFunction); // new gsap.ticker.add(myFunction); gsap.ticker.remove(myFunction); Note that there is no .useRAF() function. GSAP 3 always uses requestAnimationFrame unless it is not supported, in which case it falls back to setTimeout. Defaults Setting global defaults has been greatly simplified in GSAP 3. Instead of having static defaults (like TweenLite.defaultEase, TweenLite.defaultOverwrite, CSSPlugin.defaultTransformPerspective, and CSSPlugin.defaultSmoothOrigin), there is now one simple method where you can set all of these defaults: gsap.defaults(). gsap.defaults({ ease: "power2.in", overwrite: "auto", smoothOrigin: false, transformPerspective: 500, duration: 1 }); You can also set defaults for each timeline instance which will be inherited by child tweens: var tl = gsap.timeline({defaults: { ease: "power2.in", duration: 1 } }); // now tweens created using tl.to(), tl.from(), and tl.fromTo() will use the // above values as defaults Other configuration values that aren't tween-specific can be set using gsap.config() including what was formerly set using properties like TweenLite.autoSleep and CSSPlugin.defaultForce3D. gsap.config({ autoSleep: 60, force3D: false, nullTargetWarn: false, units: {left: "%", top: "%", rotation: "rad"} }); Callback scope In GSAP 3 scoping has been simplified. There is no more "scope" parameter in various methods like timeline's call() method, and no more onUpdateScope, onStartScope, onCompleteScope, or onReverseCompleteScope. Instead, use callbackScope to set the scope of all of the callback scopes of a particular tween/timeline or use .bind to set the scope of particular callbacks: // old TweenMax.to(obj, 0.5, {..., onCompleteScope: anotherObj, onComplete: function() { console.log(this); // logs anotherObj }}); // new gsap.to(obj, {..., callbackScope: anotherObj, onComplete: function() { console.log(this); // logs anotherObj } }); // or gsap.to(obj, {..., onComplete: function() { console.log(this); // logs anotherObj }.bind(anotherObj) }); You can access the tween itself by using this inside of the callback. In GSAP 1.x/2.x, you could reference a special "{self}" value in onCompleteParams, for example, but that's no longer valid because the callback is scoped to the tween instance itself by default. So, for example, you can get the tween's targets by using this.targets(). For example: // old TweenMax.to(obj, 0.5, {onComplete: function() { console.log(this.target); }}); // new gsap.to(obj, {onComplete: function() { console.log(this.targets()); // an array }}); If this.targets is undefined, it's probably because you're using an arrow function which always locks its scope to where the arrow function was originally declared. If you want "this" to refer to the tween instance, just use a normal function instead of an arrow function. gsap.to(".class", { // BE CAREFUL! Arrow functions lock scope to where they were created, so "this" won't refer to the tween instance here! // Use normal functions if you need "this" to refer to the tween instance. onComplete: () => console.log(this.targets()) // will not work }); If you prefer using arrow functions (to lock scope to your object/context) and need to reference the tween instance in your callback, you could use this helper function: // this function will always push the tween instance into the parameters for you and allow you to define a scope. function callback(func, scope, params) { let tween; params = params || []; return function() { if (!tween) { tween = this; params.push(tween); } func.apply(scope || tween, params); }; } And then you could use it like this: gsap.to(... { onComplete: callback(tween => { console.log(this); // since this is an arrow function, scope is locked anyway so this is your class instance console.log(tween); // tween instance }) }); ThrowPropsPlugin renamed InertiaPlugin ThrowPropsPlugin has been renamed InertiaPlugin and has some new features. Other things to keep in mind Transforms We recommend setting all transform-related values via GSAP to maximize performance and avoid rotational and unit ambiguities. However, since it's relatively common for developers to set a value like transform: translate(-50%, -50%) in their CSS and the browser always reports those values in pixels, GSAP senses when the x/y translations are exactly -50% in pixels and sets xPercent or yPercent as a convenience in order to keep things centered. If you want to set things differently, again, just make sure you're doing so directly through GSAP, like gsap.set("#id", {xPercent:0, x:100, yPercent:0, y:50}). Getting an object's properties In GSAP 1.x/2.x, it was relatively common for developers to access an element's transform-specific properties via the undocumented _gsTransform object but in GSAP 3 it's much easier. gsap.getProperty() lets you get any property, including transforms. There is no more _gsTransform. // old element._gsTransform.x // new gsap.getProperty(element, "x") Referring to the core classes If you need to refer to the core Tween or Timeline class, you can do so by referencing gsap.core.Tween and gsap.core.Timeline. timeScale() and reversed() In GSAP 3 the timeScale controls the direction of playback, so setting it to a negative number makes the animation play backwards. That means it is intuitively linked with the reversed() method. If, for example, timeScale is 0.5 and then you call reverse() it will be set to -0.5. In GSAP 2 and earlier, the "reversed" state of the animation was completely independent from timeScale (which wasn't allowed to be negative). So in GSAP 3, you could even animate timeScale from positive to negative and back again! Removed methods/properties TweenLite.selector - There's no more TweenLite.selector or TweenMax.selector (it's pointless with document.querySelectorAll() that's in browsers now). timeline.addCallback() - dropped in favor of the simpler .call() method. TweenMax's pauseAll(), resumeAll(), killAll(), and globalTimeScale() - dropped in favor of directly accessing methods on the globalTimeline, like: gsap.globalTimeline.pause(); gsap.globalTimeline.resume(); gsap.globalTimeline.clear(); // like killAll() gsap.globalTimeline.timeScale(0.5); Frequently Asked Questions (FAQ) Why migrate to GSAP 3? GSAP 3 is almost half the file size of the old TweenMax, has 50+ more features, and has a simpler API. See the "Top 5 Features of GSAP 3" article for more information. Do I have to use the new syntax? We highly recommend that you use the new syntax, but no, it's not imperative. Most old GSAP syntax will work just fine in GSAP 3. We're pretty confident that you'll love the new syntax once you're used to it! Will GSAP 2.x be actively maintained for years? We'll certainly answer questions in the forums and help users of GSAP 2.x, but we're focusing all of our development resources on the more modern 3.x moving forward so don't expect any additional 2.x releases in the future. My production build isn't working with GSAP 3. Why? Usually this just means that your build tool is applying tree shaking and dumping plugins - that's why you need to register your plugins with gsap.registerPlugin(). We recommend that you use the Installation Helper which gives you code for proper registration as well. I am seeing some odd/unexpected behavior but don't have any errors. What's going on? Try setting gsap.defaults({overwrite: "auto"}) and see if that fixes the issue. If it does, you must have created some conflicting tweens. You could either keep the default overwrite value of "auto" or restructure your animation to avoid the conflict. If that doesn't fix the issue, please post in our forums and we'd be happy to help! More information For a deep dive into the nitty-gritty of GSAP 3, check out the GSAP 3 Release Notes. As always, if you have questions or are having trouble our forums are available to help you!
  19. There are a bunch of ways you could do this. Here's one idea: https://codepen.io/GreenSock/pen/969c940ecb546350fbc63e6f7c55ca30 var fills = [ "rgba(255,0,0,0.5)", "rgba(0,255,0,0.5)", "rgba(0,0,255,0.5)" ], index = -1; gsap.set("#rect", {autoAlpha:0}); document.getElementById("chng").addEventListener("click", function() { index = (index + 1) % fills.length; gsap.to("#rect", { autoAlpha: 1, fill: fills[index], overwrite: true, duration: 1 }); }); That way, you can put as many fills into that array as you want, and it's all dynamic. No need to create a bunch of tweens, add pauses in a timeline or anything like that. Nice and simple. Does that help?
  20. 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()}); });
  21. I think including a minimal demo of your setup would be helpful Most likely you have to write the logic for this sort of thing yourself, i.e. something like this: const h5s = gsap.utils.toArray(document.querySelectorAll("h5")); // Set things up h5s.forEach(function(elem) { elem.origColor = gsap.getProperty("color"); elem.addEventListener("click", handleClick); }); function handleClick(e) { // This loops through each of them, but you may want to just animate the previous one instead. // To do that, you'd need to keep track of the previously clicked element using a variable h5s.forEach(function(elem) { gsap.to(elem, {color: elem.origColor}); }); // Make the clicked one blue const elem = e.target; gsap.to(elem, {color: 'blue', overwrite: true}); }
  22. overwrite: true simply tells GSAP to immediately kill all other tweens of that same target (or targets). So, for example, if someone clicks the button a bunch of times quickly, you wouldn't want a bunch of tweens trying to control the progress of that same animation simultaneously. You could use overwrite: "auto" for a more complex algorithm that only looks for (and kills) specific properties that overlap, but in your demo it was clear that we've only got one thing we're tweening anyway, so it's faster to just do overwrite: true. Make sense?
  23. Thank you for the help and the heads up on the old CDN! I have tried it now and it works great! I have one question, what does overwrite:true do?
  24. I don't think you need a timeline actually. First of all, I know it sounds weird but the "/latest/" directory on the CDN points to a very old version of GSAP - I would strongly recommend updating to the latest version. The CDN provider, CDNJS, stopped allowing updates to directories like that many years ago - that's why it's stuck at an old version. In the future, always link to a specific version, like /3.0.5/. You could use a single tween that goes across the whole 28 steps, and then just tween to the midway point (progress: 0.5) for the first step, and the end (progress: 1) for the second. Here's an example with the first step and it's using the latest GSAP 3 syntax: // do the whole sequence in one tween, but just remember that animating the progress to 0.5 is the first part, and then 1 as the second part. var walk = gsap.to("#object", 1, {backgroundPosition: "100% 0", ease: "steps(28)", paused: true}); $('#forward').on('click', function(event) { event.preventDefault(); gsap.to(walk, {progress: 0.5, duration: 1, overwrite: true}); }); $('#back').on('click', function(event) { event.preventDefault(); gsap.to(walk, {progress: 0, duration: 1, overwrite: true}); }); You can load the latest GSAP from https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js (though we're likely releasing an update to 3.1.0 this week, FYI). Does that help?
  25. Hey SamW and welcome to the GreenSock forums! I believe that this is related to the default value of overwrite being changed to false from "auto" as it was in GSAP 2. Specifically an overwrite of "auto" or true is required for your ev.currentTarget opacity tween because it's in conflict with the other tween that changes the opacity to 0. https://codepen.io/GreenSock/pen/mdyzKNJ?editors=0010 I went ahead and also updated the formatting to use GSAP 3's format, including putting the duration in the vars parameter, using the string form of eases, and using gsap instead of TweenLite/TweenMax. Those are all optional of course, but are recommended and I think improvements Happy tweening!