Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'release'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 3 results

  1. Quick links Resources Half the file size of the old TweenMax! Simplified API Backward compatibility Set defaults on timelines that get inherited by child tweens Advanced staggers everywhere MotionPathPlugin (replaces BezierPlugin) New random(...) capabilities Get property values, with unit conversion capabilities New "effects" extensibility Keyframes Relative ">" and "<" position prefix Animate to a width/height of "auto" New "repeatRefresh" feature New then() method that returns a Promise New SnapPlugin (included in the core) Access/control the global timeline translateX, translateY, rotate, rotateX, and rotateY aliases You can define units for x/y transforms Built as modern ES6 modules with exports Utility methods Other improvements and changes How do I get it? What was REMOVED? Other notes Ready to play? Questions? Bugs? Resources GSAP 3 Highlights video (Learn more about a few of the features we think you'll like most about GSAP 3) GSAP 3 Starter Pen (Play around with GSAP 3 in CodePen!) This pen allows you to copy the resource URLs easily. Download the source files from your account dashboard. It's in the zip file with the bonus files that you're used to downloading. (Includes a tarball file that you can "npm install" and test with your build system locally - see the the installation docs for more information) We will be featuring the top six GSAP 3 demos when it launches along with attribution to the creators. If you create a demo using GSAP 3 that you'd like to submit, please let us know! Half the file size of the old TweenMax! No kidding! It retains virtually all of the old functionality while adding 50+ features (as you'll see below). Simplified API No more "Lite/Max" flavors. TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated into a single "gsap" object. So simple! For example: //simple tween like the old TweenMax.to(...) gsap.to(".class", {duration:2, x:100}); //create a timeline and add a tween var tl = gsap.timeline(); tl.to(".class", {duration:2, x:100}); 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. Duration is now defined in the vars object (the old syntax still works). This offers several benefits: Improved readability It fits much better with keyframes It allows default durations to be inherited (more on that below) You can use function-based values //OLD - duration was 2nd parameter TweenMax.to(".class", 1, {x:100}); //NEW - duration is now a property of the vars object gsap.to(".class", {duration:1, x:100}); Shortened string-based eases - less typing, more readable, and zero import hassles. Here's the new convention for all of the standard eases: //OLD ==> NEW Elastic.easeOut ==> "elastic.out" //or just "elastic" because ".out" is the default flavor Elastic.easeIn ==> "elastic.in" Elastic.easeInOut ==> "elastic.inOut" Elastic.easeOut.config(1, 0.5) ==> "elastic.out(1, 0.5)" //or just "elastic(1, 0.5)" //and the other configurable eases are much easier!: SteppedEase.config(5) ==> "steps(5)" SlowMo.ease.config(0.5, 0.8) ==> "slow(0.5, 0.8)" RoughEase.ease.config({points:40}) ==> "rough(40)" ExpoScaleEase.config(0.5, 3) ==> "expoScale(0.5, 3)" Backward compatibility The new GSAP even adjusts itself to accommodate the old syntax! There's technically no more TweenMax, TweenLite, TimelineLite, or TimelineMax, but they're all aliased so that the vast majority of legacy code still works, untouched! You don't have to rewrite all your code to use GSAP 3, but we'd recommend shifting to the new, more concise syntax for all your new projects. Set defaults on timelines that get inherited by child tweens You don't have to keep setting the same ease over and over again...or duration...or whatever. Just set defaults on the parent timeline: gsap.timeline({defaults:{ease:"back", duration:2}}) .to(".class-1", {x:100}) //inherits the ease and duration from the parent timeline! .to(".class-2", {y:200}) //this one too Any defaults you set this way will get pushed into every child tween - it's not limited to a certain subset of properties. Advanced staggers everywhere There's no need for the old staggerTo()/staggerFrom()/staggerFromTo() methods because you can add staggers to regular tweens: gsap.to(".class", { x:"+=100", duration:1, stagger: 0.5 //simple stagger of 0.5 seconds }); //or get advanced: gsap.to(".class", { x:"+=100", duration:1, stagger: { amount:2, from:"center", grid:"auto", onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween } }); Don't worry - the stagger methods are still there to support legacy code. MotionPathPlugin (replaces BezierPlugin) Turn any SVG <path> into a motion path! There's even a MotionPathHelper utility that lets you EDIT your own path interactively in the browser (club members only)! Watch the video: The basic playground from the video is at: https://codepen.io/GreenSock/pen/9bdac66e1cb0ad0aa24396565f340e9c?editors=0010 Features: autoRotate along the path. Offset by any amount. Animate from any spot along the path to any other spot using "start" and "end" progress values like start:0.3, end:0.8 to animate from 30% along the path to 80%. you can even loop around (like end:1.5) or go backwards! Align the target with any other element, like make a <div> line up perfectly with an SVG <path> or another element, and start animating along the motion path from there. Feed in an array of values to have it build a motion path that goes through them. It doesn't even have to be "x" and "y" values - it can be almost any property of the target. You can even control the "curviness" of that path that gets plotted. There are some utility methods attached to MotionPathPlugin like stringToRawPath(), rawPathToString(), getRawPath(), sliceRawPath(), transformRawPath(), and pointsToSegment(). MotionPathPlugin will be in the public files, and the MotionPathHelper utility will be a members-only perk. New random(...) capabilities Define random values in a string as a range (like "random(-100, 100)") or an array (like "random([red, blue, green])") and GSAP will swap in an appropriate random value for each target! This makes advanced randomized effects crazy simple. You can even have the random number rounded to the closest increment of any number! For example: gsap.to(".class", { x:"random(-100, 100, 5)" //chooses a random number between -100 and 100 for each target, rounding to the closest 5! }); Or pass in an array-like set of values and GSAP will randomly select one of those: //randomly selects one of the values (0, 100, 200, or 500) x:"random([0, 100, 200, 500])" There's also a gsap.utils.random() function that you can use directly if you prefer. We'll cover the utility methods later. Get property values, with unit conversion capabilities gsap.getProperty("#myElement", "backgroundColor"); gsap.getProperty("#myElement", "x"); //works with GSAP transform properties too. This would return something like "100px" Pass a unit as the 3rd parameter and GSAP will return the value converted for you! gsap.getProperty("#element", "width", "em"); //returns the width in em units! (for CSS values only) If you omit the unit parameter, it will return a NUMBER (at least for simple values where parseFloat() returns a number). For example, a "top" or "left" or "x" property that's technically "20px" would be returned as 20 (no unit suffix) because it's so common to need to deal with numbers in animation. In practical use, it would be annoying to get values like "20px" back from getProperty() and have to manually wrap it in parseFloat(). But again, if you want the unit included, just pass in that unit like gsap.getProperty("#element", "x", "px"); New "effects" extensibility You can author a function that does custom animation and then make it into a named effect that can be called anytime with new targets and configurations. So, for example, think of writing an “explode” effect yourself (a function that accepts targets and a configuration object and spits back an animation/timeline). You define it once, and call it anytime, like: gsap.effects.explode(".class", {speed:25}); GSAP wizards can build crazy-cool effects that folks can simply copy/paste into their project once and then trigger effects easily directly through GSAP. Here's a super-simple "fade" effect to show the concept: // register the effect with GSAP: gsap.registerEffect({ name: "fade", defaults: {duration:2}, //defaults get applied to the "config" object passed to the effect below effect: (targets, config) => { return gsap.to(targets, {duration: config.duration, opacity:0}); } }); // now we can use it like this: gsap.effects.fade(".box"); GSAP is providing 3 key services here: It parses the “targets” into an array. So if selector text is passed in, it becomes an array of elements passed to the effect function. It applies defaults to the vars object for you. No need to add a bunch of if statements or do the defaults yourself. It provides a centralized way of registering/accessing these “effects”. You can think of it almost like jQuery plugins, but for GSAP-based animation effects. Keyframes If you have one set of targets that should animate to various states, instead of creating a whole new tween for each one (re-defining the same targets each time), you can pass an array of keyframes (vars objects) and they'll be perfectly sequenced. Use a "delay" value to create gaps/overlaps!: gsap.to(".class", {keyframes: [ //<-- an array of keyframes! {x:100, duration:1}, {Y:200, duration:1, delay:0.5}, //create a 0.5 second gap {rotation:360, duration:2, delay:-0.25} //overlap by 0.25 seconds ]}); These keyframes are basically like individual tweens, so you can even use callbacks like onStart, onComplete, etc. Relative ">" and "<" position prefix When building out a timeline sequence, it's VERY common to want to place the next animation relative to the previous tween's start or end. Since the default behavior is to put things at the end of the timeline, it's usually easy to get that effect, but what if you want the next tween to start at the same time as (or like 0.2 seconds after) the previously-inserted one? What do you do? I bet you either slap a label in there and keep referencing that label. Or maybe you memorize time stamps. Or if you're like me, sometimes you even look at the duration and do the math ("the duration of the previous one is 1 second, and I want it to start 0.2 seconds after that one starts, so I'll do "-=0.8" and pray that I don't need to mess with the timings very much and remember to edit in 2 places"). In GSAP 3 there's a better way. There are now these prefixes for the position parameter in timelines: "<" references the most recently-added animation's START time ">" references the most recently-added animation's END time And you could optionally offset things with numbers too. Examples: var tl = gsap.timeline(); tl.to(...) .to(..., "") //starts immediately after the previous tween's end time (sequenced) .to(..., ">-0.5") //overlaps with the previous tween by 0.5 seconds (because the number is negative) Think of them like pointers - "<" points to the start, ">" points to the end (of the most recently-added animation). Why do we even need ">"? Imagine a scenario like this: tl.to(... {duration:10}) .to(... {duration:2}, "-=10") //starts way earlier .to(...) // See the issue? Since it's tacked onto the end of the timeline, that's actually at the end of that first 10-second tween, NOT the 2nd tween. It's the correct behavior, but when you're animating it's often very handy to be able to insert things relative to the most recently-added one. Animate to a width/height of "auto" This sounds simple, but it can be very handy when you're expanding something to whatever size would naturally fit its contents. New "repeatRefresh" feature Setting repeatRefresh:true causes a repeating tween to invalidate() and re-record its starting/ending values internally on each iteration. This is only useful when you use dynamic values (relative, random, or function-based). For example... gsap.to(".class", { duration: 1, repeat: 5, repeatRefresh: true, //<- forces things to refresh each repeat iteration x: "random(-100,100)",//now x will go to a different random value on each repeat y: "+=50" //and y will keep moving 50px further down on each repeat }); Note: duration and delay do NOT refresh on each iteration. New then() method that returns a Promise Some people prefer to use Promises instead of onComplete callbacks. You can now tag on a then() call to the end of any tween/timeline that'll return a Promise. gsap.to(".class", {duration:1, x:100}).then(yourFunction).then(...); New SnapPlugin (included in the core) Think of this as a replacement for RoundPropsPlugin (still in the core for backward compatibility) but with a more intuitive name and more features. It basically adds a modifier to any property that implements one of the following snapping behaviors to every value DURING the tween (live, not just to the end value): //snap to an increment: gsap.to(".class", { x: 1000, snap: { x: 20 //x snaps to the closest increment of 20 (0, 20, 40, 60, etc.) } }); //snap to the closest value in an array: gsap.to(".class", { x: 1000, snap: { x: [0, 50, 150, 500] //x snaps to the closest value in this array } }); //snap to a value in an array, but only when it's within a certain distance/radius of one of those values: gsap.to(".class", { x:1000, snap: { x: {values:[0, 50, 150, 500], radius: 20} //x snaps to the closest value in the array but only when it's within 20 pixels of it. } }); You can define as many snap properties as you want. Access/control the global timeline gsap.globalTimeline.timeScale(0.1); //slow everything down gsap.globalTimeline.pause(); //stop everything, though you might want to use gsap.exportRoot() instead so that you can exclude delayedCalls() translateX, translateY, rotate, rotateX, and rotateY aliases To better match the names that most developers are used to in CSS, "translateX", "translateY", "rotate", "rotateX", and "rotateY" are mapped to x, y, rotation, rotationX, and rotationY. So, for example, you can do this: gsap.to(".class", { translateX: 100, // same as x:100 translateY: 100, // same as y:100 rotate: 360 // same as rotation:360 }); And yes, directional rotation values work for DOM elements: rotation:"270_short" //animates in the shortest direction! rotation:"270_cw" //animates clockwise rotation:"270_ccw" //animates counter-clockwise You can define units for x/y transforms gsap.to(".class", { x:"50vw", //units! (default is px) y:"5em" }); GSAP 3.0 no longer leverages matrix() and matrix3d() for CSS transforms which is why it can accommodate units like this. Built as modern ES6 modules with exports Nuff said. And of course there are browser-friendly, minified ES5 files provided as well. Utility methods GSAP exposes some very useful utility methods. Many of them can even return functions so that they can be plugged directly into tweens and leverage GSAP's function-based capabilities meaning they'll get called once for each target (rather than just using the same end value for them all). gsap.utils.random() Get a random number within a range (optionally rounding to an increment you provide), or choose a random item in an array. Note that if you add a "true" (Boolean) value as the 4th parameter, it tells gsap.utils.random() to return a function that you can call anytime to get a random value according to all the parameters you defined. //get a random number between -100 and 100 let num = gsap.utils.random(-100, 100); //get a random value from an array (in this case we'll get "red", "blue", or "green") let random = gsap.utils.random(["red", "blue", "green"]); //get a random number between -100 and 100 that's snapped to the closest increment of 5 let num = gsap.utils.random(-100, 100, 5); //use the 4th parameter (boolean) to get a function back instead of a number var randomizer = gsap.utils.random(-100, 100, 5, true); //now we just call that randomizer function from the line above and it'll always return a number between -100 and 100 rounded to the closest increment of 5! var num = randomizer(); gsap.utils.snap() Snap to a certain increment or to the closest value in an array. You can even limit snapping to a certain radius/distance from any value in the array. This even works with 2-dimensional points (objects with "x" and "y" properties) and it factors both dimensions into the radius measurement. Note that if you don't provide a value to snap (the 2nd parameter), gsap.utils.snap() returns a function that you can feed any number and it'll perform the snapping accordingly. //declare a snapping increment of 10, and snap 23.5 accordingly let num = gsap.utils.snap(10, 23.5); //20 //or snap to the closest value in an array: let num = gsap.utils.snap([0, 10, 30], 23.5); //30 //or define a radius so that snapping only occurs when the provided value is within that radius of one of the values in the array: let num = gsap.utils.snap({values:[0, 100, 300], radius:20}, 30.5); //30.5 (because it's not within the radius) //also works with points (objects with "x" and "y" properties): let point = {x:8, y:8}; let snappedPoint = gsap.utils.snap({values:[{x:0, y:0}, {x:10, y:10}, {x:20, y:20}], radius:5}, point); //{x:10, y:10} //if we don't provide a value to snap, we'll get a function back that's ready to perform snapping accordingly: let snapper = gsap.utils.snap([0, 100, 500]); // <- function! //now whatever value we feed that resulting function (from the line above) will be snapped accordingly: let num = snapper(80); // 100 gsap.utils.wrap() Place a number into a specified range such that when it exceeds the maximum, it wraps back to the start and if it is less than the minimum, it wraps to the end (ex. wrap(5, 10, 12) --> 7). Or cycle through an Array such that when the provided index is greater than the length of the array, it wraps back to the start (ex: wrap(["red", "green", "blue"], 4) --> "green"). For example, if you have 10 elements with the ".box" class applied, and you've got a ["red", "green", "blue"] array of colors that you'd like to have those elements animate to so that the first ".box" animates to "red", the next to "green", the next to "blue" and then wrap around agin so that the 4th would go to "red", 5th to "green", etc., wrap() is perfect for that. If you don't provide an index value (2nd parameter), you'll get a function back instead that's ready to do wrapping accordingly. //returns the corresponding value in the array (wrapping back to the beginning when necessary) let num = gsap.utils.wrap(["red", "green", "blue"], 4); //"green" (index 4 maps to index 1 in a 3-element array) //if we don't provide an index, we get a function that's ready to do cycling accordingly let wrapper = gsap.utils.cycle(["red", "green", "blue"]); //now we just feed an index number into the function we got back from the line above and we'll get the corresponding value from the cycled array let num = wrapper(4) // "green" gsap.utils.toArray() Converts selector text (".class"), an array ([el1, el2, el3]), a NodeList (document.querySelectorAll(".class")), an object({prop:0}), or almost any array-like object (even a jQuery result) into an array. It's a great way to just normalize things and ensure they're wrapped cleanly in an array. var targets = gsap.utils.toArray(".class"); var targets = gsap.utils.toArray(myElement); var targets = gsap.utils.toArray($(".class")); gsap.utils.distribute() Distributes an amount across the elements in an array according to various configuration options. Internally, it's what advanced staggers use, but you can apply it for any value. It essentially assigns values based on the element's position in the array (or in a grid): //get a function that, when fed an index value, will return a value according to the configuration options var distributor = gsap.utils.distribute({ base: 50, //the base value to start from (default:0) amount: 100, //total amount to distribute across the targets (this amount gets added to the "base" when returned) from: "center", //position in the targets array to begin from (can be an index number, a keyword like "start", "center", "edges", or "end", or an array of ratios along the x-axis and y-axis like [0.25, 0.75] (default: 0) grid: "auto", //bases distribution on the element's position in a grid [columns, rows] instead of a flat array. You can also define the columns and rows in array format like [10, 5] axis: "y", //for grid-based distributing, you can limit measurements to one axis ("x" or "y") ease: "power1.inOut" //distributes based on an ease curve! }); //get an array of all the elements with the class ".box" applied var targets = gsap.utils.toArray(".box"); //now for any target element, we can just feed in its index from the targets array (along with the target and array) and it'll do all the calculations and return the appropriate amount: var distributedValue = distributor(2, targets[2], targets); This can be used directly in a tween: //animate the scale of all ".class" elements so that the ones in the middle are 0.5 and the ones on the outer edges are 3 gsap.to(".class", { scale: gsap.utils.distribute({ base: 0.5, amount: 2.5, from: "center" }) }); gsap.utils.getUnit() Isolates the unit inside a string where the number is first, then the unit. // returns the unit of a CSS value gsap.utils.getUnit("50%"); // "%" gsap.utils.getUnit("100vw"); // "vw" gsap.utils.clamp() Given a minimum and maximum, clamp the given value (3rd parameter) such that it's in the range. If you don't provide a value to clamp, it'll return a function that's ready to do the clamping accordingly. // clamps a value to a certain minimum and maximum. Parameters are: minimum, maximum, value let num = gsap.utils.clamp(0, 100, 105); // 100 let num = gsap.utils.clamp(0, 100, -50); // 0 let num = gsap.utils.clamp(0, 100, 20); // 20 //if we don't provide a value to clamp (3rd parameter), we get back a function that's ready to do the clamping accordingly let clamper = gsap.utils.clamp(0, 100); // <- function! //now we can feed a value into the function we got from the line above and it'll perform clamping accordingly: let num = clamper(-10); //0 gsap.utils.mapRange() Maps a value from one range to another range. For example, if you have values between -10 and 10 and you want to map them to a range from 0 to 100, so that feeding in 0 would return 50, it's simple. If you don't provide a value to map, it'll return a function that's ready to perform mapping accordingly. //maps 0 in the -10 to 10 range to the same position in the 100 to 200 range let num = gsap.utils.mapRange(-10, 10, 100, 200, 0); //150 //if we don't provide a value to map, we get a function that's ready to perform mapping accordingly let mapper = gsap.utils.mapRange(-10, 10, 100, 200); // <- function! //now we just feed any number into the function we got in the line above, and it'll return the mapped value let num = mapper(0); //150 gsap.utils.interpolate() Linearly interpolates between almost any two values given the provided progress (between 0 and 1 where 0.5 is halfway between). You can interpolate between numbers, strings (as long as they have matching quantities of numbers inside them), or even objects that have multiple properties! It will automatically sense colors inside of the strings, like "red", "#f00", "rgb(255,0,0)", etc. and put them in rgba(...) format. If you don't provide a value to interpolate, it'll return a function that's ready to perform the interpolation accordingly. //numbers (immediate) let value = gsap.utils.interpolate(0, 200, 0.5); // 100 (halfway between 0 and 200) //numbers (function-based) let interp = gsap.utils.interpolate(0, 200); // <- returns a function since value (3rd parameter) was omitted value = interp(0.5); // 100 //strings let interp = gsap.utils.interpolate("20px", "40px"); value = interp(0.5); // 30px //colors let interp = gsap.utils.interpolate("red", "blue"); value = interp(0.5); // rgba(128,0,128,1) //objects let interp = gsap.utils.interpolate({a:0, b:10, c:"red"}, {a:100, b:20, c:"blue"}); value = interp(0.5); // {a: 50, b: 15, c: "rgba(128,0,128,1)"} gsap.utils.splitColor() Converts a string-based color value into an array consisting of [red, green, blue] (or if an alpha value is required, it'll be in the last spot of a 4-element array). It will work with rgb(), rgba(), hsl(), hsla(), hexidecimal, or any of the basic named colors. And example of a returned value would be [255, 128, 0] or [255, 102, 153, 0.5]. Or if you prefer to get HSL-based values, just pass in true as the 2nd parameter. gsap.utils.splitColor("red"); // [255, 0, 0] gsap.utils.splitColor("#6fb936"); // [111, 185, 54] gsap.utils.splitColor("rgba(204, 153, 51, 0.5)"); // [204, 153, 51, 0.5] // the 2nd parameter indicates we want an HSL value back instead of RGB: gsap.utils.splitColor("#6fb936", true); // [94, 55, 47] Here's a demo that covers several of the utility methods: And here's one that demonstrates how to build your own custom plugin (in this case, it's an unofficial BlurPlugin): Other improvements and changes gsap.getById() - when you assign an id to an animation, you can find that instance by id. The core engine will find colors inside complex strings and animate them properly (no plugins necessary). And of course it'll find all the numbers inside complex strings and animate those as well. function-based values receive a 3rd parameter - the entire array of targets from the tween. This can be useful for advanced effects. gsap.to(".class", { x: function(index, target, targets) { return index * 50; } }); timeScale() can go negative! That’s essentially what “reverse()” does under the hood. yoyoEase gets applied by parent timelines when they yoyo (only if the tween that has the yoyoEase doesn't have a repeat of its own, otherwise you'd get compounded yoyoing). This may sound complex, but it's super convenient and intuitive when you try it. Just create a timeline with a repeat & yoyo, then drop a tween into it that has a yoyoEase defined and you'll see how it works. New iteration() method that lets you get/set the iteration number of a repeating animation. overwrite is false by default, and all other overwrite modes have been eliminated except: "auto" - looks for other active tweens and only kills duplicate/conflicting properties true - immediately overwrites all tweens of the same target(s) regardless of whether or not there are duplicate/conflicting properties. Why make this change? Overwriting caused confusion for some folks and could be tricky to troubleshoot, so it seemed prudent to have users opt-in. Of course you can change the default mode with gsap.defaults({overwrite:"auto"}); (in GSAP 2.x and earlier, "auto" was the default) nextLabel(), previousLabel(), and currentLabel() methods in Timelines (previously getLabelAfter(), getLabelBefore(), and currentLabel()) New read-only tween.targets() method that returns an array of the targets (previously the API didn't provide a way to access the targets of a tween instance). gsap.updateRoot(time) lets game developers update the root timeline manually (after unhooking it from GSAP's ticker). Listening for tick events has been streamlined: //OLD: TweenMax.ticker.addEventListener("tick", yourFunction); TweenMax.ticker.removeEventListener("tick", yourFunction); //NEW: gsap.ticker.add(yourFunction); gsap.ticker.remove(yourFunction); The callback also gets passed some valuable information as parameters: time, deltaTime, and frame (in that order) ModifiersPlugin is baked into the core, as is SnapPlugin, RoundPropsPlugin, EndArrayPlugin and AttrPlugin. And yes, it's still half the size that TweenMax 2.x was. ease:"linear" is a shortcut for the old ease:Linear.easeNone (which still works). ease:"none" also works. In advanced staggers, grid:[columns, rows] is flip-flopped to grid:[rows, columns] to follow convention with 2D arrays. TextPlugin, ScrambleTextPlugin, and SplitText all handle even complex Emojis now. There's 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. Defaults have been consolidated to 2 methods. So instead of TweenLite.defaultEase, TweenLite.defaultOverwrite, TweenLite.defaultStringFilter, etc., there is now gsap.defaults({ease:"power2.in", duration:1}) //for tween-related default (stuff you'd pass in via vars objects) gsap.config({autoSleep:120, force3D:"auto"}); //for other, more general settings. How do I get it? GSAP 3 Starter Pen - Play around with GSAP 3 in CodePen! Please mark your CodePens as private. This pen allows you to copy the resource URLs easily. You can point your CodePens at the main GSAP 3 beta file (which will be updated frequently and may occasionally break things...you've been warned): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Or download the files from your account dashboard. They're in the regular zip file you're used to downloading. Please DO NOT share these files publicly. Using a build tool? There's a gsap-bonus.tgz tarball file in the download that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. What was REMOVED? BezierPlugin - replaced with MotionPathPlugin (not in the core). RoughEase, SlowMo, and ExpoScaleEase. These will be to put into an external option - they just seemed so rarely used that it wasn't worth the kb cost for everyone. cycle support. It has been replaced by gsap.utils.cycle(). skewType. It’s all just “normal” CSS-style skewing (not “compensated”) “useFrames” (I doubt more than 20 people ever used that feature anyway) className tweens. CSSPlugin.cascadeTo() “{self}” reference in params. Seemed like a waste and almost nobody uses it, especially since by default callbacks are scoped to the tween/timeline instance anyway. “scope” values at all (except callbackScope). So no onCompleteScope, onUpdateScope, onStartScope, etc. There's no TweenMax.updateTo() or TweenMax.killChildTweensOf() methods. No more TweenLite.selector or TweenMax.selector (it's pointless with document.querySelectorAll() that's in browsers now). No Timeline.addCallback() method (it overlaps in functionality with Timeline.call(), or you can even use add() to add a simple callback with no parameters). MorphSVG's pathDataToRawBezier() method - use rawPathToString() instead. The new Ease() constructor in favor of the new gsap.registerEase(). Draggable's "scroll" | "scrollTop" | "scrollLeft" types. TweenLite.defaultEase, TweenLite.defaultOverwrite, TweenLite.defaultStringFilter, etc. There is now gsap.defaults() and gsap.config() where you can change these properties: gsap.defaults({ease:"power2.in", duration:1}) //for tween-related default (stuff you'd pass in via vars objects) gsap.config({autoSleep:120, force3D:"auto"}); //for other, more general settings. TweenMax.pauseAll(), TweenMax.resumeAll(), and TweenMax.globalTimeScale() are gone in favor of directly accessing methods on the globalTimeline: gsap.globalTimeline.pause(); gsap.globalTimeline.resume(); gsap.globalTimeline.timeScale(0.5); Other notes To avoid tree shaking issues and avoid fancy instantiation tricks, users should register any plugins that aren't in the core before using them, like: //list as many as you want. It doesn't hurt to register the same one multiple times. No need to include ones that are in the GSAP core like CSSPlugin, AttrPlugin, ModifiersPlugin, SnapPlugin, EndArrayPlugin, and RoundPropsPlugin. gsap.registerPlugin(MotionPathPlugin, TextPlugin); You can directly access the "labels" object of Timeline instances to get the key/value pairs. ThrowPropsPlugin has been renamed InertiaPlugin and has some new features. lagSmoothing() is applied directly on the ticker, like: gsap.ticker.lagSmoothing(false); FAQ How did you cut the file size so much? Removed BezierPlugin, RoughEase, SlowMo (ease), and ExpoScaleEase from the core, but all of those eases (RoughEase, SlowMo, and ExpoScaleEase) are in a separate EasePack file that's only about 1kb gzipped. Dumped legacy code for thing like IE8 and workarounds for very old browsers. Removed some of the complex math code involved in building matrix() and matrix3d() values from scratch in favor of using native strings like translate(), rotate(), rotateY(), etc. in CSS transforms. Handle fewer edge cases where it's appropriate to just train users to input cleaner values. For example, the old CSSPlugin would parse things like margin:"10px 5px" to bust it out into marginTop, marginBottom, marginLeft, and marginRight internally. But it seemed appropriate to keep the core leaner and tell people to define those values individually. (Let me know if you disagree). It helped to consolidate all the Lite/Max flavors into a single Tween and Timeline class. Instead of 4 different render() methods with lots of redundancies, we only have 2 that are much more concise. Skipped inlining some things like pieces of the easing logic. Lots of refining and reorganizing code, passing around object references instead of using "this" keyword, arrow functions, and various techniques for shortening code. What old code will definitely break? Anything that references TweenMax.ticker or TweenLite.ticker (use the new gsap.ticker, and remember that to add listeners to the ticker it's much simpler - see above) TimelineLite.exportRoot() - it's now gsap.exportRoot() Anything referencing one of the removed features mentioned above, like className tweens. BezierPlugin-based animations (replaced by MotionPathPlugin). Timeline .call() method no longer has a "scope" parameter (3rd). In modern development, it just seemed unnecessary and got in the way. The "cycle" feature of the old stagger methods is gone, in favor of the new (cleaner) way explained above. timeline.getLabelTime("myLabel") has been removed. Use timeline.labels.myLabel instead. Anything that references a tween's "target" property (it's now a targets() getter that always returns an array). Anything that directly references ThrowPropsPlugin (it's renamed InertiaPlugin and it doesn't have a .to() method attached to it because it's totally unnecessary now with the new API not requiring a duration). Anything that references an ease's "getRatio()" method. Eases are pure functions now, so you'd feed the value into the ease directly, like Power2.easeOut(0.25). Do you have demos for all these cool new features? Some, which you can see below. But we'd LOVE it if you'd help create more fancy demos for the release! GSAP 3 Logo Playground by Jack Doyle Stack Loader by Chris Gannon GSAP 3 Cube Stripe Loader by Pete Barr Squiggle Text Animation by Cassie Evans MotionPath Distribute by Craig Roblewsky GSAP 3 Cube Swimmer by Pete Barr Animated Portrait by Darin Senneff Infinity Switch by Chris Gannon GSAP 3 Advanced Staggers by Pete Barr Alien Abduction by Cassie Evans Cube Walk 3 by Pete Barr A special shout-out to @dsenneff who created the GreenSock 3 intro animation! Ready to play? GSAP 3 Starter Pen (a CodePen template that already has the GSAP 3 files loaded. Fork away and have a blast!) This pen allows you to copy the resource URLs easily. Download the source files from your account dashboard. It's in the zip file with the bonus files that you're used to downloading. (Includes a tarball file that you can "npm install" and test with your build system locally - see the the installation docs for more information) We will be featuring the top six GSAP 3 demos when it launches along with attribution to the creators. If you create a demo using GSAP 3 that you'd like to submit, please let us know! Questions? Bugs? Hit us up in the forums or contact us directly. Are you interested in having a GSAP employee teach your teach how to use the new version or speak at your next conference? Contact us and we'll do our best to make it happen! We'd love to hear what you think of GSAP 3. Happy tweening!
  2. GreenSock

    GSAP 2.0 Released

    We've been getting requests for better support of modern build tools. With version 2.0 we're pleased to announce a switch to ES modules via NPM which should make your building, bundling, and tree shaking even smoother. Don't worry, the UMD/CommonJS flavor is still available and the CDN serves the same browser-friendly files as always. If terms like "UMD", "ES Modules", and "tree shaking" leave you scratching your head, fear not - GSAP 2.0 will work like a champ for you (as usual). There are no syntax, API, or browser-support changes. None. The major version bump was primarily due to the switch to ES modules for NPM users, that's all. DOWNLOAD GSAP NOW NPM, ES Modules, Webpack, oh my! Modern bundlers like Webpack and Rollup just love to snack on ES modules these days, usually grabbing them from NPM. So GSAP 2.0 is extra delicious covered in its chocolatey ES module outer shell. (If you're not using a bundler or NPM, skip this section entirely) npm install gsap Then you can import individual classes like: import TweenMax from "gsap/TweenMax"; import Draggable from "gsap/Draggable"; TweenMax includes (and exports) many of the commonly-used classes so you can also do this: import { TweenMax, TimelineLite, Power2, Elastic, CSSPlugin } from "gsap/TweenMax"; (TweenMax includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, RoundPropsPlugin, BezierPlugin, DirectionalRotationPlugin, AttrPlugin, and all eases except CustomEase, CustomWiggle, and CustomBounce) As a convenience, there's also an "all" file that imports/exports every GSAP tool (except members-only bonus plugins), so you can do this: import { TimelineMax, CSSPlugin, ScrollToPlugin, Draggable } from "gsap/all"; IMPORTANT: if your animations aren't working as expected, it's likely an issue with tree shaking which can be easily resolved by referencing any plugins you're using. Read more. UMD/CommonJS If your environment doesn't accommodate ES modules yet, don't worry - we've got you covered. There's a "umd" directory that contains...you guessed it...regular old ES5 UMD (Universal Module Definition) versions of the files which are compatible with pretty much everything (RequireJS, Browserify, etc.). So you could import them like: //get the UMD versions. Notice the "/umd/" in the path... import { TweenMax, Power2, TimelineLite } from "gsap/umd/TweenMax"; import ScrollToPlugin from "gsap/umd/ScrollToPlugin"; import Draggable from "gsap/umd/Draggable"; What about bonus plugins like MorphSVGPlugin? Obviously we can't distribute the members-only bonus plugins via NPM, so all you need to do is log into your GreenSock account and download the latest zip which has a "bonus-files-for-npm-users" folder with the bonus plugins. Then just plop that into your project, like maybe in your /src/ folder (or wherever) and import them directly. For example, to save some typing you could rename the "bonus-files-for-npm-users" to simply "gsap-bonus" and put that in the root of your project and then: import MorphSVGPlugin from "./gsap-bonus/MorphSVGPlugin"; import SplitText from "./gsap-bonus/SplitText"; You could certainly put the bonus files in /node_modules/gsap/ if you prefer, but most people don't like doing that because it makes things less portable/updatable. There's a brand new page in the docs dedicated to NPM usage. NEW: Custom rounding increments in RoundPropsPlugin Have you ever needed to round animated values to the nearest 10 or hundredth? With the new object syntax in RoundPropsPlugin, you can round properties to various custom increments, not just integers! Simply pass in [property]:[increment] pairs like so: TweenLite.to(element, 5, { x:600, y:100 roundProps:{ x:10, //round x to nearest increment of 10 y:0.1 //round y to nearest increment of 0.1 } }); Watch the video Demo See the Pen RoundPropsPlugin Update by GreenSock (@GreenSock) on CodePen. NEW: SplitText "specialChars" SplitText recognizes a new specialChars property that allows you to specify an array of special characters to protect. This is typically used for multi-character symbols like in some languages where there are pairs (or sometimes even 4 characters) combined to form a single character. See the Pen SplitText with specialChars feature by GreenSock (@GreenSock) on CodePen. No need to do this for most emoji's, though, because those are already supported natively in SplitText! Got questions? If you haven't checked out the forums, you're missing out! It's a great place to get your questions answered and participate in the community. We carefully monitor and answer questions there. Or feel free to contact us directly if you prefer. Changelog View the full changelog here (note: version 2.0.0 is just 1.20.5 with a version bump to avoid breaking changes for NPM users) Happy tweening! DOWNLOAD GSAP NOW
  3. GreenSock

    GSAP 1.20.0 Released

    Here are some of the highlights of the GSAP 1.20.0 release... yoyoEase Now you can specify an ease for the yoyo (backwards) portion of a repeating TweenMax animation. Set it to a specific ease like yoyoEase:Power2.easeOut or to flip the existing ease, use the shortcut yoyoEase:true. TweenMax is smart enough to automatically set yoyo:true if you define a yoyoEase, so there's less code for you to write. Score! Animate CSS Variables (custom properties) See the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen. Emoji support in TextPlugin 'Nuf said. ...and more There are quite a few little improvements and bug fixes as well, which are listed in the changelog at the github repository. Download GSAP today. Happy tweening!
×