Jump to content
GreenSock

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

Search the Community

Showing results for tags 'tips'.



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 16 results

  1. 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.
  2. 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.
  3. 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!
  4. 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!
  5. 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.
  6. 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!
  7. 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
  8. 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.
  9. 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.
  10. Traditionally animations created with the stagger methods (staggerTo, staggerFrom(), staggerFromTo()) required that all elements animate from and to the same values. With the cycle property you can now stagger the animations of multiple object with an unlimited amount of variance in the values you are tweening to or from. This allows you to create very rich and seemingly complex animations with very little code. Video Instead of defining a single value (like x:100, rotation:90), you can define an Array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}) or even use function-based values (like cycle:{x:function() { return Math.random() * 200; }}). The amount of functionality you can pack into a single line of code is staggering (pun intended). Demo: Cycle with TweenMax Demo: Cycle with TimelineMax See the Pen SplitText with stagger and cycle by GreenSock (@GreenSock) on CodePen. Parameters: index, target When defining cycle values with functions the functions are passed two parameters: index (integer) - the target's position in the array of targets. For example, if there are 3 <div> elements with the class ".box", and you TweenMax.staggerTo(".box", ...), the function would get called 3 times (once for each target) and the index would be 0 first, then 1, and finally 2. target (object) - the target itself (the <div> element in this case) Caveats The cycle property is available only in the staggerTo(), staggerFrom(), and staggerFromTo() methods in TweenMax, TimelineLite and TimelineMax. the cycle property is available in GSAP 1.18.0+
  11. 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 TweenMax.to("html", 1, {"--myColor":"orange", yoyo:true, repeat:20}); Demo See the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen. Support for CSS variables was added in GSAP 1.20.0
  12. 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! Video Code //this tween has a different ease in each direction TweenMax.to(".green", 2, {x:700, ease:Bounce.easeOut, yoyoEase:Power2.easeOut, repeat:10, repeatDelay:0.1}); //setting yoyoEase:true flips the bounce so that you have a Bounce.easeOut in both directions TweenMax.to(".orange", 2, {x:700, ease:Bounce.easeOut, 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.
  13. The secret to building gorgeous sequences with precise timing is understanding the position parameter which is used in many methods throughout TimelineLite/Max. 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 Using position with TimelineLite.to() This article will focus on the TimelineLite.to() method for adding tweens to a TimelineLite, 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, duration, 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 You can define the position in any of the following ways at an absolute time (1) relative to the end of a timeline allowing for gaps ("+=1") or overlaps ("-=1") at a label ("someLabel") relative to a label ("someLabel+=1") Basic code usage tl.to(element, 1, {x:200}) //1 second after end of timeline (gap) .to(element, 1, {y:200}, "+=1") //0.5 seconds before end of timeline (overlap) .to(element, 1, {rotation:360}, "-=0.5") //at exactly 6 seconds from the beginning of the timeline .to(element, 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, 4, {x:200}, "scene1") //add tween 3 seconds after scene1 label .to(element, 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; } His animation is a bit out of whack and the client has the following demands for you: Man should start animating 1 second before car animation ends. One second after man animation ends both car and lift should go up simultaneously. For a visual representation of what the finished product should like, here is a .mov and .gif. Alright it's time to put your animation chops to the test. Challenge instructions Visit the editable version of the animation starter file on CodePen. Click the "fork" button to make your own copy. When you're done, tweet the CodePen link to @greensock. We'll make you feel extra special. There are multiple solutions that require only adding the proper position parameters. Some are more flexible than others, but the important part right now is that the end result meets the clients demands. .demoBody { max-width: 94vw; width: 100%; height: auto; overflow: auto; }
  14. 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.
  15. This QuickTip focuses on creating staggered animations on multiple objects with TweenMax's power methods staggerFrom() and staggerTo(). TweenMax's stagger methods, tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code. Watch the video Explore the demo See the Pen gifIe by GreenSock (@GreenSock) on CodePen. Remember to read the TweenMax docs for detailed descriptions of the stagger methods.
  16. 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.
×