Search the Community

The secret to building gorgeous sequences with precise timing is understanding the position parameter which is used in many methods throughout GSAP. This one super-flexible parameter controls the placement of your tweens, labels, callbacks, pauses, and even nested timelines, so you'll be able to literally place anything anywhere in any sequence. Watch the video For a quick overview of the position parameter, check out this video from the "GSAP 3 Express" course by Snorkl.tv - one of the best ways to learn the basics of GSAP 3. Using position with gsap.to() This article will focus on the gsap.to() method for adding tweens to a Tween, but it works the same in other methods like from(), fromTo(), add(), etc. Notice that the position parameter comes after the vars parameter: .to( target, vars, position ) Since it's so common to chain animations one-after-the-other, the default position is "+=0" which just means "at the end", so timeline.to(...).to(...) chains those animations back-to-back. It's fine to omit the position parameter in this case. But what if you want them to overlap, or start at the same time, or have a gap between them? No problem. Multiple behaviors The position parameter is super flexible, accommodating any of these options: Absolute time (in seconds) measured from the start of the timeline, as a number like 3 // insert exactly 3 seconds from the start of the timeline tl.to(".class", {x: 100}, 3); Label, like "someLabel". If the label doesn't exist, it'll be added to the end of the timeline. // insert at the "someLabel" label tl.to(".class", {x: 100}, "someLabel"); "<" The start of previous animation**. Think of < as a pointer back to the start of the previous animation. // insert at the START of the previous animation tl.to(".class", {x: 100}, "<"); ">" - The end of the previous animation**. Think of > as a pointer to the end of the previous animation. // insert at the END of the previous animation tl.to(".class", {x: 100}, ">"); A complex string where "+=" and "-=" prefixes indicate relative values. When a number follows "<" or ">", it is interpreted as relative so "<2" is the same as "<+=2". Examples: "+=1" - 1 second past the end of the timeline (creates a gap) "-=1" - 1 second before the end of the timeline (overlaps) "myLabel+=2" - 2 seconds past the label "myLabel" "<+=3" - 3 seconds past the start of the previous animation "<3" - same as "<+=3" (see above) ("+=" is implied when following "<" or ">") ">-0.5" - 0.5 seconds before the end of the previous animation. It's like saying "the end of the previous animation plus -0.5" A complex string based on a percentage. When immediately following a "+=" or "-=" prefix, the percentage is based on total duration of the animation being inserted. When immediately following "&lt" or ">", it's based on the total duration of the previous animation. Note: total duration includes repeats/yoyos. Examples: "-=25%" - overlap with the end of the timeline by 25% of the inserting animation's total duration "+=50%" - beyond the end of the timeline by 50% of the inserting animation's total duration, creating a gap "<25%" - 25% into the previous animation (from its start). Same as ">-75%" which is negative 75% from the end of the previous animation. "<+=25%" - 25% of the inserting animation's total duration past the start of the previous animation. Different than "<25%" whose percentage is based on the previous animation's total duration whereas anything immediately following "+=" or "-=" is based on the inserting animation's total duration. "myLabel+=30%" - 30% of the inserting animation's total duration past the label "myLabel". Basic code usage tl.to(element, 1, {x: 200}) //1 second after end of timeline (gap) .to(element, {duration: 1, y: 200}, "+=1") //0.5 seconds before end of timeline (overlap) .to(element, {duration: 1, rotation: 360}, "-=0.5") //at exactly 6 seconds from the beginning of the timeline .to(element, {duration: 1, scale: 4}, 6); It can also be used to add tweens at labels or relative to labels //add a label named scene1 at an exact time of 2-seconds into the timeline tl.add("scene1", 2) //add tween at scene1 label .to(element, {duration: 4, x: 200}, "scene1") //add tween 3 seconds after scene1 label .to(element, {duration: 1, opacity: 0}, "scene1+=3"); Sometimes technical explanations and code snippets don't do these things justice. Take a look at the interactive examples below. No position: Direct Sequence If no position parameter is provided, all tweens will run in direct succession. .content .demoBody code.prettyprint, .content .demoBody pre.prettyprint { margin:0; } .content .demoBody pre.prettyprint { width:8380px; } .content .demoBody code, .main-content .demoBody code { background-color:transparent; font-size:18px; line-height:22px; } .demoBody { background-color:#1d1d1d; font-family: 'Signika Negative', sans-serif; color:#989898; font-size:16px; width:838px; margin:auto; } .timelineDemo { margin:auto; background-color:#1d1d1d; width:800px; padding:20px 0; } .demoBody h1, .demoBody h2, .demoBody h3 { margin: 10px 0 10px 0; color:#f3f2ef; } .demoBody h1 { font-size:36px; } .demoBody h2 { font-size:18px; font-weight:300; } .demoBody h3 { font-size:24px; } .demoBody p{ line-height:22px; margin-bottom:16px; width:650px; } .timelineDemo .box { width:50px; height:50px; position:relative; border-radius:6px; margin-bottom:4px; } .timelineDemo .green{ background-color:#6fb936; } .timelineDemo .orange { background-color:#f38630; } .timelineDemo .blue { background-color:#338; } .timleineUI-row{ background-color:#2f2f2f; margin:2px 0; padding:4px 0; } .secondMarker { width:155px; border-left: solid 1px #aaa; display:inline-block; position:relative; line-height:16px; font-size:16px; padding-left:4px; color:#777; } .timelineUI-tween{ position:relative; width:160px; height:16px; border-radius:8px; background: #a0bc58; /* Old browsers */ background: -moz-linear-gradient(top, #a0bc58 0%, #66832f 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a0bc58), color-stop(100%,#66832f)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a0bc58 0%,#66832f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a0bc58 0%,#66832f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a0bc58 0%,#66832f 100%); /* IE10+ */ background: linear-gradient(to bottom, #a0bc58 0%,#66832f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0bc58', endColorstr='#66832f',GradientType=0 ); /* IE6-9 */ } .timelineUI-dragger-track{ position:relative; width:810px; margin-top:20px; } .timelineUI-dragger{ position:absolute; width:10px; height:100px; top:-20px; } .timelineUI-dragger div{ position:relative; width: 0px; height: 0; border-style: solid; border-width: 20px 10px 0 10px; border-color: rgba(255, 0, 0, 0.4) transparent transparent transparent; left:-10px; } .timelineUI-dragger div::after { content:" "; position:absolute; width:1px; height:95px; top:-1px; left:-1px; border-left: solid 2px rgba(255, 0, 0, 0.4); } .timelineUI-dragger div::before { content:" "; position:absolute; width:20px; height:114px; top:-20px; left:-10px; } .timelineUI-time{ position:relative; font-size:30px; text-align:center; } .controls { margin:10px 2px; } .prettyprint { font-size:20px; line-height:24px; } .timelineUI-button { background: #414141; background-image: -webkit-linear-gradient(top, #575757, #414141); background-image: -moz-linear-gradient(top, #575757, #414141); background-image: -ms-linear-gradient(top, #575757, #414141); background-image: -o-linear-gradient(top, #575757, #414141); background-image: linear-gradient(to bottom, #575757, #414141); text-shadow: 0px 1px 0px #414141; -webkit-box-shadow: 0px 1px 0px 414141; -moz-box-shadow: 0px 1px 0px 414141; box-shadow: 0px 1px 0px 414141; color: #ffffff; text-decoration: none; margin: 0 auto; -webkit-border-radius: 4; -moz-border-radius: 4; border-radius: 4px; font-family: "Signika Negative", sans-serif; text-transform: uppercase; font-weight: 600; display: table; cursor: pointer; font-size: 13px; line-height: 18px; outline:none; border:none; display:inline-block; padding: 8px 14px;} .timelineUI-button:hover { background: #57a818; background-image: -webkit-linear-gradient(top, #57a818, #4d9916); background-image: -moz-linear-gradient(top, #57a818, #4d9916); background-image: -ms-linear-gradient(top, #57a818, #4d9916); background-image: -o-linear-gradient(top, #57a818, #4d9916); background-image: linear-gradient(to bottom, #57a818, #4d9916); text-shadow: 0px 1px 0px #32610e; -webkit-box-shadow: 0px 1px 0px fefefe; -moz-box-shadow: 0px 1px 0px fefefe; box-shadow: 0px 1px 0px fefefe; color: #ffffff; text-decoration: none; } .element-box { background: #ffffff; border-radius: 6px; border: 1px solid #cccccc; padding: 17px 26px 17px 26px; font-weight: 400; font-size: 18px; color: #555555; margin-bottom:20px; } .demoBody .prettyprint { min-width:300px; } Percentage-based values As of GSAP 3.7.0, you can use percentage-based values, as explained in this video: Interactive Demo See the Pen Position Parameter Interactive Demo by GreenSock (@GreenSock) on CodePen. Hopefully by now you can see the true power and flexibility of the position parameter. And again, even though these examples focused mostly on timeline.to(), it works exactly the same way in timeline.from(), timeline.fromTo(), timeline.add(), timeline.call(), and timeline.addPause(). *Percentage-based values were added in GSAP 3.7.0 **The "previous animation" refers to the most recently-inserted animation, not necessarily the animation that is closest to the end of the timeline.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes replacing accessing _gsTransform with gsap.getProperty(). Please see the GSAP 3 release notes for details. Have you ever wondered how to get the position, rotation or other transform-related properties that were animated with GSAP? It's actually quite simple: they're all neatly organized and updated in the _gsTransform object which GSAP attaches directly to the target element! Watch the video Let's set the rotation of the logo to 20 degrees. var logo = document.querySelector("#logo"); TweenMax.set(logo, {rotation:20}); GSAP applies that rotation via an inline style using a transform matrix (2d or 3d). If you were to inspect the element after the rotation was set you would see: <img style="transform: matrix(0.93969, 0.34202, -0.34202, 0.93969, 0, 0);" id="logo" src="..." > Not many humans would be able to discern the rotation from those values. Don't worry - the _gsTransform object has all the discrete values in human-readable form! console.log(logo._gsTransform); The console will show you an Object with the following properties and values: Object { force3D: "auto", perspective: 0, rotation: 20, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 0, xOffset: 0, xPercent: 0, y: 0, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } To grab the rotation of the logo you would simply use: logo._gsTransform.rotation Click "Edit on CodePen" and open the console to see how it works See the Pen _gsTransform demo by GreenSock (@GreenSock) on CodePen. Get transform values during an animation Use an onUpdate callback to read the values during an animation: var logo = document.querySelector("#logo"); var output = document.querySelector("#output"); TweenMax.to(logo, 4, {rotationY:360, x:600, transformPerspective:800, transformOrigin:"50% 50%", onUpdate:showValues, ease:Linear.easeNone}); function showValues() { output.innerHTML = "x: " + parseInt(logo._gsTransform.x) + " rotation: " + parseInt(logo._gsTransform.rotationY); //you can also target the element being tweened using this.target //console.log(this.target.x); } The demo below illustrates how to read transform values during an animation. See the Pen _gsTransform demo: animation by GreenSock (@GreenSock) on CodePen. We strongly recommend always setting transform data through GSAP for optimized for performance (GSAP can cache values). Unfortunately, the browser doesn't always make it clear how certain values should be applied. Browsers report computed values as matrices which contain ambiguous rotational/scale data; the matrix for 90 and 450 degrees is the same and a rotation of 180 degrees has the same matrix as a scaleX of -1 (there are many examples). However, when you set the values directly through GSAP, it's crystal clear. Happy tweening!

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With some animation engines it can be frustrating trying to get something to rotate in a specific direction. With GSAP you can explicitly set the direction or let GSAP figure out the shortest distance. Watch the video Interactive demo See the Pen DirectionalRotation Visualizer by GreenSock (@GreenSock) on CodePen. Check out the DirectionalRotation Plugin docs for more info.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. You may be surprised by how much work GSAP does under the hood to make animating transforms intuitive and performant. This video explains the top 10 reasons you should be using GSAP to animate transform-related values like scale, rotation, x, y, etc. Watch the video Independent control of each component (x, y, scaleX, scaleY, rotation, etc.) Physics-based animations and dragging, plus advanced easing like Elastic and Bounce Snap to any increment or set of values Query values anytime with _gsTransform Relative values ("+=" and "-=") Directional rotation (clockwise, counter-clockwise, or shortest) Two different skew types ("compensated" and "simple") Consistency across browsers, especially with SVG Animate along a path Sequencing and on-the-fly controls All of these features are baked into CSSPlugin (which is included inside TweenMax). See the docs for more information. Happy tweening!

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes removing skewType. Please see the GSAP 3 release notes for details. By default, CSSPlugin uses a skewType of "compensated" which affects the skewX/skewY values in a slightly different (arguably more intuitive) way because visually the object isn't stretched. For example, if you set transform:skewX(85deg) in the browser via CSS, the object would become EXTREMELY long (stretched) whereas with skewType:"compensated", it would look more like it sheared in 3D space. This was a purposeful design decision because this behavior is more likely what animators desire. If you prefer the uncompensated behavior, you can set CSSPlugin.defaultSkewType = "simple" which affects the default for all skew tweens, or for an individual tween you can set the special property skewType:"simple". Watch the video Demo: skewType compensated vs simple See the Pen GSAP skewType comparison by GreenSock (@GreenSock) on CodePen. Remember, if you hit the 360 button you could crash your browser as explained in the video.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. MorphSVG's default settings typically deliver beautiful results but sometimes you may need to tweak things to get a certain effect or avoid weird transitional states or kinks. This video explains advanced features of MorphSVGPlugin that give you plenty of flexibility. Watch the video For more information and plenty of interactive demos, check out the MorphSVG docs. Happy tweening!

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Did you know you can tween a tween? What does that even mean? Well, tweens (and timelines) are JavaScript objects that have their own getter-setter methods that allow you to either get or set values. If you make a tween or timeline the target of a tween you can then tween its progress() and timeScale() just like you would the opacity of a DOM element! The video below explains how this works and also shows you how to tween getter setter methods in your own JavaScript objects. Watch the video Demo 1: Tween progress() See the Pen Tween a tween (video) by GreenSock (@GreenSock) on CodePen. Demo 2: Tween timeScale() See the Pen Tween timeScale() of a Timeline by GreenSock (@GreenSock) on CodePen.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Did you know that you can use Draggable on SVG elements? In fact, Draggable normalizes behavior for typical DOM elements and SVG elements across all browsers. Watch how easy it is to make multiple SVG elements draggable, implement hit-testing for a drop area, and animate them with only a few lines of code! Demo See the Pen Draggable SVG Icons (video) by GreenSock (@GreenSock) on CodePen. Watch the video Feature Summary Touch-enabled - works great on tablets, phones, and desktop browsers. Incredibly smooth - GPU-accelerated and requestAnimationFrame-driven for ultimate performance. Compared to other options out there, Draggable just feels far more natural and fluid, particularly when imposing bounds and momentum. Momentum-based animation - if you have ThrowPropsPlugin loaded, you can simply set throwProps:true in the config object and it'll automatically apply natural, momentum-based movement after the mouse/touch is released, causing the object to glide gracefully to a stop. You can even control the amount of resistance, maximum or minimum duration, etc. Impose bounds - tell a draggable element to stay within a container element as in bounds:"#container" or define bounds as coordinates like bounds:{top:100, left:0, width:1000, height:800} or specific maximum/minimum values like bounds:{minRotation:0, maxRotation:270}. Complex snapping made easy - snap to points within a certain radius (see example), or feed in an array of values and it'll select the closest one, or implement your own custom logic in a function. Ultimate flexibility. You can have things live-snap (while dragging) or only on release (even with momentum applied, thanks to ThrowPropsPlugin)! Sense overlaps with hitTest() - see if one element is overlapping another and even set a tolerance threshold (like at least 20 pixels or 25% of either element's total surface area) using the super-flexible Draggable.hitTest() method. Feed it a mouse event and it'll tell you if the mouse is over the element. See a simple example. Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as trigger:"#topBar". Drag position, rotation, or scroll - lots of drag types to choose from: "x,y" | "top,left" | "rotation" | "scroll" | "x" | "y" | "top" | "left" | "scrollTop" | "scrollLeft" Lock movement along a certain axis - set lockAxis:true and Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that's easy too using the type ("top", "y" or "scrollTop" only allow vertical movement; "x", "left", or "scrollLeft" only allow horizontal movement). Rotation honors transform origin - by default, spinnable elements will rotate around their center, but you can set transformOrigin to something else to make the pivot point be elsewhere. For example, if you call TweenLite.set(yourElement, {transformOrigin:"top left"}) before dragging, it will rotate around its top left corner. Or use % or px. Whatever is set in the element's css will be honored. Rich callback system and event dispatching - onPress, onDragStart, onDrag, onDragEnd, onRelease,, onLockAxis, and onClick. Inside the callbacks, "this" refers to the Draggable instance itself, so you can easily access its "target". Even works in transformed containers! Got a Draggable inside a rotated/scaled container? No problem. No other tool handles this properly that we've seen. Auto-scrolling, even in multiple containers! - set autoScroll:1 for normal-speed auto scrolling, or autoScroll:2 scrolls twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here Sense clicks when the element moves less than 3 pixels - a common challenge is discerning if a user intends to click/tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a "click" without actually moving the element. You can define a different threshold using minimumMovement config property. All major browsers are supported. View Draggable Docs Codepen Collection

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. We recommend using GSAP 3's motionPath instead of the approach outlined here. Please see the GSAP 3 release notes for details. GSAP's BezierPlugin enables you to animate any object along a complex bezier curve. However, it isn't simple for most people to generate the exact coordinates of all the anchor and control points needed to describe a Cubic or Quadratic bezier curve. MorphSVGPlugin to the rescue MorphSVGPlugin's main responsibility is morphing SVG paths and in order to do that, it converts SVG path data internally into bezier curves. We thought it would be convenient to allow users to tap into that functionality. MorphSVGPlugin.pathDataToBezier() converts SVG <path> data into an array of cubic Bezier points that can be fed into a BezierPlugin tween (basically using it as a motion guide)! Watch the video Demo Aren't there other tools that do this? Sure, you could find some github repos or dusty old WordPress blogs that have some tools that move objects along a path. The problem is, what do you do when you need to incorporate one of these animations with other effects? Before long you're loading 5 different tools from different developers and none of the tools can "talk to each other". Choreographing a complex animation becomes a nightmare. What happens when you need to pause or reverse an animation from one of these "free" tools? Chances are you'll be spending dozens of hours trying to make it all work. With GSAP, all our plugins work seamlessly together. Any animation you create using any plugin can be synchronized with hundreds of others. Suppose your client comes to you with a small project with the following requirements: Morph a hippo into an elephant Progressively reveal a curved path Animate the elephant along the path Display captions for each animation Make sure you can play, pause, and reverse the entire sequence Sounds silly, but something like this should be a breeze. How many hours are you going to spend just looking for the tools you need? With GSAP you can build it all in under an hour, with less than a dozen lines of code. See the Pen Sequence of Bonus Plugins by GreenSock (@GreenSock) on CodePen. The demo above uses MorphSVG, DrawSVG and ScrambleText which are available to Club GreenSock members. For more information check out the many benefits of joining Club GreenSock.

Before jumping into Club GreenSock for the super-cool bonus plugins, perhaps you're plagued by questions like: Will the bonus plugins work well for my project? How difficult is the API to work with? Will they play nicely with my other tools? Will they work in Edge? Firefox? ... That's why we created special versions of the plugins that can be used on CodePen anytime...for FREE! The video below shows how to get up and running fast. Video Demo with quick-copy URLs See the Pen Try Club GreenSock Bonus Plugins FREE on Codepen by GreenSock (@GreenSock) on CodePen. Template (fork this): See the Pen GreenSock Bonus Starter Template by GreenSock (@GreenSock) on CodePen. Of course we offer a money-back satisfaction guarantee with Club GreenSock anyway, but hopefully this helps give you even more confidence to sign up. CodePen is an online, browser-based editor that makes it easy to write and share front-end code. If you need help using CodePen check out their interactive editor tour.

Have you ever wished you could run a little custom-logic to determine the values that would be used for each target in a tween? Welcome, function-based values! Instead of defining a number (x:100) or string (width:"100vw") or relative value (y:"+=50"), you can now define most values as a function that'll get called once for each target the first time the tween renders, and whatever is returned by that function will be used as the value. This can be very useful for randomizing things or applying conditional logic. See it in action in the demos below. See the Pen BzmGba by GreenSock (@GreenSock) on CodePen.

When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works. Video Code CSS html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-color:var(--myColor); } JavaScript gsap.to("html", {"--myColor": "orange", duration: 1, yoyo: true, repeat: 20}); Demo Support for CSS variables was added in GSAP 1.20.0

You can specify an ease for the yoyo (backwards) portion of a repeating animation. Set it to a specific ease like yoyoEase: "power2" or to flip the existing ease, use the shortcut yoyoEase:true. GSAP is smart enough to automatically set yoyo:true if you define a yoyoEase, so there's less code for you to write. Score! Video Code //this tween has a different ease in each direction gsap.to(".green", { duration: 2, x:700, ease: "bounce.out", yoyoEase: "power2.out", repeat:10, repeatDelay:0.1}); //setting yoyoEase:true flips the bounce so that you have a "bounce.out" in both directions gsap.to(".orange", { duration: 2, x:700, ease: "bounce.out", yoyoEase: true, repeat:10, repeatDelay:0.1}); Demo See the Pen yoyoEase demo by GreenSock (@GreenSock) on CodePen. yoyoEase is available in version 1.20.0 and higher.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. A quick overview of GSAP from Zell Liew to help get you up and running quickly. Read the tutorial.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. This page includes links to all the resources for the 7 Hidden Gems of GSAP article that was published in the June 2016 edition of Net Magazine. To understand the context of all these demos be sure to purchase Net Magazine. Tween a Tween! Huh? Demo: Tween the timeScale() of a timeline Demo: Tween the timeScale() and progress() of a tween Random Access Runtime Controls Demo: Scrub timeline progress Drag and Spin with Draggable Demo: Draggable toss and spin Demo: Puppy Bowl Draggable with SVG Learn more about Draggable Render Anywhere Demo: Same syntax for rendering DOM, SVG and WebGL canvas Expressive Eases Ease Visualizer Demo: Multiple eases Take Control of All GSAP Animations Demo: exportRoot() from Chris Gannon Advanced SVG Shape Morphing Demo: Morph a circle into a hippo Tons of MorphSVG demos from Chris Gannon Learn more about MorphSVGPlugin p, h2 { margin-top: 15px; } .record-content a { display: block; } .record-content p a { display: inline; }

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Adobe Animate CC 2017 made big improvements to how external libraries like GSAP can be loaded into your projects. The video below shows everything you need to do to get up and running quickly. This video is intended for audiences that are familiar with working with Animate CC and have some knowledge of the GSAP API. Add GSAP to your Animate CC project Adding external scripts that are globally accessible can be done through the Actions panel as illustrated below. Safe EaselJS properties to animate Animate's HTML5 "export for canvas" renders everything at runtime using the EaselJS library. Every object in Animate is converted into an EaselJS object and it's important to be aware of which properties are available to be animated. For instance, there is no support in EaselJS for width, height, or 3D rotation (rotationX, rotationY). There's plenty you can do with the properties below: x y alpha scaleX scaleY rotation skewX skewY regX regY Since at its core GSAP can animate any property of any JavaScript object, all of the above properties are fair game. You don't even need to load any additional plugins. For more information on the above properties be sure to read the documentation for Easel JS DisplayObjects. Although it may be obvious to some, it's worth stating that CSS properties that the CSSPlugin typically handles like color, fontSize, border, transformOrigin, etc. don't exist in the EaselJS world. Once you understand what properties you can animate, you can tap into all the core tools of GSAP and use the same familiar syntax. var tl = new TimelineMax({repeat:3, repeatDelay:0.5}) tl.from(this.logo_mc, 1, {y:300, rotation:360, scaleX:0, scaleY:0, ease:Back.easeOut}) .from(this.GreenSock_mc, 0.5, {x:200, skewX:45, alpha:0}, "+=0.5"); Animate color properties with EaselPlugin Use GSAP's EaselPlugin to tween special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue which leverage EaselJS's ColorFilter and ColorMatrixFilter. //necessary to cache element before applying filters this.city.cache(0, 0, 800, 532); //left, top, width, height var tl = new TimelineMax({repeat:3, yoyo:true}); tl.from(this.city, 1, {easel:{exposure:3}}) .to(this.city, 1, {easel:{hue:180}}) .to(this.city, 1, {easel:{colorFilter:{redMultiplier:0.5, blueMultiplier:0.8, greenOffset:100}}}); You must load the EaselPlugin into your file in addition to TweenMax if you want to tap into the special features that EaselPlugin provides. EaselPlugin is included when you download GSAP or you can load it from CDNJS. Be sure to read the EaselPlugin docs for more information. Snag the source files Download source files to see the example code above in action.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. IMPORTANT: This article was written for Animate CC 2016 and there have been changes in Animate CC 2017 that make much of this obsolete. To see how easy it is to add GSAP to your Animate CC 2017 projects please read: Quick Start: GSAP and Adobe Animate CC 2017. We are happy to introduce this guest post from Cory Hudson. His many years as a leader in the interactive advertising space gives him unique insight into working with GSAP and Adobe Animate CC’s HTML5 <canvas> output. Cory is well-known for his work at the IAB, presentations at Adobe Max and conferences across the country. He’s helped GreenSock understand specific challenges in the HTML5 advertising space and we’re honored to have him posting here. We are very excited to see advancements in Animate’s HTML5 output. Although it is easy to use GSAP in your Animate projects, it is not super clear or intuitive to include it via the Publish Settings dialog box. This series will have you up and running in no time while giving you many practical tips to avoid common pitfalls if you are transitioning from Flash and ActionScript-based projects. Part 1: GSAP-Ready Adobe Animate CC Starter Files Part 2: Creating GSAP Templates for Adobe Animate CC Author: Cory Hudson, VP Creative Technology & Innovation, BannerWave Chair, IAB HTML5 Working Group Reunited: GSAP & Adobe Animate CC During the same time period that Adobe Flash established itself as the content creation tool of choice for the digital advertising industry, the GreenSock Animation Platform had also become synonymous with digital advertising and had earned the well deserved distinction of being the de facto industry standard for programmatic animation of Flash-based content. The two technologies enjoyed a sustained and complementary relationship that became a familiar and effective pairing for Flash animators everywhere. However this incredibly successful arrangement seemed to lose relevancy as the ad industry abandoned Flash and it’s SWF output in favor of HTML5. If you were one of the ad creators who had been using the two technologies together to make your living, then you were probably pretty bummed out to say the least. Fortunately, GreenSock was quick to adapt and shifted away from it’s ActionScript tools. The GreenSock Animation Platform (GSAP) was ported to JavaScript in 2012 and has since been the tool of choice for professional animators in the HTML5 world. Having realized that the industry still needs powerful content-creation tools for HTML5, Adobe rebranded Adobe Flash Professional as Adobe Animate CC with many features catering towards HTML5 <canvas> output and banner ad creation. To many, it appears as though GSAP has finally found the worthy partner it has been waiting for. The two technologies can be used together seamlessly, achieving great results that are highly optimized across all browsers and devices. Getting GSAP into an Adobe Animate CC project Despite how well Animate CC and GSAP can work together, Animate doesn’t provide an easy way through its interface to load external JavaScript files like GSAP’s TweenMax.min.js. In this article I will focus on showing you how to use some starter files that are preconfigured to load TweenMax so that all you have to do is edit and publish. In my next article I'll guide you through the process of creating a custom template so that you can greatly extend the capabilities of your published Animate projects and streamline your workflow. Grab the source files IMPORTANT: This article was written for Animate CC 2016 and there have been changes in Animate CC 2017 that make much of this obsolete. To see how easy it is to add GSAP to your Animate CC 2017 projects please read: Quick Start: GSAP and Adobe Animate CC 2017. To get started download the GSAP-AnimateCC-Starter-Files (will not work in Animate CC 2017. The zip contains: GSAP_Basic.fla: A simple file that uses a custom template that only loads TweenMax.min.js. Contains minimal animation code. Perfect if you aren’t concerned with banner ads or related features. GSAP_AdStarter.fla: Uses a template that loads TweenMax.min.js and AdHelper.js. No code or artwork present. Use this to start new banner ad projects. GSAP_AdStarter_Demo.fla: Uses the same template as GSAP_AdStarter but contains some assets and animation code to be referenced in this tutorial. Start coding With GSAP In Adobe Animate CC right now After downloading and extracting the demo files, open GSAP_AdStarter_Demo.fla. Upon initial review, you’ll probably notice some familiar ad-specific elements sitting on the Stage: Logo MovieClip (“logo_mc”) Headline MovieClip (“headline_mc”) Tagline MovieClip (“tagline_mc”) CTA MovieClip (“cta_mc”) You can click on each element to see its instance name in the Properties panel. You’ll see that there are no keyframed animations present on the main timeline, however if you Control > Test to publish the FLA, you’ll see that the elements that were visible on the Stage are actually introduced via a sequenced animation that ends with the CTA button pulsating continuously. How was this animation executed without the help of the Animate timeline? That’s right, you guessed it, this was done with GSAP! Go back the the timeline and click on the first frame of the js layer and launch the Actions panel (Window > Actions or F9). Upon reviewing the code, you’ll most likely discover that you are already very familiar with what you see, because the exact same GSAP syntax that you have been using outside of Adobe Animate works here as well: //set scope activation object var root = this, tl; //prevent children of mc from dispatching mouse events root.cta_mc.mouseChildren = false; root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);}); root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);}); root.logo_mc.on("mouseover", function(){ TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut}); }); root.logo_mc.on("mouseout", function(){ TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); }); //GSAP timeline tl = new TimelineMax(); tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut}); tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5"); tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25"); tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut}); Wow, that was easy wasn’t it? But wait, there was no visible linkage to TweenMax.min.js inside of the Actions panel so how was it able to be successfully leveraged? Do Control > Test to test and publish the FLA for a second time. This time right-click within the document and view the source of the generated HTML wrapper and you will see the following reference to the TweenMax.min.js file inside: So how did this linkage to TweenMax get injected into the HTML wrapper so that we could use it inside of our FLA? Well, a custom template of course! Go back inside of the FLA and go to File > Publish Settings > Advanced where you can see that the FLA is leveraging a custom template for publishing the HTML called Standard_HiDPI_GSAP_AdHelper. You’ll also notice that it has been assigned to a custom profile of the same name. It was this custom template that injected the code to load TweenMax.min.js into the HTML wrapper, so that it could be used within the FLA without having to manually include it. The template also loads AdHelper.js which is a small JavaScript utility that has a number of features specific to HTML5 banner ads. I’ll explain some of these features briefly below. For a more comprehensive dive into AdHelper read the whitepaper I wrote for Adobe: Need HTML5 Ads? Adobe Animate CC to the Rescue! Retina ready Next, look inside of the Properties panel and notice that the Stage of the FLA has dimensions of 600x500 yet after publishing the canvas is actually being rendered at 300x250. This is AdHelper automatically scaling the canvas in order to ensure crisp graphics on high-DPI screens. The reason that we need to author our Adobe Animate ads at double the actual ad dimensions is because you will most likely want to ensure that any images or assets that are cached as bitmaps are high resolution and not scaled up on high-DPI devices, which would cause them to appear blurry. Stop animation after 15 seconds Control > Test one last time and watch the sequenced animation for a full 15 seconds. You’ll see that the pulsating animation of the CTA button actually stops at the 15 second mark. If you mouseover the ad the pulsating animation will resume and then pause once again when you mouseout and leave the bounds of the canvas. This is AdHelper functionality once again, this time automatically pausing and restarting any ongoing animations in order to comply with standardized and widely adopted IAB and publisher specs. More template goodies If you continue to inspect the ad unit within the browser, you’ll see that there is a 1 pixel black border around the banner and upon clicking anywhere within the banner it will launch www.greensock.com in a new browser window. The creation of the border and the click-handling functionality are both being executed by code contained within the custom template, saving you the hassle of having to do this repetitive work on each and every banner project. You will never need to include a border or any click handling methods within the FLA of any ad that uses this custom template. The two GSAP AdStarter files that use the Standard_HiDPI_GSAP_AdHelper template will support: Loading TweenMax.min.js Loading AdHelper.js HiDPI / Retina Automatic starting and stopping of animations after 15 seconds Performance monitoring Alternate content for unsupported browsers Automatic border creation Click-through handling Preloader View the Pre-compiled template The Standard_HiDPI_GSAP_AdHelper template has a considerable amount of custom code added to it to handle the features above. It is a great exercise to peak behind the scenes to see how and where these features were implemented inside the template. Go to File > Publish Settings > Advanced. Click on Export. Choose location to save your file. Open the file you just saved in your text editor of choice. If you aren’t working on ads and just need easy access to GSAP use GSAP_Basic.fla from the downloadable files. To learn how to create your own custom template read the second article in this series. Adobe Animate CC power tips Now that you have the tools to get up and running with GSAP and Animate, I’d like to share some additional tips that will help you tremendously as you begin building actual banners using these two technologies together. In no particular order, here we go: Move Transformation Point Previously with ActionScript our GSAP tweens would transform around the Registration Point, however this is no longer the case when tweening inside of an Adobe Animate HTML5 Canvas document. Now when tweening by code with GSAP the transformation occurs around the Transformation Point, not the Registration Point. You can move the Transformation Point using the Free Transform Tool to any position you want. Scope One of the most immediate differences between Flash/AS3 and Adobe Animate/JavaScript is scope, which must be defined explicitly. JavaScript does not use this as an implicit scope as is the case with AS3. You are now required to explicitly specify scope in timeline scripts. So, on the timeline, rather than calling stop(), you must use this.stop() instead. For example: // "this" in a timeline script refers to the MovieClip or stage that it's defined in. this.stop(); // access a child MovieClip instance: this.myChildMC.gotoAndPlay("end"); Global variables & functions Variables are defined within the scope of their frame code, so if you define a variable in the first frame, you will not be able to access that variable in the final frame. For example: // first frame var myVariable = 1; // final frame console.log(myVariable); // outputs undefined In order to address this, you need to scope your variables using this so that they are accessible across all frames. Please note that variables are not strictly typed in JavaScript as they were previously in AS3. // first frame this.myVariable = 1; // final frame console.log(this.myVariable); // outputs 1 The same approach should be taken for defining any functions on your timeline that will need to be called later in the animation or by a parent MovieClip: this.myFunction = function(){ this.myVar = 0; this.gotoAndPlay(“start”); }; It is also helpful to be aware that you can reference the main timeline of the FLA from nested MovieClips using a global reference named exportRoot or the stage property, which is exposed on all DisplayObject instances and points to the Stage that contains the instance. For example: // from inside of a nested MovieClip, reference another MovieClip on the main timeline: exportRoot.anotherMovieClip.x = 100; // or: this.stage.getChildAt(0).anotherMovieClip.x = 100; You should also know that if define external functions inside of your HTML wrapper you can automatically access them from anywhere inside of your FLA. For example: // function inside of the HTML wrapper: function myExternalFunction(){ console.log("myExternalFunction"); } // can be called from within the FLA as follows: myExternalFunction(); You can also append global variables and functions to the window and document objects to make them accessible from anywhere (from inside the FLA or externally from the HTML wrapper). For example: // on the root timeline: window.root = this; // create a global reference // in another MovieClip's frame action: root.doSomething(); // can use the global variable without a scope //inside of the HTML wrapper root.doSomething(); // can also use the global variable without a scope Frame numbering & labels EaselJS uses zero-based frame numbering rather than the one-based indexing that you were probably familiar with when working with Flash/AS3. This can cause some initial confusion, as it currently requires you to subtract 1 from the indexes displayed in Adobe Animate. For example: this.myMC.gotoAndPlay(0); // 0 is actually the first frame, this may be confusing at first To avoid this confusion, it is suggested that you label your animation frames with frame labels, and reference those in your code rather than numbers. Logging It's likely that you've previously used ActionScript's trace() statement to debug your code. In JavaScript, you can use console.log() instead: console.log("This is the same as a trace statement."); To view console.log() statements when previewing your HTML file, you will need to open up the JavaScript Console in Chrome Dev Tools, or the Console tab in Firebug if you are testing using Firefox. Be aware that in IE9 the console must be open in order to function correctly or it will generate errors. Make sure that you remove any console.log() calls prior to deploying your banner project. Linkage IDs If you plan to reference MovieClips from the Adobe Animate Library through code in order to animate them programmatically with GSAP, then you need to ensure that you assign Linkage IDs in the Library panel. This is exactly the same way that it was done with Flash, so this should look very familiar: // assumes there is a MovieClip in the Library with a Linkage ID of “logo” var myLogo = new lib.logo(); myLogo.x = myLogo.y = 25; myLogo.alpha = 0; stage.addChild(myLogo); TweenMax.to(myLogo, 2, {alpha:1, ease:Strong.easeOut}); This approach can also be very useful if you have a designer who is preparing the assets within Adobe Animate and then handing them off to a developer who might leverage them outside of Adobe Animate. In this scenario Adobe Animate functions as a pure content creation tool with the generated JavaScript file containing a JavaScript representation of the Library that allows the developer to easily reference any asset that has been assigned a Linkage ID. Other GreenSock HTML5 tools From the GSAP side you should be aware that not all of its available plugins and tools that work flawlessly within the HTML5 DOM will work with Animate’s HTML5 export. Tools such as Draggable, SplitText, ScrambleText, etc specifically target CSS values of DOM elements which don’t exist inside the HTML5 <canvas>. Up Next: I will walk through the steps of creating your own custom template, so that you can configure one for yourself that meets your specific needs. This will allow you to create multiple custom templates for specific ad vendors, formats and configurations. Read Creating GSAP Templates for Adobe Animate CC. Please feel free to reach out to me with any questions or feedback and I’ll be more than happy to help as you begin creating HTML5 banners with GSAP and Adobe Animate CC. These two old friends are finally reunited and the future is looking bright! Cory Hudson Email: cory@bannerwave.com Twitter: @coryhudson4 LinkedIn: https://www.linkedin.com/in/cory-hudson-3535675 Web: http://www.bannerwave.com

When it comes to animation, SVG and GSAP go together like peanut butter and jelly. Chocolate and strawberries. Bacon and...anything. SVG offers the sweet taste of tiny file size plus excellent browser support and the ability to scale graphics infinitely without degradation. They're perfect for building a rich, responsive UI (which includes animation, of course). However, just because every major browser offers excellent support for displaying SVG graphics doesn't mean that animating them is easy or consistent. Each browser has its own quirks and implementations of the SVG spec, causing quite a few challenges for animators. For example, some browsers don't support CSS animations on SVG elements. Some don't recognize CSS transforms (rotation, scale, etc.), and implementation of transform-origin is a mess. Don't worry, GSAP smooths out the rough spots and harmonizes behavior across browsers for you. There are quite a few unique features that GSAP offers specifically for SVG animators. Below we cover some of the things that GSAP does for you and then we have a list of other things to watch out for. This page is intended to be a go-to resource for anyone animating SVG with GSAP. Outline Challenges that GSAP solves for you Scale, rotate, skew, and move using 2D transforms Set the transformOrigin (the point around which rotation and scaling occur) Set transformOrigin without unsightly jumps Transform SVG elements around any point in the SVG canvas Animate SVG attributes like cx, cy, radius, width, etc. Use percentage-based x/y transforms Drag SVG elements (with accurate bounds and hit-testing) Move anything (DOM, SVG) along a path including autorotation, offset, looping, and more Animate SVG strokes Morph SVG paths with differing numbers of points Tips to Avoid Common Gotchas Limitations of SVG Browser support Inspiration Awesome SVG Resources Get Started Quickly with GSAP Challenges that GSAP solves for you GSAP does the best that it can to normalize browser issues and provide useful tools to make animate SVG as easy as it can be. Here are some of the challenges that using GSAP to animate SVG solves for you: Scale, rotate, skew, and move using 2D transforms When using GSAP, 2D transforms on SVG content work exactly like they do on any other DOM element. gsap.to("#gear", {duration: 1, x: 100, y: 100, scale: 0.5, rotation: 180, skewX: 45}); Since IE and Opera don't honor CSS transforms at all, GSAP applies these values via the SVG transform attribute like: <g id="gear" transform="matrix(0.5, 0, 0, 0.5, 100, 0)">...</g> When it comes to animating or even setting 2D transforms in IE, CSS simply is not an option. #gear { /* won't work in IE */ transform: translateX(100px) scale(0.5); } Very few JavaScript libraries take this into account, but GSAP handles this for you behind the scenes so you can get amazing results in IE with no extra hassles. Set the transformOrigin (the point around which rotation and scaling occur) Another unique GSAP feature: use the same syntax you would with normal DOM elements and get the same behavior. For example, to rotate an SVG <rect> that is 100px tall by 100px wide around its center you can do any of the following: gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "50% 50%"}); //percents gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "center center"}); //keywords gsap.to("rect", {duration: 1, rotation: 360, transformOrigin: "50px 50px"}); //pixels The demo below shows complete parity between DOM and SVG when setting transformOrigin to various values. We encourage you to test it in all major browsers and devices. With MorphSVG, you can Morph <path> data even if the number (and type) of points is completely different between the start and end shapes! Most other SVG shape morphing tools require that the number of points matches. Morph a <polyline> or <polygon> to a different set of points Convert and replace non-path SVG elements (like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line>) into identical <path>s using MorphSVGPlugin.convertToPath(). Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the in-between state looks like during animation. Simply feed in selector text or an element (instead of passing in raw path data) and the plugin will grab the data it needs from there, making workflow easier. MorphSVGPlugin is a bonus plugin for Club GreenSock members (Shockingly Green and Business Green). Tips to Avoid Common Gotchas There are some things that GSAP can't solve for you. But hopefully this part of the article can help prepare you to avoid them ahead of time! Here are some things to keep in mind when creating and animating SVGs. Vector editor/SVG creation tips: When creating an SVG in Illustrator or Inkscape, create a rectangle the same size as your artboard for when you copy elements out of your vector editor and paste them into a code editor (how-to here). How to quickly reverse the direction of a path in Illustrator (Note: If the Path Direction buttons are not visible in the attributes panel, click the upper right menu of that panel and choose 'Show All'): Open path: Select the pen tool and click on the first point of your path and it will reverse the points. Closed path: Right click the path and make it a compound path, choose menu-window-attributes and then use the Reverse Path Direction buttons. If you're morphing between elements it might be useful to add extra points yourself to simpler shapes where necessary so that MorphSVG doesn't have to guess at where to add points. You can think of masks as clip-paths that allow for alpha as well. When using masks, it's often important to specify which units to use. Use a tool like SVGOMG (or this simpler tool) to minify your SVGs before using them in your projects. Code/animation-related tips: Always set transforms of elements with GSAP (not just CSS). There are quite a few browser bugs related to getting transform values of elements which GSAP can't fix or work around so you should always set the transform of elements with GSAP if you're going to animate that element with GSAP. Always use relative values when animating an SVG element. Using something like y: "+=100" allows you to change the SVG points while keeping the same animation effect as hard coding those values. You can fix some rendering issues (especially in Chrome) by adding a very slight rotation to your tween(s) like rotation: 0.01. If you're having performance issues with your issue, usually the issue is that you have too many elements or are using filters/masks too much. For more information, see this post focused on performance with SVGs. You might like injecting SVGs into your HTML instead of keeping it there directly. You can do this by using a tool like Gulp. You can easily convert between coordinate systems by using MotionPathPlugin's helper functions like .convertCoordinates(). Technique tips/resources: You can animate the viewBox attribute (demo)! You can animate (draw) a dashed line by following the technique outlined in this post. You can animate (draw) lines with varied widths by following the technique outlined in this post. You can animate (draw) handwriting effects by following the technique outlined in this post. You can create dynamic SVG elements! You can animate (draw) a "3D" SVG path. You can fake nested SVG elements (which will be available in SVG 2) by positioning the inner SVG with GSAP and scaling it (demo). You can fake 3D transforms (which will be available in SVG 2) in some cases by either Faking the transform that you need. For example sometimes rotationYs can be replaced by a scaleX instead. Applying the transform to a container instead. If you can limit the elements within the SVG to just the ones you want to transform, this is a great approach. For example, applying a rotationY to the <svg> or <div> containing a <path> instead of applying it to the <path> itself. Limitations of SVG The current SVG spec does not account for 3D transforms. Browser support is varied. Best to test thoroughly and have fallbacks in place. Most browsers don't GPU-accelerate SVG elements. GSAP can't change that. Browser support All SVG features in this article will work in IE9+ and all other major desktop and mobile browsers unless otherwise noted. If you find any cross-browser inconsistencies please don't hesitate to let us know in our support forums. Inspiration The Chris Gannon GSAP Animation collection is great for seeing more SVG animations made with GSAP. Be sure to also check out Chris Gannon's full portfolio on CodePen and follow him on Twitter for a steady influx of inspiration. Awesome SVG Resources SVG Tutorials - MotionTricks The SVG Animation Masterclass - Cassie Evans Understanding SVG Coordinate Systems and Transformations - Sara Soueidan Improving SVG Runtime Performance - Taylor Hunt SVG tips - Louis Hoebregts A Compendium of SVG Information - Chris Coyier Making SVGs Responsive with CSS - Sara Soueidan viewBox newsletter (SVG focus) - Cassie Evans and Louis Hoebregts Get Started Quickly with GSAP Below are a few resources that will get you up and running in no time: Getting Started Guide with Video Sequence Animations like a Pro (video) GSAP Documentation

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Learn how to make a simple play / pause toggle button to control any GSAP animation (tweens or timelines). Same concepts apply to toggling the reversed() state of an animation too. Watch the video Explore the demo See the Pen Toggle Play Pause by GreenSock (@GreenSock) on CodePen. Core code tl.pause() // pauses the animation tl.paused() // gets paused state, returns true or false tl.paused(true) // sets paused state to true tl.paused(!tl.paused()) // sets paused state to inverse of current paused state. // reverse methods tl.reverse() // reverses the animation tl.reversed() // gets reversed state, returns true or false tl.reversed(true) // sets reversed state to true tl.reversed(!tl.reversed()) // sets reversed state to inverse of current reversed state.

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. We encourage you to use the updated "Getting Started" page . The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See "Why GSAP?" to learn why it's used by over 8,000,000 sites and every major brand. Hang in there through the learning curve and you'll discover how addictive animating with code can be. We promise it's worth your time. Quick links Loading GSAP Tweening Basics CSSPlugin 2D and 3D transforms Easing Callbacks Sequencing with Timelines Timeline control Getter / Setter methods Club GreenSock We'll cover the most popular features here but keep the GSAP docs handy for all the details. First, let's talk about what GSAP actually does... GSAP as a property manipulator Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. GSAP snags a starting value, an ending value and then interpolates between them 60 times per second. For example, changing the x coordinate of an object from 0 to 1000 over the course of 1 second makes it move quickly to the right. Gradually changing opacity from 1 to 0 makes an element fade out. Your job as an animator is to decide which properties to change, how quickly, and the motion's "style" (known as easing - we'll get to that later). To be technically accurate we could have named GSAP the "GreenSock Property Manipulator" (GSPM) but that doesn't have the same ring. DOM, SVG, <canvas>, and beyond GSAP doesn't have a pre-defined list of properties it can handle. It's super flexible, adjusting to almost anything you throw at it. GSAP can animate all of the following: CSS: 2D and 3D transforms, colors, width, opacity, border-radius, margin, and almost every CSS value (with the help of CSSPlugin). SVG attributes: viewBox, width, height, fill, stroke, cx, r, opacity, etc. Plugins like MorphSVG and DrawSVG can be used for advanced effects. Any numeric value For example, an object that gets rendered to an HTML5 <canvas>. Animate the camera position in a 3D scene or filter values. GSAP is often used with Three.js and Pixi.js. Once you learn the basic syntax you'll be able to use GSAP anywhere JavaScript runs. This guide will focus on the most popular use case: animating CSS properties of DOM elements. (Note: if you're using React, read this too.) If you're using any of the following frameworks, these articles may help: React Vue Angular What's GSAP Exactly? GSAP is a suite of tools for scripted animation. It includes: TweenLite - the lightweight core of the engine which animates any property of any object. It can be expanded using optional plugins. TweenMax - the most feature-packed (and popular) tool in the arsenal. For convenience and loading efficiency, it includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). TimelineLite & TimelineMax - sequencing tools that act as containers for tweens, making it simple to control entire groups and precisely manage relative timing (more on this later). Extras like easing tools, plugins, utilities like Draggable, and more Loading GSAP CDN The simplest way to load GSAP is from the CDN with a <script> tag. TweenMax (and all publicly available GSAP files) are hosted on Cloudfare's super-fast and reliable cdnjs.com. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> Banner Ad CDNs Every major ad network excludes GSAP from file size limits when you load it from their CDN! Contact your ad network for their URLs. For example, Google hosts TweenMax at: //AdWords and DoubleClick ads only "https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_2.1.2_min.js" NPM npm install gsap See the NPM Usage page in the docs for a full guide including how to import things (ES modules or UMD format), tree shaking, Webpack, how to get bonus plugins into a build system, etc. Downloading GSAP Download a zip directly from our home page or your account dashboard. If you're logged in as a Club GreenSock member this zip will include your bonus plugins. GitHub View the source code on GitHub. Tweening Basics Let's start with TweenMax, GSAP's most popular tool. We'll use CodePen demos so that you can easily fork and edit each example right in your browser. TweenMax.to() To create an animation, TweenMax.to() needs 3 things: target - the object you are animating. This can be a raw object, an array of objects, or selector text like ".myClass". duration (in seconds) vars - an object with property/value pairs that you're animating to (like opacity:0.5, rotation:45, etc.) and other optional special properties like onComplete. For example, to move an element with an id of "logo" to an x position of 100 (same as transform: translateX(100px)) over the course of 1 second: TweenMax.to("#logo", 1, {x:100}); Note: Remember that GSAP isn't just for DOM elements, so you could even animate custom properties of a raw object like this: var obj = {prop:10}; TweenMax.to(obj, 1, { prop:200, //onUpdate fires each time the tween updates; we'll explain callbacks later. onUpdate:function() { console.log(obj.prop); //logs the value on each update. } }); Demo: TweenMax.to() Basic Usage See the Pen TweenMax.to() Basic Usage by GreenSock (@GreenSock) on CodePen. If you would like to edit the code and experiment with your own properties and values, just hit the Edit on CodePen button. Notice that the opacity, scale, rotation and x values are all being animated in the demo above but DOM elements don't actually have those properties! In other words, there's no such thing as element.scale or element.opacity. How'd that work then? It's the magic of CSSPlugin. Before we talk about that, let's explain how plugins work in general. Plugins Think of plugins like special properties that get dynamically added to GSAP in order to inject extra abilities. This keeps the core engine small and efficient, yet allows for unlimited expansion. Each plugin is associated with a specific property name. Among the most popular plugins are: CSSPlugin*: animates CSS values AttrPlugin*: animates attributes of DOM nodes including SVG BezierPlugin*: animates along a curved Bezier path MorphSVGPlugin: smooth morphing of complex SVG paths DrawSVGPlugin: animates the length and position of SVG strokes *loaded with TweenMax CSSPlugin In the previous example, CSSPlugin automatically noticed that the target is a DOM element, so it intercepted the values and did some extra work behind the scenes, applying them as inline styles (element.style.transform and element.style.opacity in that case). Be sure to watch the "Getting Started" video at the top of this article to see it in action. CSSPlugin Features: normalizes behavior across browsers and works around various browser bugs and inconsistencies optimizes performance by auto-layerizing, caching transform components, preventing layout thrashing, etc. controls 2D and 3D transform components (x, y, rotation, scaleX, scaleY, skewX, etc.) independently (eliminating order-of-operation woes) reads computed values so you don't have to manually define starting values animates complex values like borderRadius:"50% 50%" and boxShadow:"0px 0px 20px 20px red" applies vendor-specific prefixes (-moz-, -ms-, -webkit-, etc.) when necessary animates CSS Variables handles color interpolation (rgb, rgba, hsl, hsla, hex) normalizes behavior between SVG and DOM elements (particularly useful with transforms) ...and lots more Basically, CSSPlugin saves you a ton of headaches. Because animating CSS properties is so common, GSAP automatically senses when the target is a DOM element and adds a css:{} wrapper. So internally, for example, {x:100, opacity:0.5, onComplete:myFunc} becomes {css:{x:100, opacity:0.5}, onComplete:myFunc}. That way, CSS-related values get routed to the plugin properly and you don't have to do any extra typing. You're welcome. ? To understand the advanced capabilities of the CSSPlugin read the full CSSPlugin documentation. 2D and 3D transforms CSSPlugin recognizes a number of short codes for transform-related properties: GSAP CSS x: 100 transform: translateX(100px) y: 100 transform: translateY(100px) rotation: 360 transform: rotate(360deg) rotationX: 360 transform: rotateX(360deg) rotationY: 360 transform: rotateY(360deg) skewX: 45 transform: skewX(45deg) skewY: 45 transform: skewY(45deg) scale: 2 transform: scale(2, 2) scaleX: 2 transform: scaleX(2) scaleY: 2 transform: scaleY(2) xPercent: 50 transform: translateX(50%) yPercent: 50 transform: translateY(50%) GSAP can animate any "transform" value but we strongly recommend using the shortcuts above because they're faster and more accurate (GSAP can skip parsing computed matrix values which are inherently ambiguous for rotational values beyond 180 degrees). The other major convenience GSAP affords is independent control of each component while delivering a consistent order-of-operation. Performance note: it's much easier for browsers to update x and y (transforms) rather than top and left which affect document flow. So to move something, we recommend animating x and y. Demo: Multiple 2D and 3D transforms See the Pen Multiple 2D and 3D Transforms by GreenSock (@GreenSock) on CodePen. Additional CSSPlugin notes Be sure to camelCase all hyphenated properties. font-size should be fontSize, background-color should be backgroundColor. When animating positional properties such as left and top, its imperative that the elements you are trying to move also have a css position value of absolute, relative or fixed. vw/vh units aren't currently supported natively, but it's pretty easy to mimic using some JS like x: window.innerWidth * (50 / 100) where 50 is the vw. Just ask in the forums for some help. from() tweens Sometimes it's amazingly convenient to set up your elements where they should end up (after an intro animation, for example) and then animate from other values. That's exactly what TweenMax.from() is for. For example, perhaps your "#logo" element currently has its natural x position at 0 and you create the following tween: TweenMax.from("#logo", 1, {x:100}); The #logo will immediately jump to an x of 100 and animate to an x of 0 (or whatever it was when the tween started). In other words, it's animating FROM the values you provide to whatever they currently are. Demo: TweenMax.from() with multiple properties See the Pen TweenMax.from() tween by GreenSock (@GreenSock) on CodePen. There is also a fromTo() method that allows you to define the starting values and the ending values: //tweens from width 0 to 100 and height 0 to 200 TweenMax.fromTo("#logo", 1.5, {width:0, height:0}, {width:100, height:200}); Special properties (like onComplete) A special property is like a reserved keyword that GSAP handles differently than a normal (animated) property. Special properties are used to define callbacks, delays, easing and more. A basic example of a special property is delay: TweenMax.to("#logo", 1, {x:100, delay:3}); This animation will have a 3-second delay before starting. Other common special properties are: onComplete - a callback that should be triggered when the animation finishes. onUpdate - a callback that should be triggered every time the animation updates/renders ease - the ease that should be used (like Power2.easeInOut) Easing If your animation had a voice, what would it sound like? Should it look playful? Robotic? Slick? Realistic? To become an animation rock star, you must develop a keen sense of easing because it determines the style of movement between point A and point B. The video below illustrates the basics. An "ease" controls the rate of change during a tween. Below is an interactive tool that allows you to visually explore various eases. Note: you can click on the underlined parts of the code at the bottom to change things.

The ease-y way to find the perfect ease Easing allows us to add personality and intrigue to our animations. It's the magic behind animation, and a mastery of easing is essential for any skilled animator. Use this tool to play around and understand how various eases "feel". Some eases have special configuration options that open up a world of possibilities. If you need more specifics, head over to the docs. Notice that you can click the underlined words in the code sample at the bottom to make changes. Quick Video Tour of the Ease Visualizer Take your animations to the next level with CustomEase CustomEase frees you from the limitations of canned easing options; create literally any easing curve imaginable by simply drawing it in the Ease Visualizer or by copying/pasting an SVG path. Zero limitations. Use as many control points as you want. CustomEase is NOT in the public downloads. To get access, create a FREE GreenSock account. Once you're logged in, download the zip file from your account dashboard (or anywhere else on the site that has a download button). Club GreenSock members even get access to a private NPM repo to make installation easier in Node environments.