Jump to content
GreenSock

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

Search the Community

Showing results for tags 'animation'.

  • 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

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

  • CodePen Challenges

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

  1. GreenSock

    CSSRulePlugin

    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. Allows TweenLite and TweenMax to animate the raw style sheet rules which affect all objects of a particular selector rather than affecting an individual DOM element's style (that's what the CSSPlugin is for). For example, if you have a CSS class named ".myClass" that sets background-color to "#FF0000", you could tween that to a different color and ALL of the objects on the page that use ".myClass" would have their background color change. Typically it is best to use the regular CSSPlugin to animate css-related properties of individual elements so that you can get very precise control over each object, but sometimes it can be useful to tween the global rules themselves instead. For example, pseudo elements (like :after, :before, etc. are impossible to reference directly in JavaScript, but you can animate them using CSSRulePlugin as shown below. See the Pen CSSRulePlugin by GreenSock (@GreenSock) on CodePen. Learn more in the CSSRulePlugin documentation.
  2. GreenSock

    TimelineLite

    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. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.
  3. GreenSock

    TimelineMax

    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. TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). It is the ultimate sequencing tool that acts like a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Its easy to make complex sequences repeat with TimelineMax and there are plenty of methods and events that give you complete access to all aspects of your animation as shown in the demo below. See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen. Interesting note: The animation in the banner above is a mere 11 lines of TimelineMax code. The next demo illustrates many of the things TimelineLite and TimelineMax handle with ease, such as the ability to: insert multiple tweens with overlapping start times into a timeline create randomized bezier tweens control the entire set of tweens with a basic UI slider repeat the animation any number of times dynamically adjust the speed at runtime. Notice how the play / pause buttons smoothly accelerate and deccelerate? See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen Be sure to check out TimelineLite for more info on all the capabilities TimelineMax inherits. The chart below gives a birds-eye look at the methods these tools provide. ul.chart { width:360px; float:left; margin-right:30px; } ul.chart li:nth-child(1){ font-weight:700; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TimelineLite and TimelineMax Methods add() addLabel() addPause() call() clear() delay() duration() eventCallback exportRoot() from() fromTo() getChildren() getLabelTime() getTweensOf() invalidate() isActive() kill() pause() paused() play() progress() remove() removeLabel() render() restart() resume() reverse() reversed() seek() set() shiftChildren() staggerFrom() staggerFromTo() staggerTo() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() useFrames() Methods exclusive to TimelineMax currentLabel() getActive() getLabelAfter() getLabelBefore() getlLabelsArray() repeat() repeatDelay() tweenFromTo() tweenTo() yoyo()
  4. GreenSock

    TweenMax

    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. TweenMax is the most feature-packed (and popular) animation tool in the GSAP arsenal. For convenience and loading efficiency, it includes TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). See the Pen GSAP Overview by GreenSock (@GreenSock) on CodePen. Quick links Getting started What's so special about GSAP? Full documentation Showcase (examples) Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. You can mix and match TweenLite and TweenMax in your project as you please. Like TweenLite, a TweenMax instance handles tweening one or more properties of any object (or array of objects) over time. TweenMax's unique special properties TweenMax's syntax is identical to TweenLite's. Notice how the TweenMax tween below uses the special properties: repeat, repeatDelay, yoyo and the onRepeat event callback. //basic illustration of TweenMax's repeat, repeatDelay, yoyo and onRepeat var box = document.getElementById("greenBox"), count = 0, tween; tween = TweenMax.to(box, 2, {left:"740px", repeat:10, yoyo:true, onRepeat:onRepeat, repeatDelay:0.5, ease:Linear.easeNone}); function onRepeat() { count++; box.innerHTML = count; TweenLite.set(box, {backgroundColor:"hsl(" + Math.random() * 255 + ", 90%, 60%)"}); } See the Pen TweenMax basic repeat and onRepeat by GreenSock (@GreenSock) on CodePen. Staggered animations TweenMax makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. TweenMax's three stagger methods: TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.staggerFromTo() are literal one-line wonders. See the Pen TweenMax.staggerTo() by GreenSock (@GreenSock) on CodePen. Additional Methods TweenMax inherits a ton of methods from TweenLite and has quite a few of its own. ul.chart {width:300px; float:left; margin-right:80px; } ul.chart li:nth-child(1){ font-weight:bold; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TweenLite and TweenMax Methods delay() delayedCall() duration() eventCallback from() fromTo() getTweensOf() invalidate() isActive() kill() killDelayedCallsTo() killTweensOf() pause() paused() play() progress() restart() resume() reverse() reversed() seek() set() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() Methods exclusive to TweenMax getAllTweens() isTweening() killAll() killChildTweensOf() pauseAll() repeat() repeatDelay() resumeAll() staggerFrom() staggerFromTo() staggerTo() updateTo() yoyo() Learn more in the TweenMax documentation.
  5. GreenSock

    TweenLite

    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. TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP). A TweenLite instance handles tweening one or more properties of any object (or array of objects) over time. TweenLite can be used on its own to accomplish most animation chores with minimal file size or it can be used in conjunction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler. Basic Usage The most basic use of TweenLite would be to tween a numeric property of a generic JavaScript object. var demo = {score:0}, scoreDisplay = document.getElementById("scoreDisplay"); //create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds. //each time the tween updates call the function showScore() which will handle displaying the value of demo.score. var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore}) function showScore() { scoreDisplay.innerHTML = demo.score.toFixed(2); } See the Pen TweenLite Tween Numeric Property by GreenSock (@GreenSock) on CodePen. note: Click on the "Result" tab to see the value of score animate. Animate CSS Properties For most HTML5 projects you will probably want to animate DOM elements. No problem. Once you load CSSPlugin TweenLite can easily animate CSS properties of DOM elements. /*external js http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js */ window.onload = function() { var logo = document.getElementById("logo"); TweenLite.to(logo, 2, {left:"542px", backgroundColor:"black", borderBottomColor:"#90e500", color:"white"}); } See the Pen Animate Multiple Properties by GreenSock (@GreenSock) on CodePen. note: Click on the "Result" tab to see the animation. TweenLite isn't limited to animating DOM elements, in fact it isn't tied to any rendering layer. It works great with canvas and WebGL too! Control TweenLite is packed with methods that give you precise control over every tween. Play, pause, reverse, and adjust the timeScale (speed) whenever you need to. The demo below shows the power of just a handful of TweenLite's methods. See the Pen Control Playback by GreenSock (@GreenSock) on CodePen. note: Click on the "JS" tab to see detailed comments about what each button does. To see more of TweenLite in action visit our Jump Start guide and extensive CodePen collections. And so much more TweenLite is loaded with even more features allowing you to: kill tweens find active tweens specify how overwriting of tweens should be handled get/set the time, duration and progress of a tween delay tweens pass arguments into event callback functions specify values to tween from The best place to get all the juicy details on what TweenLite can do is in the TimelineLite documentation. Need even more tweening power? Be sure to check out TweenLite's beefy big brother TweenMax.
  6. GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about, but to keep this post manageable, we’ll cover only 5. You might also be interested in the GSAP 3 highlights video. See the release notes for all the juicy details. 1. Half the size of the old TweenMax! No kidding! GSAP retains almost all of its old functionality while adding 50+ features. We’ve learned a lot over the years and hopefully that shows. The core has been completely rebuilt from the ground up as modern ES modules. 2. Simplified API No more “Lite” and “Max” flavors. TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated into a single "gsap" object. So simple! For example: //simple tween like the old TweenMax.to(...) gsap.to(".class", {duration:2, x:100}); //create a timeline and add a tween var tl = gsap.timeline(); tl.to(".class", {duration:2, x:100}); Internally, there's one "Tween" class (replaces TweenLite/TweenMax) and one "Timeline" class (replaces TimelineLite/TimelineMax), and both have all of the features like repeat, yoyo, etc. When you call one of the gsap methods like .to(), .from(), etc., it returns an instance of the appropriate class with easily chainable methods. Duration is now defined in the vars object. This allows several benefits such as: Improved readability It fits much better with keyframes It allows default durations to be inherited (more on that below) You can use function-based values //OLD - duration was 2nd parameter TweenMax.to(".class", 1, {x:100}); //NEW - duration is now a property of the vars object gsap.to(".class", {duration:1, x:100}); All tweens are now stagger-able. There’s no need for the old staggerTo(), staggerFrom(), or staggerFromTo() methods because you can add staggers to regular tweens: //simple stagger gsap.to(".class", { x: "+=100", duration: 1, stagger: 0.5 //space each element's animation out by 0.5 seconds }); //advanced stagger gsap.to(".class", { x: "+=100", duration: 1, stagger: { amount: 2, from: "center", grid: "auto", onComplete: myFunction //define callbacks inside the stagger to make them apply to each sub-tween } }); See the Pen GSAP 3.0 Stagger demo by GreenSock (@GreenSock) on CodePen. For more information about GSAP’s advanced stagger functionality, see this codepen. New, more compact ease format. less typing, more readable, and zero import hassles. Here's the new convention for all of the standard eases: //old way Elastic.easeOut Elastic.easeIn Elastic.easeInOut Elastic.easeOut.config(1, 0.5) SteppedEase.config(5) //new way "elastic" //same as "elastic.out" "elastic.in" "elastic.inOut" "elastic(1, 0.5)" //same as "elastic.out(1, 0.5)" "steps(5)" Backwards compatible The new GSAP even adjusts itself to accommodate the old syntax! There's technically no more TweenMax, TweenLite, TimelineLite, or TimelineMax, but they're all aliased so that the vast majority of legacy code still works, untouched! You don't have to rewrite all your code for GSAP 3, but we'd recommend shifting to the new, more concise syntax for all your new projects. 3. Inheritance/Defaults You don't have to keep setting the same ease over and over again...or duration...or whatever. Just set defaults on the parent timeline and let them be inherited by all its children! For example this repetitive code can be shortened, saving you time. //old way, without timeline defaults var tl = new TimelineMax(); tl.to(obj1, 2, {ease: Power2.easeInOut, rotation: -180}) .to(obj2, 2, {ease: Power2.easeInOut, rotation: -360}) .to(obj3, 2, {ease: Power2.easeInOut, rotation: -180}); //new way, with timeline defaults var tl = gsap.timeline({defaults:{ease: "power2.inOut", duration: 2}}); tl.to(obj1, {rotation: -180}) //child tweens will inherit the duration and from the parent timeline! .to(obj2, {rotation: -360}) .to(obj1, {rotation: -180}); See the Pen GSAP 3.0 Cube Walk by Pete Barr (@petebarr) on CodePen. Any defaults you set this way will get pushed into every child tween - it’s not limited to a certain subset of properties. This can really save you some typing! Inherited defaults are easily overwritten anytime a property is declared on a child. 4. All new MotionPathPlugin The new MotionPathPlugin makes it very easy to move any element along an SVG <path>! For more information about the MotionPathPlugin, check out its documentation and the video below. See the Pen GSAP 3.0 Stagger demo by GreenSock (@GreenSock) on CodePen. Club GreenSock members also get access to the new MotionPathHelper utility that lets you EDIT the motion path interactively in the browser. It’s never been so easy to move elements along a path! 5. New utility methods GSAP 3 exposes some surprisingly useful utility methods that might save you time and hassle. Need values to snap to the closest one in an array? Use gsap.utils.snap(). Tired of trying to figure out how to pull a random element out of an array? Let gsap.utils.random() do it for you. Want to distribute any value among an array of elements, complete with easing? It’s a piece of cake with gsap.utils.distribute(). Here’s how to use the gsap.utils.interpolate() method: //numbers let value = gsap.utils.interpolate(0, 100, 0.5); // 50 //strings let value = gsap.utils.interpolate("20px", "40px", 0.5); // 30px //colors let value = gsap.utils.interpolate("red", "blue", 0.5); // rgba(128,0,128,1) //objects let value = gsap.utils.interpolate({a:0, b:10, c:"red"}, {a:100, b:20, c:"blue"}, 0.5); // {a: 50, b: 15, c: "rgba(128,0,128,1)"} There's also an explainer video about how to use it. Using GSAP's built in utility functions can make complex code simple. Check out the video below to learn more and see an example: For a full list of the utility functions, some demos, and how to use them, check out the docs. There's waaaaay more... We've only scratched the surface of all the improvements in GSAP 3. Check out the release notes for a full list of the features and changes. There's also an updated getting started page. Ready to play? GSAP 3 Starter Pen (a CodePen template that already has the GSAP 3 files loaded. Fork away and have a blast!) This pen allows you to copy the resource URLs easily. Or download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in the local download above that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. Questions? Bugs? Hit us up in the forums or contact us directly. We'd love to hear what you think of GSAP 3. Happy tweening!
  7. 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 is used by over 8,500,000 sites and many major brands. Hang in there through the learning curve and you'll discover how fun animating with code can be. We promise it's worth your time. Quick links Loading GSAP Tweening Basics CSSPlugin 2D and 3D transforms Easing Staggers 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 is 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. 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 <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 that 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 is GSAP Exactly? GSAP is a suite of tools for scripted animation. It includes: The GSAP core - The lightweight core of the engine which animates any property of any object. It makes use of tweens and to give you more control over your animations. Extras like time-saving plugins, easing tools, utility functions, and more. Loading GSAP Downloading GSAP
  8. GreenSock

    MorphSVGPlugin

    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. MorphSVGPlugin morphs SVG paths by animating the data inside the "d" attribute. The video explains more... It has never been easier to morph between SVG shapes. First, let's cover what this new plugin can do: 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 There's a utility function, MorphSVGPlugin.convertToPath() that can convert primitive shapes like <circle>, <rect>, <ellipse>, <polygon>, <polyline>, and <line> directly into the equivalent <path> that looks identical to the original and is swapped right into the DOM. Draw the resulting shape to <canvas> (via a render function or set a MorphSVGPlugin.defaultRender) Use either linear interpolation (the default) or a newer "rotational" type to get more natural looking morphs Optionally define a "shapeIndex" that controls how the points get mapped. This affects what the inbetween state looks like during animation. Instead of passing in raw path data as text, you can simply feed in selector text or an element and the plugin will grab the data it needs from there, making workflow easier. How does it work? MorphSVGPlugin does a ton of heavy lifting so that you don't have to. You can morph a circle into a hippo with a single line of code: TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); See the Pen MorphSVG : Docs Basic Usage by GreenSock (@GreenSock) on CodePen. API MorphSVGPlugin needs to know what shape to morph to (and optionally which shapeIndex to use). When only specifying a shape, MorphSVGPlugin can take a wide range of values. Selector string TweenLite.to("#circle", 1, {morphSVG:"#hippo"}); An SVG element var endShape = document.getElementById("hippo"); TweenLite.to("#circle", 1, {morphSVG:endShape}); Points for <polyline> or <polygon> elements: TweenLite.to(“#polygon”, 2, {morphSVG:"240,220 240,70 70,70 70,220"}); Strings for <path> elements TweenLite.to(“#path”, 2, {morphSVG:"M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"}); *Note: if the shape you pass in is a <rect>, <circle>, <ellipse> (or similar), MorphSVGPlugin will internally create path data from those shapes. shapeIndex The shapeIndex property allows you to adjust how the points in the start shape are mapped. In order to prevent points from drifting wildly during the animation MorphSVGPlugin needs to find a point in the start path that is in close proximity to the first point in the end path. Once that point is found it will map the next point in the start path to the second point in the end path (and so on and so on). Due to the complexity of vector art there will be times that you may want to change which point in the start path gets mapped to the first point in the end path. This is where shapeIndex comes in. In order to specify the shapeIndex you need to use an object {} with shape and shapeIndex properties. The following code will map the third point in the square to the first point in the star. TweenLite.to("#square", 1, {morphSVG:{shape:"#star", shapeIndex:3}}); findShapeIndex() utility Experimenting with shapeIndex can be a bit of a guessing game. To make things easier we have created a stand-alone utility function called findShapeIndex(). This function provides an interactive user interface to help you visualize where the start point is, change it and preview the animation. You can load findShapeIndex() from: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js Once its loaded you simply tell it which shapes to use. findShapeIndex("#square", "#star"); Or pass in raw data: findShapeIndex("#square", "M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10"); See the Pen findShapeIndex() Docs by GreenSock (@GreenSock) on CodePen. The best way to get started is to drop your SVG into the pen above and alter the IDs to match your svg. Be sure to watch the video above which clearly illustrates how shapeIndex and findShapeIndex() work. Additional Notes shapeIndex only works on closed paths. if you supply a negative shapeIndex the start path will be completely reversed (which can be quite useful). Converting SVG shapes to paths Technically it’s only feasible to morph <path> elements or <polyline>/<polygon> elements, but what if you want to morph a <circle> or <rect> or <ellipse> or <line>? No problem - just tap into the utility method and have the plugin do the conversion for you: MorphSVGPlugin.convertToPath("#elementID"); You can pass in an element or selector text, so you could also have it convert ALL of those elements with one line: MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline"); This literally swaps in a for each one directly in the DOM, and it should look absolutely identical. It’ll keep the attributes, like the “id” attribute. So after the conversion, you should be able to target the elements pretty easily, just as you would before. <!-- An svg Like this: --> <rect id="endShape" width="100" height="100" fill="red"/> <!-- becomes --> <path id="endShape" fill="red" d="M100,0 v100 h-100 v-100 h100z"></path> Rotational Morphs? Canvas? Documentation View the official docs here for a full breakdown of the API. MorphSVGPlugin Examples Official MorphSVGPlugin Demo (at the top of this page) by Jack Doyle SVG Pencil Download by Chris Gannon "!?" to GreenSock Logo by Chris Gannon Send Email Success/Failure by Chris Gannon Father & Son by Diaco Count Down & Count Up by Chris Gannon Life is Short by Chris Gannon Bow & Arrow by Chris Gannon Simple Polyline Morphing by Jack Happy/Sad Face (click the face) by Chris Gannon Bad Hair Day (click the face) by Chris Gannon Flame by Sarah Drasner Interchangeable Hipster by Sarah Drasner Floating Duckie by Brad Larson Power of GSAP (lightening) by Diaco Animal Shapes by Carl Schooff Get your hands on MorphSVGPlugin MorphSVGPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download MorphSVGPlugin, just log into your account dashboard and grab the latest version of GSAP. Try MorphSVGPlugin for free on Codepen! There's a special [fully-functional] version of MorphSVGPlugin that we link to in our demos in our MorphSVGPlugin Collection on CodePen, so feel free to fork any of them, add your own SVG graphics, and take MorphSVGPlugin for a spin. Codepen is a fantastic way to experiment. We highly recommend it. Note: the special version of the plugin will only work on the Codepen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.
  9. Hi guys. Just wondering if it would be possible to use GSAP for animating simple page transitions in React? I have my index.js file rendering my app: // React Common Modules import React from 'react'; import ReactDOM from 'react-dom'; import { TransitionGroup, CSSTransition } from 'react-transition-group' import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import thunkMiddleware from 'redux-thunk'; import createLogger from 'redux-logger'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import Reducer from './Reducers/Reducer'; const loggerMiddleware = createLogger(); const createStoreWithMiddleware = applyMiddleware( thunkMiddleware, // Middleware for dispatch() loggerMiddleware // Middleware for loging )(createStore); let store = createStoreWithMiddleware(Reducer); // Main SCSS import './index.scss'; // Root React Component import App from './App'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root') ); Then I have my app.js // React Common Modules import React, { Component } from "react"; // React Router import { BrowserRouter, Switch, Route, Link, withRouter } from 'react-router-dom' import { TransitionGroup, CSSTransition } from 'react-transition-group' import 'gsap/TweenLite' import 'gsap/CSSPlugin' import 'gsap/EasePack' import 'gsap/TimelineLite' // Own Modules import { DefaultPage } from "./Pages/"; import { AboutPage } from "./Pages/"; class App extends Component { constructor(props) { super(props); } render() { return ( <TransitionGroup> <CSSTransition key={location.key} classNames='fade' timeout={1000}> <Switch location={this.props.location}> <Route exact path='/' component={DefaultPage} /> <Route exact path='/about' component={AboutPage} /> </Switch> </CSSTransition> </TransitionGroup> ); } } export default App; And then I have a SideMenu component with all my <Link> 's. Everything is working fine, I just can't get it to create a transition in between the routes, which is where I'd like to use GSAP. The timeout simply doesn't work. Here's the scenario I'm trying to accomplish: User is on the Landing Page Clicks /about link Color slides in from the left and covers the entire screen (using GSAP) while the landing page is still there beneath the color. The landing page leaves behind the color. The color slides out. About page is revealed. Does anyone know how to do this? Thanks!
  10. GreenSock

    ModifiersPlugin

    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 can define a "modifier" function for almost any property; this modifier intercepts the value that GSAP would normally apply on each update ("tick"), feeds it to your function as the first parameter and lets you run custom logic, returning a new value that GSAP should then apply. This is perfect for tasks like snapping, clamping, wrapping, or other dynamic effects. It's completely up to you! Parameters: value, target The modifier functions are passed two parameters: value (number | string) - the about-to-be-applied value from the regular tween. This is often a number, but could be a string based on whatever the property requires. For example if you're animating the x property, it would be a number, but if you're animating the left property it could be something like "212px", or for the boxShadow property it could be "10px 5px 10px rgb(255,0,0)". target (object) - the target itself For example, change the x of one object based on the y of another object or change rotation based on the direction it is moving. Below are some examples that will help you get familiarized with the syntax. Snap rotation The tween below animates 360 degrees but the modifier function forces the value to jump to the closest 45-degree increment. Take note how the modifier function gets passed the value of the property that is being modified, in this case a rotation number. See the Pen BzJxBB by GreenSock (@GreenSock) on CodePen. Clamp with Modulus The tween below animates x to 500 but the modifier function forces the value to wrap so that it's always between 0 and 100. See the Pen BzJxBB by GreenSock (@GreenSock) on CodePen. Carousel Wrap Have you ever built a carousel and wrestled with making it loop seamlessly? Perhaps you duplicated each asset or wrote some code that moved each item back to the beginning when it reached the end. With ModifiersPlugin you can get a seamless repeating carousel with a single staggerTo()! The example below tweens each box to a relative x position of "+=500". Click the "show overflow" button to see each box get reset to x:0 when it goes beyond 500... See the Pen QEdpLe by GreenSock (@GreenSock) on CodePen. Advanced demos We've only scratched the surface of what ModifiersPlugin can do. Our moderator Blake Bowen has been putting this new plugin to the test and has an impressive collection of demos that will surely inspire you. View the docs for ModifiersPlugin. Caveats: ModifiersPlugin requires TweenLite or TweenMax version 1.19.0 or later. RoundPropsPlugin taps into the same mechanism internally as ModifiersPlugin (to maximize efficiency, minimize memory, and keep kb down). Think of a roundProps tween as just a shortcut that creates a modifier that applies Math.round(), thus you cannot do BOTH roundProps and a modifier on the same property. It's easy to get that functionality, though, by just doing Math.round() inside the modifier function.
  11. GreenSock

    GSDevTools

    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. Your animation workflow is about to get a major boost. GSDevTools gives you a visual UI for interacting with and debugging GSAP animations, complete with advanced playback controls, keyboard shortcuts, global synchronization and more. Jump to specific scenes, set in/out points, play in slow motion to reveal intricate details, and even switch to a "minimal" mode on small screens. GSDevTools makes building and reviewing GSAP animations simply delightful. Get Started Load the JavaScript file //be sure to use a path that works in your dev environment Requirements GSDevTools requires TweenMax (well, actually just CSSPlugin, TweenLite, TimelineLite, AttrPlugin which are all included in TweenMax) version 1.20.3 or higher. It also uses Draggable under the hood, but in order to minimize hassle for end users, Draggable is included inside the GSDevTools file itself. How do I get it? GSDevTools is available to Club GreenSock members ("Shockingly Green" and above). Just download GSAP with the bonus files zip from your Dashboard. Try GSDevTools for free on CodePen. FAQ Why is my Global Timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward. Does loading GSDevTools impact runtime performance? Since it must monitor and record the root timeline, yes, there is a slight performance hit but probably not noticeable. Keep in mind that usually you'll only load GSDevTools while you're developing/reviewing your animations and then remove it when you're ready to launch, so ultimately it shouldn't be much of a factor anyway. Why isn't GSDevTools in the CDN or Github repo? Because it's a membership benefit of Club GreenSock. It's a way for us to give back to those who support our ongoing development efforts. That's why we've been able to continue innovating for over a decade. See https://greensock.com/why-license for details about our philosophy. Does GSDevTools work with other animation libraries? Nope, it depends on some unique capabilities baked into the GSAP architecture. What will I do with all the time this tool saves me? Take up a new hobby, ponder deep philosophical questions, make cookies - it's up to you.
  12. I am trying to do a simple tweening of increasing the radius of circles whenever the mouse gets clicked over an svg canvas. However, I am getting some jerking/choking on the tweening of the circles, and can't debug it why. This problem only happens when I try to create another circle, before the ones that are currently being animated finishes. Any help is greatly appreciated Main function code is the following: createCircle(evt) { const { clientX: x, clientY: y } = evt const id = `circle-${++this.lastCircleId}` this.circles.push({ x, y, id }) Vue.nextTick(() => { TweenLite.to(`#${id}`, 1, { attr: { r: 50 }, onComplete: () => { this.circles = this.circles.filter(circle => circle.id !== id) }, }) }) }, CodeSandbox example: https://codesandbox.io/s/vue-template-j9my3?fontsize=14 P.S. Sorry I posted a CodeSandbox example instead of CodePen, but couldn't really get the CodePen to work with vue template syntax.
  13. 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. Have you ever tried getting a realistic wiggle effect or tweaking just how bouncy an ease is? What about adding squash and stretch to a bounce? These are not easy tasks. Well, until now. Even though CustomEase, lets you create literally any easing effect that you can imagine (bounces, wiggles, elastic effects, whatever) by drawing them, it's difficult to plot a complex wiggle or bounce while making sure all the points are spaced correctly. Wouldn't it be nice if you could just set a few parameters (like number of wiggles or bounciness) and have that complex easing curve created for you? Wish granted. CustomWiggle CustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties (see the docs for details). Demo: CustomWiggle Types See the Pen CustomWiggle Demo : resized by GreenSock (@GreenSock) on CodePen. Options wiggles (Integer) - number of oscillations back and forth. Default: 10 type (String) "easeOut" | "easeInOut" | "anticipate" | "uniform" | "random" - the type (or style) of wiggle (see demo above). Default: "easeOut" amplitudeEase (Ease) - provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude's progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. timingEase (Ease) - provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the "type" (think of the 5 "types" as convenient presets for amplitudeEase and timingEase combinations). See the example codepen to play around and visualize how it works. How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, an ease just controls the ratio of movement toward whatever value you supply for each property in your tween. Sample code //Create a wiggle with 6 oscillations (default type:"easeOut") CustomWiggle.create("myWiggle", {wiggles:6}); //now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began. TweenMax.to(".class", 2, {rotation:30, ease:"myWiggle"}); //Create a 10-wiggle anticipation ease: CustomWiggle.create("funWiggle", {wiggles:10, type:"anticipate"}); TweenMax.to(".class", 2, {rotation:30, ease:"funWiggle"}); Wiggling isn't just for "rotation"; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on "x" and "y", as demonstrated here. CustomBounce GSAP always had the tried-and-true Bounce.easeOut, but there was no way to customize how "bouncy" it was, nor could you get a synchronized squash and stretch effect during the bounce because: The "bounce" ease needs to stick to the ground momentarily at the point of the bounce while the squashing occurs. Bounce.easeOut offers no such customization. There was no way to create the corresponding [synchronized] scaleX/scaleY ease for the squashing/stretching. CustomEase solves this now, but it'd still be very difficult to manually draw that ease with all the points lined up in the right spots to match up with the bounces. With CustomBounce, you can set a few parameters and it'll create BOTH CustomEases for you (one for the bounce, and one [optionally] for the squash/stretch). Again, think of CustomBounce like a wrapper that creates a CustomEase under the hood based on the variables you pass in. Options strength (Number) - a number between 0 and 1 that determines how "bouncy" the ease is, so 0.9 will have a lot more bounces than 0.3. Default: 0.7 endAtStart (Boolean) - if true, the ease will end back where it started, allowing you to get an effect like an object sitting on the ground, leaping into the air, and bouncing back down to a stop. Default: false squash (Number) - controls how long the squash should last (the gap between bounces, when it appears "stuck"). Typically 2 is a good number, but 4 (as an example) would make the squash longer in relation to the rest of the ease. Default: 0 squashID (String) - the ID that should be assigned to the squash ease. The default is whatever the ID of the bounce is plus "-squash" appended to the end. For example, CustomBounce.create("hop", {strength:0.6, squash:2}) would default to a squash ease ID of "hop-squash". How do you get the bounce and the squash/stretch to work together? You'd use two tweens; one for the position ("y"), and the other for the scaleX/scaleY, with both running at the same time: //Create a custom bounce ease: CustomBounce.create("myBounce", {strength:0.6, squash:3, squashID:"myBounce-squash"}); //do the bounce by affecting the "y" property. TweenMax.from(".class", 2, {y:-200, ease:"myBounce"}); //and do the squash/stretch at the same time: TweenMax.to(".class", 2, {scaleX:140, scaleY:60, ease:"myBounce-squash", transformOrigin:"center bottom"}); See the Pen CustomBounce from GreenSock by GreenSock (@GreenSock) on CodePen. Where can I get it? CustomWiggle and CustomBounce are membership benefits of Club GreenSock ("Shockingly Green" and "Business Green" levels). It's our way of saying "thanks" to those who support GreenSock's ongoing efforts. Joining Club GreenSock gets you a bunch of other bonus plugins and tools like MorphSVGPlugin as well, so check out greensock.com/club/ for details and sign up today.
  14. 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. Published: 2015-08-07 Google sparked an urgent and rather violent shift away from Flash technology when it announced that Chrome will pause "less important" Flash content starting as early as September 2015. Flash has served as the de facto standard for banner ads for more than a decade. Firefox also blocked Flash after major security issues were discovered and Facebook's security chief called for Adobe to kill Flash once and for all. Amazon says it will no longer accept any Flash ads after September 1. Clearly Flash is on its way out of web browsers. Advertisers can no longer afford its liabilities. Now what? Modern browsers are remarkably capable of handling slick animations natively using HTML, JavaScript, and CSS (collectively referred to as “HTML5” or just “H5”), making them the obvious choice as the tag-team successor to Flash. No more plugins. However, a few barriers are clogging up the transition. Some are technical, some are political, and some have to do with a glaring lack of information. Let's address things head-on, identify some solutions, and get things moving in the right direction. GreenSock has a rich heritage in the banner ad industry, serving as its most popular animation library in both Flash and HTML5. In fact, it’s one of the fastest-growing JavaScript tools on the entire Internet and it was originally born out of banner-specific needs. We obsess about animation in the browser, studying the technical challenges, performance benchmarks, and workflow. Consequently, we’re in a unique position to lend a hand during this transition and perhaps illuminate the path forward. 40 kilobytes? Are you kidding? Years ago, when bandwidth was a tiny fraction of what it is today, the ad industry codified a set of standards for banner ad file sizes. A common limit was 40kb (sometimes even 30kb) including all images, fonts, animations and scripts which Flash compressed into a single amazingly small swf file. Technically each publisher determines its own file size policies, but almost everyone looks to the IAB (Interactive Advertising Bureau) as a standards-setting body, like the W3C for web browsers. The IAB exists to help guide the industry but they don't mandate or enforce anything. When Flash ruled the banner ad landscape, certain file size specs were recommended by the IAB and the system worked well. However, the technology landscape has changed drastically. Bandwidth, page size, and banner budget over the yearsBandwidth (Mbps)Banner budget (kb)Page size (kb)2008200920102011201220132014201540kb33Mbps40kb1,795kb Year Bandwidth (Mbps) Banner budget (kb) Page size (kb) Jan 1, 2008 5.86 40 312 Jan 1, 2009 6.98 40 507 Jan 1, 2010 9.54 40 679 Jan 1, 2011 10.43 40 788 Jan 1, 2012 12.7 40 1081 Jan 1, 2013 15.62 40 1529 Jan 1, 2014 20.83 40 1622 Jan 1, 2015 32.78 40 1795 Page size (kb) Since 2008, average bandwidth has grown by a factor of 5.6 which is remarkably on-pace with the growth of the average web page size (5.7), but the IAB has been cautious about declaring HTML5 specs due to all the complexities involved. They released a set of HTML5 guidelines in 2013, but omitted any file size specs, saying only that HTML5 ads weigh "more" than swf ads. Without specs, many publishers clung to the safe limits of yesteryear. The gatekeepers who impose the 40kb budgets often do not have the authority or wherewithal to allow more than what the latest IAB spec dictates. Consequently, developers are forced to shoehorn HTML5 banners into archaic Flash specs which isn't what the IAB intended. This must change. From our vantage point, fear is driving the industry. Publishers and networks are afraid to raise the file size limits without IAB approval. Some do it anyway, but disagree on exactly how much, leading to wild variations. Developers have no choice but to build for the least common denominator in their ad campaign which is either totally unclear or ends up being the dreaded creativity-crushing 40kb. (UPDATE: The IAB released a draft of its new HTML5 specs.) HTML5 is fundamentally different...embrace that HTML5 banners often weigh 3-5 times as much as a Flash swf but far too many people myopically focus on the aggregate total file size. They miss the unique strengths of HTML5 technology that we should be exploiting - shared resources and browser caching. These have a tremendous impact on loading time and overall performance which is the whole point of the file size limits anyway! Flash compiled all assets into a single swf meaning that if 10 different banners on a site all used a certain library, it got baked into each and every swf. End users paid the file size price 10 times. Multiply that by millions of ads and it gets pretty crazy. In HTML5, however, a library can be dropped onto a CDN (content delivery network) and shared among all banners, thus end users only load it once and it’s completely "free" thereafter...for all ads pointing at that CDN...on all sites. This is a BIG deal. It means that common animation chores like the requestAnimationFrame loop, timing, sequencing, intelligent GPU layerizing, lag smoothing, compatibility workarounds, performance optimization, etc. can be extracted and shared among them all (much like what the Flash Player did for swf files). The unique banner-specific code can be much more concise, reducing overall load times and improving performance. File size limitations should be applied to the banner-specific assets, excluding the shared resources that drive common functionality. Imagine how silly it would have been if the 17MB Flash Player download was included in the aggregate file size for each swf banner. Ad networks and publishers can put a certain subset of tested-and-approved libraries onto their CDNs and exempt them from file size calculations. We're thrilled to see industry leaders like Advertising.com/AOL, Google DoubleClick, Flashtalking, and Sizmek already taking this approach with GSAP. This strategy allows developers to avoid burning hours manually cooking up their own proprietary libraries to fit within the ad specs. Ad networks and publishers win because load times (and costs) are lowered and it's easier to troubleshoot problems when a common toolset is used. They reap the benefits of all the compatibility and performance optimizations in tools like GSAP. End users get ads that perform better, load faster, and look more appealing. Animation technologies and approaches For those tasked with building HTML5 banners, the choices are perplexing. Is it best to use a visual IDE like Adobe Edge Animate, Google Web Designer, or Tumult Hype? Even Flash is capable of outputting HTML5 content. These tools can make building ads easier (especially for designers who don’t want to write code), but a common complaint is that the resulting output is bloated and slow, making them ill-suited for banner ads. Some networks explicitly state that they won't accept ads built with these tools. We'd love to see the visual tools mature and export concise, performant, ad-friendly code because plenty of designers aren't comfortable hand-coding banners yet. Ideally, they'd tap into GSAP under the hood so that designers and developers could collaborate on the same files without worrying about runtime redundancies. There are also network-specific banner-building tools but their proprietary nature makes them impractical for many campaigns. If an agency uses one network’s proprietary tool and then their client asks to run the ad on another network too, it must be rebuilt. Learning how to use each network's proprietary tool can be cumbersome. Hand-coded animations are usually much lighter-weight, performant, and universally accepted, but building them requires a particular skill set. And which underlying technologies should be used? CSS animations? jQuery? GSAP? CreateJS? Once again, answers vary wildly among ad networks and publishers. The goal of this article isn't to provide an in-depth review or comparison of the various tools. Each has its own strengths and weaknesses, but let's briefly touch on some of the major runtime animation technologies: CSS transitions and CSS animations - these are supported in all modern browsers, but not IE9 or earlier. They're cheap from a file size standpoint and they perform well. For simple animations like button rollovers, they're great. However, file size rises quickly and things get cumbersome when you attempt even moderately complex animations. Simply put, they will take longer to build, they won't work in some older browsers, there are bugs (particularly when animating SVG elements), and certain tasks are outright impossible. Additional reading: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ and http://greensock.com/transitions/ and https://css-tricks.com/svg-animation-on-css-transforms/ jQuery - it was never intended to be a robust animation tool, so jQuery suffers from poor performance and workflow issues. Most ad networks strongly advise against using it. GSAP is up to 20x faster. Additional reading: http://greensock.com/jquery/ CreateJS - Adobe Flash can optionally export to this canvas-based library. You can't just publish existing Flash banners to CreateJS (you must do some conversion work and leverage JavaScript instead of ActionScript) but for designers who are already used to the Flash interface, this can be a boon. One down side to canvas-based libraries is that you lose accessibility (the browser sees it as essentially a blob of pixels), but that's probably not a top priority for banners. File size can also become a concern (possibly mitigated by CDN standardization). You can use GSAP to animate CreateJS content. Additional reading: http://createjs.com Zepto - like a lightweight version of jQuery that uses CSS transitions under the hood for animations. Zepto is better than jQuery for banners, but it suffers from similar workflow issues as well as the inconsistencies/bugs inherent in CSS transitions/animations (like with SVG transforms). Active development seems to have stalled. Additional reading: http://zeptojs.com Web Animations - a new spec being worked on that has a lot of promise, but it just isn't a realistic contender at this point because it is in flux and several browser vendors remain noncommittal about ever supporting it. The polyfill has performance problems. Additional reading: http://w3c.github.io/web-animations GSAP - Widely recognized as the performance leader, GSAP solves all kinds of real-world animation problems from browser inconsistencies to workflow headaches (far too many to go into here). The Flash banner ad community is full of designers and developers who use GSAP daily, making it much easier to transition to HTML5; no new syntax to learn. Ongoing development and support have a solid track record for over 7 years. Additional reading: http://greensock.com/why-gsap/ Recommendations Based on our experience and the results from our survey, we suggest the following: Standardize a few JavaScript libraries Ideally, the IAB would equip the community with a short list of recommended libraries that get CDN-ified and exempted from file size calculations. Historically, the IAB has been extremely reluctant to officially endorse any third party tools. That's understandable - it could be seen as playing favorites or unfairly excluding someone's favorite library. However, without specific recommendations, the HTML5 landscape is so fractured and complex that it will result in a free-for-all (which is basically what it is now). The IAB can set the tone and move the focus away from aggregate total file sizes and into the modern era that leverages shared resources and browser caching to deliver excellent performance. It is imperative that this list of "recommended" libraries be very short, otherwise the caching impact will be diluted. The IAB can run their own independent tests and look at performance, features, compatibility, support, workflow benefits, and overall industry demand to determine which libraries get recommended. Of course we feel strongly that GSAP belongs on that list because: It is the top performer. It has widespread industry acceptance, both in Flash and HTML5. It's recommended by Google, used by the biggest brands in the world, etc. It is framework-agnostic, super flexible and robust, able to animate anything. It is professionally supported, yet free to use in banner ads. Modernize file size specs Given the 5.6x growth factor of bandwidth and page size since 2008, it seems entirely reasonable to adjust the old 40kb limit to 200kb (5x) for the modern HTML5 era. This is entirely consistent with some in-depth testing that has been done recently aimed at identifying the file size threshold at which real-world users perceive a dip in performance. The results showed that the threshold was upwards of 250kb. Combined file size isn't the only issue that contributes to slow load times; the number of server requests can have a significant impact. A single 300kb file can often load faster than 200kb split among 20 files. HTML5 banners can't realistically mash everything into one file, though. Doing so would kill the benefits of caching and resource sharing. So a reasonable compromise seems to be a 10-file maximum. Sprite sheets can be used to combine images. Given all the factors, we'd recommend the following for standard (non-rich media) ads: 200kb combined total (gzipped) Maximum of 10 files. Any additional must be loaded "politely" (after the parent page finishes loading) Shared CDN resources like GSAP don't count toward these totals. Some have suggested slicing the 200kb standard limit into two parts - a 50kb initial load, and then the rest "politely" loads. However, we advise against this for standard (non-rich media) ads because it unnecessarily complicates the design and production process as well as QA and enforcement. Rich media ads will likely require more files and kb than the limits mentioned above, and those should be polite-loaded. By "rich media", we mean ads that contain video or expand or perform API calls (like feeding the viewer's zip code to a backend script), etc. Update documentation and guidelines It is surprisingly difficult to get answers to some of the most basic questions when preparing a banner ad campaign for even the biggest networks and publishers. What are the file size limits? Which libraries can be used? Do CDN resources count against the total file size? Is there a network-specific CDN link for common libraries? Online docs either have outdated information or none at all related to HTML5. Drop support for IE8 Legacy IE support is not just painful for developers, it's exceedingly expensive for advertisers. Certain effects are outright impossible, so creatives must learn about the IE8 pitfalls and adjust their designs. Developers are forced to rebuild entire portions, implement workarounds and perform extra testing, all to accommodate a tiny fraction of the web audience who probably don't represent the demographic that advertisers are targeting anyway. This was never an issue for Flash, but it's a HUGE issue for HTML5 because it relies on native browser technologies that are absent from older browsers like IE8. Our recommendation is to draw a line in the sand and drop support for IE8 for sure, and potentially even IE9. Consider SVG instead of iframes Displaying ads inside an iframe is nice for security, but it forces ads into a strict rectangular space (ruling out fancy overlays with transparency/mask effects that show the main web page behind) and there's a performance price too. SVG is widely supported and it has some excellent transparency/masking capabilities, plus it can serve as a single container for an entire ad (see Chris Gannon's blog post and video)! Further testing needs to be done to better understand the performance and security implications, but it certainly seems like a worthwhile contender. Create a gallery of sample banners and templates Rather than pouring over specs and instructions and then building something from scratch, most developers prefer to analyze banners that already conform to the standards and use one as a template for their own project. Each network has different API's and ways you must track clicks, etc., so it would be lovely if each one provided a gallery of demos at each standard size. Codepen.io is a great place to host a collection because it's so easy to see (and edit) the HTML, CSS, and JS as well as the result all in one place. Developers can simply click the "fork" button and start producing their own version of that banner immediately in the browser. Codepen even integrates nicely with crossbrowsertesting.com for easy QA. Adjust client expectations As the industry transitions from Flash to HTML5, clients must be made aware of the design, budget, and schedule implications. HTML5 banners take more time to produce and test, therefore they will be more expensive. Plus there are certain effects that were easy in Flash but are virtually impossible in HTML5, so creative expectations need to be adjusted as well. Common GreenSock Questions With the broader discussion out of the way, let's narrow our focus to GreenSock for a moment and address some of the most frequently asked questions: Which networks support GSAP? All networks that we're aware of allow GSAP, and most even exempt its file size from the ads and host it on their CDNs. Google DoubleClick recommends GSAP for complex animations. Here's a breakdown of how some of the major players stack up: Allows GSAP Excludes GSAP from file size calculation* Hosts GSAP on CDN Advertising.com/AOL YES YES YES Google DoubleClick YES YES YES Flashtalking YES YES YES Sizmek YES YES YES Flite YES YES YES Cofactor YES YES YES AdWords YES YES YES *Unless publisher objects which is uncommon TweenMax is too big! Where's TweenNano? Let's face it: TweenMax (the most robust tool in the GSAP suite) is overkill for many banners that are only doing simple fades and movement. Wouldn't it be smart for GreenSock to create a super-small animation engine that's targeted at banners and only has the basic features? In the Flash days, we did exactly that and called it "TweenNano". It weighed about 2kb. On the surface, it sounds like a great idea but there are several reasons we avoided TweenNano in the HTML5 toolset: Caching - this is the biggest factor; loading the JavaScript file is a one-time hit and then the browser caches it, mitigating the entire loading issue on every page thereafter. Realistically, TweenNano must include a subset of TweenLite and CSSPlugin features and weigh at least 8kb; how much longer would it take for the average user to load an extra 25kb for TweenMax? It's not even noticeable (less than one second). So it doesn't seem like a worthwhile tradeoff to rip out all those features just to gain a fraction of a second only the first time it loads, especially for banners where caching and resource sharing could be used so effectively. If networks toss TweenMax.min.js on their CDNs, it effectively becomes "free" (zero load time) very quickly, giving them instant access to all the timeline tools plus a bunch of advanced plugins. Thus it seems smarter to press the full-featured, super-fast TweenMax engine into service rather than a sliced-down TweenNano with limited effects. Performance - GSAP has been engineered with a huge priority on performance which sometimes comes with a file size tradeoff. We could accomplish the same tasks with less code in places, but runtime performance would suffer. We feel strongly that when it comes to animation, it's wiser to pay a small up-front kb tax (only a fraction of a second in most cases) in order to get maximum runtime performance. Animations must look smooth and conserve battery power. Think of it this way: would you rather buy a computer that boots up 2 seconds faster or one that's 30% faster all the time (after it boots)? Flexibility/Creativity - what if you want to animate a non-essential CSS property like boxShadow or slide along a curve or scrub through a timeline? Even if there's just one part of your banner that needs a more advanced feature, it presents a dilemma. Creativity is hampered. Again, the fraction of a second one-time cost difference for TweenMax seems well worth it for the added flexibility and peace of mind. API confusion - years ago, Adobe created a lightweight version of the Flash Player dubbed "Flash Lite" with similar aspirations (bake only the essentials into a lighter weight flavor), but it was a complete failure. One of the problems was that developers couldn't remember which features were available in the regular Flash Player versus Flash Lite. Likewise, TweenNano's feature disparity would create some confusion/frustration. What about creating a tool that lets users select only the features they need, and then it spits out a customized stripped-down version of TweenMax? Again, this sounds appealing, but it would likely lead to worse load times because instead of having one common TweenMax that gets shared and cached, every banner would have its own different (and partially redundant) flavor to load. Ultimately, we're committed to delivering the tools that are needed most, so if the broader industry decides not to leverage shared resources and publishers insist on sticking to all-inclusive aggregate file size totals, we're open to creating TweenNano. Luckily, it looks like there's excellent momentum behind TweenMax getting CDN-ified and exempted from file size limits. In our opinion, that's definitely the smartest approach. What's so special about GSAP? It's beyond the scope of this article to explain all the benefits of using GSAP; see http://greensock.com/why-gsap/ for a summary. If you're still wondering what the big deal is, we'd encourage you to find someone who is proficient with it and ask about their experience. Usually people who take the time to learn it have a "light bulb" moment pretty quickly and never want to go back to using other libraries or CSS. It's difficult to explain to the uninitiated - lists of features don't really do it justice. It's not merely about performance (although that's a biggie) - it's about feeling empowered to animate almost anything you can imagine with minimal code. Do I need a commercial license to use GSAP in banner ads? GreenSock's standard "no charge" license covers usage in banner ads even if you get paid a one-time fee to produce the banners. We fully encourage the use of GSAP in banner ads and beyond. You may want to check out Club GreenSock for some bonus plugins that allow you to easily achieve advanced effects. Is anyone building a GUI for GSAP? A visual tool for building GSAP-based animations is a popular request, and we have been approached by several large and small companies about the possibilities, but there's nothing rock solid to report yet. We hope that companies like Adobe and Google will offer export options from their tools that leverage GSAP as the runtime engine and produce well-formatted, concise code. There's a pretty neat tool called Animachine that's in alpha and can be installed as a Chrome extension. It shows promise, but isn’t entirely stable at this point. There are also several online GSAP-based banner builders: http://html5maker.com/, https://tweenui.com/, and http://www.loxiastudio.com. Where can I get GSAP training? You can have GreenSock come directly to your organization and sit with your team to get them up to speed quickly. We can even convert one of your Flash banners and then teach you how we did it which is an excellent way to learn banner-specific tricks. The Q&A sessions are invaluable. We have limited slots available, though, so contact us as soon as possible to get your event scheduled. There are plenty of other learning resources available: GreenSock's getting started video/article GreenSock's learning resources New GreenSock eBook (published by Noble Desktop) Lynda.com course ihatetomatoes.net course (intermediate/advanced) Noble Desktop class in NYC 02Geek course Egghead.io The GreenSock forums are a fantastic place to not only ask your question(s), but also poke around and see what others are saying. It's one of the best places to learn even if you never ask a question. There are plenty of demos on codepen.io as well. For inspiration, we'd suggest following these people: Chris Gannon Sarah Drasner Petr Tichy Sara Soueidan Diaco.ml Blake Bowen Ico Dimchev UPDATE: The IAB released a draft of its new HTML5 specs and is soliciting public feedback before finalizing the document. The outstanding news is that they agreed with our assessment regarding a 200kb limit for standard ads. The IAB is expected to release an update to its HTML5 Best Practices guide soon which will likely contain a short list of JavaScript libraries that are recommended for exemption from file size calculations. We're confident GSAP will be on that list. #network-support { border-spacing: 1px; border-collapse: separate; background-color: #ccc; width: 830px; line-height: 1.1em; } #network-support thead td { background-color: #333; color: white; } #network-support td { text-align: center; vertical-align: bottom; font-family: Asap, Arial, sans-serif; padding: 10px 14px; background-color: white; } #network-support .network { text-align: left; font-weight: bold; } #network-support .yes { background-image: url(/wp-content/themes/greensock/images/licencing-check.png); } #network-support .yes, #network-support .no { background-color: white; background-repeat: no-repeat; vertical-align: middle; background-position: center center; background-size: 35px 35px; color: transparent; } .disclaimer { font-size: 11px; color: #777; padding: 2px; }
  15. 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. There are some interesting (and surprising) performance implications of using CSS animations that aren't widely known. I stumbled across a few of them while running tests for a customer in the advertising industry who is pushing to have GSAP adopted as the standard, so I recorded a screencast explaining what I found. I figured it was worth sharing: Summary Timeline recordings in Chrome Dev Tools don't show the overhead involved with CSS animation of transforms, so people often misinterpret the [lack of] data. Recordings look "clean" with CSS and "dirty" with JS which leads to faulty conclusions about performance. CSS animations of transforms used twice as much CPU compared to JS according to Chrome's task manager. CSS animations caused the main thread to bog down more than using JavaScript animations. User interaction is typically handled on the main thread, making things feel sluggish to the user. It is especially costly if you animate transforms along with almost any other property at the same time. Webkit browsers have synchronization problems. JavaScript was faster than CSS animations on every device that I ran this test on – the only exception was animating transforms in Webkit browsers (and then there's that heavy cost on the main thread and sync problems). In order to independently control the timing/easing of transform components (rotation, scale, skew, position) in CSS, you must create a DOM node for each which negatively impacts performance. With JavaScript, no such workarounds are necessary. (see note below) I love Dev Tools - I'm not knocking it at all. These things are just tough to measure. Do your own tests! Don't put too much faith in Dev Tools or my tests. Use your eyes because ultimately perception is what matters to end users. Smooth movement and responsive UI are both important. Links Raw Codepen test Google's Paul Lewis addresses CSS vs. JS Animations A great article about hardware accelerated CSS by Ariya Hidayat Why GSAP? - a practical developer's guide UPDATE: After recording the video, I did some more tests that showed that one of the biggest contributors to the slowdowns in the pure CSS version was the fact that multiple elements had to be nested in order to accomplish the independent transform component controls. In other words, staggering the start/end times (or easing) of rotation, scale, and position is practically impossible in pure CSS unless you nest things like that, but there's a relatively significant performance tradeoff. When nesting could be avoided, pure CSS animation of only transforms did appear smoother on webkit browsers under heavy pressure and it was basically indistinguishable from optimized JS animations under all other levels of pressure.
  16. 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.
  17. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. Specific stagger tweens (like staggerTo) have been removed in GSAP 3 because staggers are not supported in all GSAP tweens! Please see the GSAP 3 release notes for details. 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.
  18. See the Pen SplitText: Multiple Split Types by GreenSock (@GreenSock) on CodePen. This demo shows how you can split text into characters, lines and words (or any combination). Check out how easy it is to animate text once it is split. Be sure to check out SplitText and the [docs id="js.SplitText" linktext="SplitText documentation"].
  19. 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. GSAP's CSSPlugin is now super-charged to handle some slick new CSS3 properties like 3D transforms, boxShadow, textShadow, borderRadius and clip. Plus you don't need to worry about a litany of vendor prefixes. GSAP makes it easy to create next-generation effects today. [Note: the animation below is NOT a video - it's regular DOM elements being animated with GSAP. And yes, the scrubber works!] 3D transforms textShadow boxShadow borderRadius clip JS -moz- -o- -webkit- -ms- -no-more- play These features work in virtually all modern-day browsers (see caniuse.com for details about browser support for each feature). Generally if the browser supports the css property (browser-prefixed or not), you can animate it with GSAP's CSSPlugin. In fact, GSAP even works around several browser bugs and glitches to deliver a whole new level of consistency to your animations. It can't work miracles or, for example, permit fancy 3D transforms in IE8, but it does a bunch of work under the hood to empower these features as consistently as possible. 3D Transforms Browser support: GOOD (Chrome 12, Safari 4, Firefox 10, IE 10, iOS 3.2, Android 3.0) see details GSAP makes it a breeze to create amazing 3D effects. In addition to all the standard 2D transform properties like rotation, scaleX, scaleY, x, and y, you can also tween 3D properties like rotationX, rotationY, rotationZ, z, perspective and transformPerspective. You can even create multiple tweens that animate each property independently in a staggered fashion and/or with different eases (something virtually impossible to do with CSS3 transitions). In order to get the most out of these 3D properties, it's important to understand how perspective and transformPerspective work. They both affect the amount of distortion applied in 3D space. transformPerspective affects only the element that is being animated, making it look as though it has its own distinct vanishing point in its own 3D space. You can choose to give each element a transformPerspective specifically or use CSSPlugin.defaultTransformPerspective to set a default that will be used for all animated elements that don't have one specifically defined. transformPerspective no transformPerspective No visual distortion at all. Impossible to distinguish vanishing point or depth. DOM elements by default have no transformPerspective. transformPerspective:200 The lower the transformPerspective, the more extreme the distortion. transformPerspective:600 With a higher value the 3D effect is less pronounced. play perspective should be applied to the parent of the element(s) being animated - an element's perspective affects all of its children, allowing them to share a common vanishing point. Typically this is the best way to apply realistic perspective to multiple elements (instead of using transformPerspective on each child element). Practically speaking, you'd almost never use BOTH transformPerspective AND perspective. transformPerspective Vs perspective transformPerspective is applied to each box causing each box to have its own vanishing point A single perspective is applied to the parent div of all the boxes causing each box to share the same vanishing point play transformOrigin can add some really interesting effects - think of it like a pivot point around which your transforms happen. By default, it is in the center of the element ("50% 50%"). transformOrigin is a space-delimited string of values in the following order [x-axis y-axis z-axis] (the z-axis value is optional). You can define the values using the keywords "top", "left", "right", or "bottom" or use percentages (bottom right corner would be "100% 100%") or pixels. transformOrigin The negative z-index (-200) set in the transformOrigin properties of the second animation changes the effect drastically. TweenMax.to(box1, 3, {rotationY:360, transformOrigin:"left top"}) TweenMax.to(box2, 3, {rotationY:360, transformOrigin:"left 50% -200"}) play Caveats: Performance can vary greatly between the browsers. Generally Webkit browsers like Chrome and Safari do best by far, and Firefox lags behind but updates are getting pushed out pretty aggressively by everyone so things can change fast. In some browsers, you may notice a slight shift of pixels when an element starts/ends a 3D animation. This has nothing to do with GSAP - it's the browser jumping into 3D mode and working with the GPU. The only known workaround is to make sure you apply some sort of 3D transform from the beginning which you could do in your css like "transform:translateZ(0.1px);" (plus the obligatory vendor-prefixed variations). Font antialiasing can appear to change when there's a 3D element on screen. Again, this is a browser issue and has nothing to do with GSAP. In Webkit browsers, you can [mostly] resolve this by setting -webkit-font-smoothing:antialiased in your css. If a browser doesn't support 3D transforms, they will simply be ignored (no errors are generated). In some versions of Firefox, elements with BOTH a boxShadow AND 3D transforms applied don't always render correctly (again, it's a browser issue). We're not aware of a workaround but we expect Firefox to fix the bug in a future release. IE10 supports 3D transforms, but it does not support transformStyle of "preserve-3d" (see Microsoft's site for details). textShadow Browser support: GOOD (Chrome 22, Safari 5.1, Firefox 15, IE 10, Opera 12.1, iOS 3.2, Android 2.1) see details textShadow takes a space-delimited string consisting of up to 4 values (just like standard css) h-shadow: The horizontal offset of the shadow. Negative numbers are allowed. v-shadow: The vertical offset of the shadow. Negative numbers are allowed. blur: Blur distance (optional). color: Shadow color (optional). Use any color format: #ff000, #f00, red, rgb(255, 0, 0) or rgba(255, 0, 0, 0.5) for control over the opacity of the shadow. TweenMax.to(element, 0.2, { textShadow:"10px 10px 10px rgba(255, 255, 255, 0.5)" }); Move your cursor over each word to see a different textShadow effect. GLOW BLACKOUT GHOST TweenMax.to(glow, 0.2, { textShadow:"2px 2px 15px rgba(145, 233, 0, 1)", color:"#91ff00" }); TweenMax.to(blackout, 0.2, { textShadow:"1px 1px 1px rgba(255, 255, 255, 0.5)", color:"#000" }); TweenMax.to(ghost, 0.2, { textShadow:"0px 0px 15px white", color:"none" // IE10 unfortunately hides the shadow too }); boxShadow Browser support: VERY GOOD (Chrome 22, Safari 5.1, Firefox 15, IE 9, Opera 12.1, iOS 3.2, Android 2.1) see details A nice boxShadow animation can visually lift an element off the screen or add an attention-grabbing glow effect. Repeat and yoyo a TweenMax to give it a pulsing glow easily. boxShadow takes a space-delimited string consisting of up to 5 values in standard css form: h-shadow: The horizontal offset of the shadow. Negative numbers are allowed. v-shadow: The vertical offset of the shadow. Negative numbers are allowed. blur: Blur distance (optional). spread: Expansion amount of the shadow beyond the size of the element (optional). color: Shadow color (optional). Use any standard color format like #ff000, #f00, red, or rgb(255, 0, 0). TweenMax.to(element, 0.5, { boxShadow:"0px 0px 10px 10px rgb(0, 204, 0)" }); Move your cursor over the buttons to see a variety of boxShadow effects. sharp shadow blur shadow black spread orange glow green pulse white blur TweenMax.to(sharpShadow, duration, { boxShadow: "10px 10px", }); TweenMax.to(blurShadow, .3, { boxShadow: "10px 10px 10px", backgroundColor:"black" }); TweenMax.to(blackSpread, .3, { boxShadow: "0px 0px 10px 6px black", backgroundColor:"black" }); TweenMax.to(orangeGlow, .3, { boxShadow: "0px 0px 10px 4px #f60", backgroundColor:"#f60", borderColor:"#f60" }); TweenMax.fromTo(greenPulse, 0.7, { boxShadow: "0px 0px 0px 0px rgba(0,255,0,0.3)" }, { boxShadow: "0px 0px 20px 10px rgba(0,255,0,0.7)", repeat: -1, yoyo: true, ease: Linear.easeNone }); TweenMax.to(bsBox5, 0.5, {backgroundColor:"black"}); TweenMax.to(whiteBlur, .3, { boxShadow: "0px 0px 24px 6px white", backgroundColor:"white", color:"#999" }); borderRadius Browser support: VERY GOOD (Chrome 22, Safari 5.1, Firefox 15, IE 9, Opera 12.1, iOS 3.2, Android 2.1) see details CSSPlugin deftly handles a variety of borderRadius values, animating between them with ease. Specify the radii of all 4 corners in a single string and CSSPlugin will know exactly what to do. Use px, em, % or any unit you want, just like standard css. //applies same value to all 4 corners: TweenMax.to(element, 1, {borderRadius:"25px"}); //unique values for top-left, top-right, bottom-right, bottom-left TweenMax.to(element, 1, {borderRadius:"10px, 4px, 12px, 0px"}); //top-left and bottom-right 10px | top-right and bottom-left 4px TweenMax.to(element, 1, {borderRadius:"10px, 4px"}); The demo below illustrates a variety of ways to animate borderRadius. Sample a variety of borderRadius animations by rolling over each grey shape. TweenMax.to(box, .75, { //all 4 corners borderRadius:"25px" }); TweenMax.to(box, .75, { //all 4 corners borderRadius:"50%" }); TweenMax.to(box, .75, { //top-left and bottom-right | top-right and bottom-left borderRadius:"0px 20px }); TweenMax.to(box, .75, { //top-left | top-right and bottom-left | bottom-right borderRadius:"0px 20px 50px" }); TweenMax.to(box, .75, { //top-left | top-right | bottom-right | bottom-left borderRadius:"0px 20px 50px 50px" }); TweenMax.to(box, .75, { //top-left | top-right | bottom-right | bottom-left borderRadius:"50px 50px 50px 0px" }); clip Browser support: VERY GOOD (Chrome 2, Safari 1.3, Firefox 1, IE 9, Opera 9.2, iOS 3.2, Android 2.1) see details The clip css property controls the clipping region for an absolutely positioned element (that's not a GSAP limitation - that's how it works in plain css too). Any part of an element that would render outside the clipping region will be invisible. This includes the content of the element and its children, backgrounds, borders, outlines, and even any visible scrolling mechanism. You define the rectangle as "rect()" containing a comma-delimited list of four values — top, right, bottom, and left—in that order. Negative length values are allowed. The top and bottom positions are relative to the top border edge of the element’s box. The left and right positions are relative to the left border edge in a left-to-right environment, or to the right border edge in a right-to-left environment. TweenMax.to(element, 0.5, { // rect(top, right, bottom, left) clip:"rect(0px,150px,150px,0px)" }); Move your cursor over the images to see a variety of clip effects. TweenMax.from(img1, 1, {clip:"rect(50px 100px 50px 0px)"}) TweenMax.from(img2, 2, {clip:"rect(100px 0px 100px 0px)"}) TweenMax.from(img3, 2, {clip:"rect(50px 50px 50px 50px)"}) TweenMax.from(img4, 2, {clip:"rect(0px 100px 100px 100px)"}) When doing a from() tween (as demonstrated above) that uses the css clip property the target of the tween must have a clip property applied prior to the tween running. View a simple example or the full demo code. Note: although the sample code on this page uses TweenMax, CSSPlugin works equally well with TweenLite. Just don't forget to load CSSPlugin with TweenLite (it's already included inside TweenMax's js file for convenience). Conclusion There has never been a better time for animation in the browser. Before now, developers had to wrestle with clunky css transitions or css animations which can't accommodate even moderately complex sequences with fine-tuned control over individual properties or deliver solid control over entire sequences, plus they couldn't work around some of the browser bugs (like Safari's major transformOrigin inconsistency or Firefox's randomly disappearing 3D transforms) and they required a bunch of prefixes and redundant code. JavaScript options were very limited as well and none (that we could find) solved some key issues. With GSAP, you can finally get the control and consistency you need and it delivers solid performance as well (much better than jQuery - see the "cage match" for a detailed comparison). Make sure you download a fresh copy of the GSAP JavaScript files from the main GSAP JS page and go have some fun (if you're a Club GreenSock member, you can download it with your bonus plugins from your GreenSock account). If you haven't used GSAP before in JavaScript, check out the Jump Start. Got questions? Drop by the forums and post there.
  20. 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 post by Carl Schooff, GreenSock's "Geek Ambassador" Hot on the heels of the CSS Myth-Busting article, I'm going to take a deeper look into CSS Animations and how they fit (or don't fit) into a modern animator's workflow. This isn't about simple fades or basic transitions (CSS is great for those); Developers who use animation to tell a story or deliver rich interactivity require a very different workflow than those who are simply doing UI transitions. I'm going to show you exactly where some of the pain points are for a typical project and how they can bring your workflow to a grinding halt. Even relatively simple animations like the one below can become surprisingly cumbersome with CSS. Example of a Simple, "Story-Telling" Animation See the Pen GSAP: Full Version Complete by GreenSock (@GreenSock) on CodePen. Seriously, You guys are beating up on CSS Animations again? Really, I'm not trying to be negative for the sake of being negative. It's just that so many developers are looking for animation tools that accommodate their real-world projects and the industry seems to scream "use CSS!" even though the API doesn't adequately serve the workflow of modern animators who are building immersive experiences or animations that "tell a story". Too many people are being led down a path that results in utter frustration, or at least a lot of wasted time. And no, CSS Animations aren't "evil". In fact, sometimes they're perfectly appropriate (see the CSS Myth-Busting article for details). There are CSS fans who craft animations and proudly shout "Pure CSS! No JS!" as if the grueling effort necessary is a badge of honor. The accomplishment is indeed admirable, and we tip our hats to them. But WOW it's a lot of work and doesn't exactly lend itself to experimentation or easy edits. Quite simply, we aim to change the tide with tools like GSAP. The majority of the GSAP API has been shaped by feedback from real developers in the trenches over the course of many years. The process of animation should be fun and inspiring. Challenge! Still not convinced that GSAP is better suited for professional animators? I'm very interested to see how this animation can be built more effectively. Are you in the CSS-Purist camp? Do you prefer to trigger animations with JavaScript setTimeouts? Maybe you have another library that blows GSAP away. Dig in and build the animation I've been using with your own choice of tools. Below are some resources that should make it easy to get started. When you're done, just drop us a line in the comments or in the forums. Full storyboard showing css values for each key frame: http://codepen.io/GreenSock/pen/DzHBs Starter Pen: http://codepen.io/GreenSock/pen/EsAvF Recommended reading: Myth Busting: CSS Animations vs JavaScript (css-tricks.com guest post) Main GSAP page Jump Start: GSAP JS Cage matches: CSS3 transitions vs GSAP | jQuery vs GSAP 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
  21. 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 the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale/translate/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links Speed test Draggable Demo CSS Transitions/Animations vs. GSAP Cage Match jQuery vs. GSAP Cage Match Why GSAP? A practical guide for developers UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple)
  22. 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. Update: don't miss our guest post on css-tricks.com, Myth Busting: CSS Animations vs. JavaScript which provides some additional data, visual examples, and a speed test focused on this topic. Ever since CSS3 "transitions" and "animations" were introduced, they have been widely lauded as the future of animation on the web. It often seems like all the "cool kids" are talking about them. Should you jump on the bandwagon? Is JavaScript animation headed for extinction? How does the new GreenSock Animation Platform (GSAP) fare when it steps into the ring and faces off against the hyped-up tag-team of CSS3 transitions & animations? Does GSAP have the chops to hold its own? Let's find out. Ready...FIGHT! Performance One of the most common arguments in favor of CSS3 animations has been that they're hardware accelerated, thus outperform any JavaScript-based equivalent. The theory is that if you define your transitions/animations directly in css, the browser can worry about all the calculations behind the scenes and tap into hardware and native code to execute them. Sounds awesome. Unfortunately it's not quite that clean. Only certain properties are hardware-accelerated (like 3D transforms and opacity - mostly ones that don't affect document flow) and different browsers handle things differently. Plus every comparison we saw on the web pitted CSS3 transitions against jQuery, but GSAP is up to 20 times faster than jQuery. In our real-world tests, we saw drastic differences in performance among the various browsers and when tested head-to-head against GSAP, CSS3 animations were usually slower! Weird. As expected, however, 3D transforms were indeed faster under heavy stress although in most situations you'd never notice a difference. GSAP is extremely optimized. UPDATE (2015-01-05): There are some interesting (and surprising) performance implications of using CSS animations that aren't widely known. Here's a screencast that shows how Dev Tools doesn't report the overhead involved with CSS animations, some synchronization problems, and how they can drag down the main thread performance more than JS. To see a simple comparison for yourself, select the "Zepto" engine in the speed comparison because it uses CSS3 transitions for its animations, and then compare it to GSAP. Beware that the fps (frames per second) counter in the lower right corner isn't always accurate in some browsers (like recent versions of Safari) when using CSS3 transitions because requestAnimationFrame events [incorrectly] get dispatched even when the screen is clearly not being updated. So the animation may actually be running at a very jerky 10fps, yet 50+ requestAnimationFrame cycles are being triggered by the browser! This exposes another flaw in CSS3 transitions - there's no way to know when updates truly occur. There's only a "complete" event fired at the end of the transition/animation. If anyone knows how to get a more accurate fps counter in Safari while using CSS3 transitions, please let us know. Another performance issue to note in the speed comparison is the clumping that occurs with many engines (including Zepto) under heavy stress, where the stars begin pulsing out in rings instead of a nicely dispersed field. Even though GSAP was faster than CSS3 transitions in the majority of our real-world tests, it's still true that 3D transforms and opacity tweens are faster with CSS3 transitions and it's possible that browsers will be able to further tap into hardware acceleration in the future, so we'll call this round a tie. Feel free to build your own tests to see how things compare in your workflow. Performance winner: TIE Controls This is one of the major weak spots for CSS transitions (its "glass jaw" of sorts). Let's say you invest the time in writing a bunch of css for a whiz-bang animation and then you need to control the whole thing - good luck with that. It is virtually impossible. GSAP's object oriented architecture allows you to pause, resume, reverse, restart, or seek to any spot in any tween. Even adjust timeScale on the fly for slow motion or fastforward effects. Place tweens in a timeline with precise scheduling (including overlaps or gaps) and then control the whole thing just like it's a single tween. All of the easing and effects remain perfectly intact as you reverse, adjust timeScale, etc. (with CSS transitions, easing flip-flops upon reverse). You can even kill individual portions of a tween anytime (like if a tween is controlling both "top" and "left" properties, you can kill "left" while "top" continues). Put labels in a timeline to mark important spots and seek() to them anytime. Imagine trying to build the example below using CSS transitions. It would be virtually impossible. With GSAP, it's easy. In fact, all of the animation is done with 2 lines of code. Drag the scrubber, click the buttons below, and see how easy it is to control the sequenced animation. Controls winner: GSAP Tweenable Properties Both competitors can animate transforms (2D and 3D), colors, borderRadius, boxShadow, and pretty much every important property, but there's one key shortcoming of CSS - you cannot animate individual transforms distinctly! For example, try rotating an object and then halfway through that animation, start scaling it with a different ease and finish at a different time. Since all transforms (scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY, x, y, and z) are all mashed into one "transform" property, it's virtually impossible to handle them distinctly. GSAP not only works around this limitation, but it also allows you to do advanced things like animate along Bezier paths or do momentum-based motion (with ThrowPropsPlugin) or relative tweens or animate the scroll position or do directional rotation or physics-based motion, etc. Plus GSAP can animate any numeric property of any object, not just DOM elements. Do you really want to use one toolset (CSS) for animating DOM elements and then have to switch to a completely different toolset and syntax when you do canvas-based animation? GSAP handles both consistently. CSS transitions and animations just can't compete here. Tweenable properties winner: GSAP Workflow When you're creating fun and interesting animations, workflow is critical. You need to be able to quickly build sequences, stagger start times, overlap tweens, experiment with eases, leverage various callbacks and labels, and create concise code. It would be great to modularize your code by creating functions that each spit back an animation object (tween or timeline) which can be inserted into another timeline at a precise time. You need a flexible, powerful system that lets you experiment without wasting hours. GSAP wipes the floor with CSS transitions in this round. Anyone who has attempted an ambitious project with CSS3 transitions/animations will attest to the fact that they tend to get very cumbersome and verbose. Experimenting with timing and fine-tuning details can get extremely tedious especially when dealing with all the browser prefixes. GSAP CSS3 transitions = supported = unsupported Flexible object-oriented architecture that allows animations to be nested inside other animations as deeply as you want Supported Unsupported Concise code that doesn't require vendor prefixes Supported Unsupported Create sequences (even with overlapping animations) that auto-adjust as you insert/remove/change intermediate pieces of animation (makes experimenting MUCH easier) Supported Unsupported Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc. Supported Unsupported Animate things into place (backwards) with convenience methods like from() and staggerFrom() Supported Unsupported Callbacks for when an animation starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks Supported Unsupported Place labels at specific times in a sequence so that you can seek() there (and/or insert animations there) Supported Unsupported Animate any numeric property of any JavaScript object, not just DOM elements (great for canvas-based animation). Supported Unsupported Workflow winner: GSAP Compatibility CSS transitions simply don't work in older browsers, even Internet Explorer 9. GSAP works in all browsers (although some particular features may be disabled, like 3D transforms in IE8). Once again, this round was no contest. GSAP can even do 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY all the way back to IE6 including transformOrigin functionality! Plus it works around scores of other browser issues so that you can focus on the important stuff. Safari's 3D transformOrigin bug? No problem. Firefox's flashing 3D elements bug? No worries. Inconsistency in IE's backgroundPosition values? GSAP has you covered. Vendor prefixes? Nah, GSAP adds 'em for you when necessary. Compatibility winner: GSAP Popularity CSS3 transitions have been talked about (and used) for years all over the web whereas GSAP is relatively new. It can't match CSS3 transitions' popularity. As clients start pushing for more aggressive animations and HTML5 games proliferate and operating systems become very JavaScript-friendly, the balance may very well shift quickly. For now, though, this round goes squarely to CSS transitions. Popularity winner: CSS3 transitions Conflict management What happens if a particular set of properties (like "left" and "top") are animating and then you need to redirect one of those to a different value (like "left" to 100px instead of 300px) using a different ease and duration? With CSS transitions, it's a very complex process. With GSAP, it's simple and automatic. In fact, there are several overwrite modes you can choose from. Conflict management winner: GSAP Support There are numerous places on the web where you can ask the community your CSS transitions-related questions, but GSAP has dedicated support forums where there's rarely a question that remains unanswered for more than 24 hours. GreenSock's forums are manned by paid staff (including the author of the platform), so you're quite likely to get solid answers there. Add to that the fact that GreenSock has a track record of being much more agile in terms of squashing bugs and releasing updates than browsers do for CSS3 transitions, so GSAP gets the upper hand here. Support winner: GSAP Expandability GSAP employs a plugin architecture, making it relatively easy to add features and custom animation properties but CSS transitions have no such equivalent. You're stuck with what the browsers decide to offer. In addition to CSSPlugin, GSAP already has plugins like ScrollToPlugin for scrolling to specific window or div scroll positions, BezierPlugin for animating along Bezier curves, ThrowPropsPlugin for momentum-based motion, and RaphaelPlugin, EaselPlugin, and KineticPlugin for those libraries (Raphael, EaselJS, and KineticJS). Plus there are physics-based plugins like Phyics2DPlugin and PhysicsPropsPlugin as well as a fun ScrambleTextPlugin for Club GreenSock members. More plugins are on their way, and you can create your own too. Expandability winner: GSAP Learning resources Again, the popularity of CSS3 transitions trumps anything GSAP could throw at it right now. There are lots of tutorials, videos, and articles about CSS3 transitions whereas GSAP is new to the game. GreenSock is being aggressive about putting together solid resources (like the Jump Start tour) and the community is crankin' out some great articles and videos too, but CSS3 transitions score the win in this round. Learning resources winner: CSS3 TRANSITIONS Price & license Both CSS3 transitions and GSAP are completely free for almost every type of usage. GSAP allows you to edit the raw source code to fix bugs (if that's something you need to do), but there's no way to edit the source code that drives CSS3 transitions. Then again, there's no special license required to use them either. If you plan to use GSAP in a product/app/site/game for which a fee is collected from multiple customers, you need the commercial license that comes with "Business Green" Club GreenSock memberships (one-off commercial projects don't require the special license). It's actually a more business-friendly license in many ways than a typical open source license that offers no warranties or backing of any kind or imposes code sharing or credit requirements. GreenSock's licensing model provides a small funding mechanism that benefits the entire user base because it empowers continued innovation and support, keeping it free for the vast majority of users. See the licensing page for details. Although there are some clear benefits of GreenSock's model, we'll give this round to CSS3 transitions because using them is technically "free" in more scenarios than GSAP. Price & license winner: CSS3 TRANSITIONS File size This is a tricky round indeed because GSAP requires inclusion of at least 1 JavaScript file whereas CSS3 transitions leverage native code in the browser, but the code you'd have to write to accomplish the same thing in CSS3 animations or transitions is often far more verbose, offsetting the kb savings. For example, let's take a relatively simple sequenced animation (see codepen or jsfiddle? GSAP code: var tl = new TimelineLite(); tl.staggerFrom('.box', 0.5, {opacity:0, scale:0, rotation:-180}, 0.3) .staggerTo('.box', 0.3, {scale:0.8}, 0.3, 0.7); This type of thing is impossible with CSS3 transitions, but it can be done with CSS3 animations as long as we give each element its own class name or ID. Let's take a look at the CSS code (see codepen or jsfiddle? Equivalent CSS3 Animation: .animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes introAnimation { 0% { -webkit-transform: scale(0) rotate(-180deg) ; opacity: 0; } 50% { -webkit-transform: scale(1) rotate(0deg) ; opacity: 1; } 70% { -webkit-transform: scale(1) rotate(0deg); } 100% { -webkit-transform: scale(0.8) rotate(0deg); } } @-moz-keyframes introAnimation { 0% { -moz-transform: scale(0) rotate(-180deg); opacity: 0; } 50% { -moz-transform: scale(1) rotate(0deg); opacity: 1; } 70%{ -moz-transform: scale(1) rotate(0deg); } 100% { -moz-transform: scale(0.8) rotate(0deg); } } @keyframes introAnimation { 00% { transform: scale(0) rotate(-180deg); opacity: 0; } 50% { transform: scale(1) rotate(0deg); opacity: 1; } 70%{ transform: scale(1) rotate(0deg); } 100% { transform: scale(0.8) rotate(0deg); } } .introAnimation { -webkit-backface-visibility: visible !important; -webkit-animation-name: introAnimation; -moz-backface-visibility: visible !important; -moz-animation-name: introAnimation; backface-visibility: visible !important; animation-name: introAnimation; } .two { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .three { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; } .four { -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; animation-delay: 0.9s; } .five { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s; } .six { -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; } .seven { -webkit-animation-delay: 1.8s; -moz-animation-delay: 1.8s; animation-delay: 1.8s; } .eight { -webkit-animation-delay: 2.1s; -moz-animation-delay: 2.1s; animation-delay: 2.1s; } .nine { -webkit-animation-delay: 2.4s; -moz-animation-delay: 2.4s; animation-delay: 2.4s; } As you can see, the CSS3 code is more than 10 times longer! And what if you want to have the entire sequence repeat 3 times? Good luck with that in CSS - you can set an animation-iteration-count but it only applies to each individual element, so it doesn't give us the effect we're after. And what if you want to experiment with the easing or offsets/delays or rotational values? It is quite cumbersome to say the least, even if you use sass or something like that. With GSAP, it's simple. If you only need very simple animations/transitions, CSS3 would deliver smaller file sizes, but once you start getting more aggressive and expressive with your animations, the scales shift quickly and GSAP becomes more economical. The other thing to keep in mind is that GSAP's JS file(s) are typically cached by the browser, so the savings page-to-page is much larger since the code you write on each page is far more concise. In other words, think of how much js/css the browser must actually request from the server over the course of your users' multi-page visit to your site. File size winner: TIE Flexibility Let's face it: basic tweening is pretty straightforward for any system, but it's really the details and advanced features that make a robust platform shine. GSAP crushes CSS3 transitions and animations when it comes to delivering a refined, professional-grade tool set that's truly flexible. Here are just a few of the conveniences baked into GSAP: Tween any numeric property of any object. Optionally round values to the nearest integer to make sure they're always landing on whole pixels/values. Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP's Bezier system is super flexible in that it's not just for x/y/z coordinates - it can handle ANY set of properties. Plus it will automatically adjust the movement so that it's correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Animate any color property of any JavaScript object (not just DOM elements). Define colors in any of the common formats like #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1) or hsl(30, 50%, 80%) or hsla(30, 50%, 80%, 0.5) or "red". Set a custom fps (frames per second) for the entire engine (the default is 60fps). All tweens are perfectly synchronized (unlike many other tweening engines). Use the modern requestAnimationFrame API to drive refreshes or a standard setTimeout (the default is requestAnimationFrame with a fallback to setTimeout) Tons of easing options including proprietary SlowMo, RoughEase, and SteppedEase along with all the industry standards Animate css style sheet rules themselves with CSSRulePlugin Animate the rotation of an object in a specific direction (clockwise, counter-clockwise, or whichever is shortest) by appending "_cw", "_ccw", and "_short" to the value. You can tween getter/setter methods, not just properties. For example, myObject.getProp() and myObject.setProp() can be tweened like TweenLite.to(myObject, 1, {setProp:10}); and it will automatically recognize that it's a method and call getProp() to get the current value when the tween starts. Same for jQuery-style getters/setters that use a shared method like myObject.prop(). You can even tween another tween or timeline! For example, TweenLite.to(otherTween, 1, {timeScale:0.5}) would animate otherTween.timeScale to 0.5 over the course of 1 second. You can even scrub the virtual playhead of one tween/timeine with another tween by animating its "time". Flexibility winner: GSAP Conclusion Despite the hype surrounding CSS3 transitions and animations, they just aren't well-suited for professional-grade animation tasks. They did manage to win a few rounds in this match but ultimately GSAP man-handled them, sending them running from the ring like scared sissies. Of course we're slightly biased, but check out the facts for yourself. Kick the tires. Audition GSAP on your next project. See how it feels once you get past the initial learning curve. If you only need simple fades or very basic animation in modern browsers, CSS3 transitions are probably just fine. However, what happens when your client wants to do something more expressive? What if browser compatibility becomes an issue? Why not build on a solid foundation to begin with so that you don't find yourself having to rewrite all your animation code? If you want professional-grade scripted animation, look no further. To get started fast, check out our Jump Start tour. Recommended reading: Main GSAP JS page Why GSAP? A practical guide for developers Jump Start: GSAP JS jQuery vs GSAP: cage match 3D Transforms & More CSS3 Goodies Arrive in GSAP JS Speed comparison Explanation of CSS3 transitions, transforms and animations P.S. A rant about where animation logic belongs: We can't put this post to bed without mentioning a beef we've got with the whole concept of putting all your animation logic in css. Ever since the <blink> tag, there has been this tendency for browser vendors to offer developers these nifty "conveniences" that end up encouraging them to mix markup and/or style rules with behavioral logic. Is that really a good idea? One of the wonderful things about the modern web is that we've got this lovely separation between markup, presentation/styling, and behavioral logic (at least that's the goal). Should we be blurring the line like this? Isn't JavaScript the logic layer that should be handling state changes, application logic, reaction to user interaction (which often includes animation), etc.? Some may claim "But putting animation in css is great because that way if the user has JavaScript disabled, the animations still work!" Do you really think users of the modern web can turn off JavaScript and expect to browse the web with great results? Is that who you're targeting for a rich experience? And if they turned off JavaScript, might they have done so specifically to avoid annoying animations? Is it really helping to shift animation logic into css where they can't turn it off? In the web of yesteryear, animations were quite simplistic; fade this, slide that. Done. Anything more aggressive was relegated to a plugin like Flash which afforded incredible richness and complexity in terms of animation. But today, clients want that sort of expressiveness directly in the browser. It needs to work on mobile devices. It's no longer about simple fade-ins or sliding an image across the screen. CSS3 transitions fit the old mentality well, but not the new one. CSS3 animations technically provide more flexibility but they fall miserably short and they still force behavioral logic into the style layer. And to use them effectively, we still need JavaScript to at least swap classes and trigger things. From a development and debugging standpoint, when I apply a class to an element how would I know if that will trigger an animation or transition or neither? Should I have to keep bouncing back and forth between css and JS to manage behavioral logic related to animations? Maybe we're just ill-informed and there are some fantastic reasons for putting behavioral logic like animation into the css layer, but one thing seems pretty clear: the current way that developers have to build all but the simplest css animation leaves a LOT to be desired. The API is terribly limiting and clunky. Let's move the web forward. Let's make animation fun and flexible. Let's keep behavioral logic and style rules distinct. Let's leverage the incredible flexibility of JavaScript. If we've misrepresented anything here or if you want to weigh in with your opinion about where behavioral logic like animation belongs, feel free to post your comment below. If you're someone who has attempted an aggressive animation task with CSS3 transitions/animations as well as GSAP, we'd love to hear how you felt they compared.
  23. 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. Update: don't miss our guest post on css-tricks.com, Myth Busting: CSS Animations vs. JavaScript which provides some additional data, visual examples, and a speed test focused on this topic. jQuery is the 700-pound gorilla that has been driving lots of animation on the web for years, but let's see how it fares when it steps into the ring with the feisty GSAP (GreenSock Animation Platform) which gained its fame in the Flash world and is now flexing its greased-up muscles in JavaScript. Before we put the gloves on, we need to make it clear that we've got the utmost respect for jQuery, its authors, and its community of users (to which we belong). It's a fantastic tool that we highly recommend for non-animation tasks. This tongue-in-cheek "cage match" is solely focused on animation. Performance Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any animation platform worth its weight. This round wasn't even close. GSAP was up to 20 TIMES faster than jQuery under heavy stress. See a speed comparison for yourself or make your own. Performance winner: GSAP Controls With jQuery, you can stop an animation but that's about it. Some 3rd party plugins add resume capability, but jQuery takes a pounding in this round. GSAP's object oriented architecture allows you to pause, resume, reverse, restart, or jump to any spot in any tween. Even adjust timeScale on the fly for slow motion or fastforward effects. Place tweens in a timeline with precise scheduling (including overlaps or gaps) and then control the whole thing just like it's a single tween. All of the easing and effects remain perfectly intact as you reverse, pause, adjust timeScale, etc. And you can even kill individual portions of a tween anytime (like if a tween is controlling both "top" and "left" properties, you can kill "left" while "top" continues). Put labels in a timeline to mark important spots and seek() to them anytime. Imagine trying to build the example below using jQuery. It would be virtually impossible. With GSAP, it's easy. In fact, all of the animation is done with 2 lines of code. Drag the slider, click the buttons below, and see how easy it is to control the sequenced animation. See the Pen Impossible with jQuery: controls (used in jquery cagematch) by GreenSock (@GreenSock) on CodePen. Controls winner: GSAP Tweenable Properties jQuery.animate() works with basic numeric properties, but that's about it. If you want to do more, you'll need to rely on lots of 3rd party plugins which may have spotty support or unresolved bugs. GSAP's CSSPlugin handles almost anything you throw at it while protecting you from various browser bugs and prefix requirements. GSAP jQuery  = supported    = supported with 3rd party plugins    = partially supported with 3rd party plugins Basic numeric css properties like left, top, opacity, fontSize, etc. Supported Supported Colors like backgroundColor, borderColor, etc. Supported Supported with 3rd party plugins backgroundPosition Supported Supported with 3rd party plugins boxShadow Supported Supported with 3rd party plugins clip Supported Supported with 3rd party plugins textShadow (including multiple text shadows) Supported Partially supported with 3rd party plugins 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin and directional rotation functionality Supported Partially supported with 3rd party plugins 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin and directional rotation functionality Supported Partially supported wiht 3rd party plugins borderRadius (without the need to define each corner and use browser prefixes) Supported Partially supported with 3rd party plugins className allows you to define a className (or use "+=" or "-=" to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. Supported Partially supported with 3rd party plugins Tweenable properties winner: GSAP Workflow When you're creating fun and interesting animations, workflow is critical. You need to be able to quickly build sequences, stagger start times, overlap tweens, experiment with eases, leverage various callbacks and labels, and create concise code. You need to be able to modularize your code by creating functions that each spit back an animation object (tween or timeline) which can be inserted into another timeline at a precise time. You need a flexible, powerful system that lets you experiment without wasting hours wrestling with a limited tool set. jQuery has some nice simple convenience methods like show(), hide(), fadeIn(), and fadeOut(), but GSAP bloodies its nose in this round: GSAP jQuery  = supported    = unsupported Easily create sequences (even with overlapping animations) that can be controlled as a whole Supported Unupported Flexible object-oriented architecture that allows animations to be nested inside other animations as deeply as you want Supported Unupported Animate things into place (backwards) with convenience methods like from() and staggerFrom() Supported Unupported Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc. Supported Unupported Create a staggered animation effect for an array of objects using one method call (like staggerTo(), staggerFrom(), or staggerFromTo()) Supported Unupported Easily repeat and/or yoyo a tween a specific number of times (or indefinitely) without resorting to callbacks or redundant code Supported Unupported Callbacks for when a tween or timeline starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks Supported Unupported Place labels at specific times in a sequence so that you can seek() to them and/or insert animations there. Supported Unupported Animate any numeric property of any JavaScript object, not just DOM elements Supported Unupported Call a function whenever the entire platform finishes updating on each frame (like for a game loop) Supported Unupported Workflow winner: GSAP Compatibility Browser inconsistencies and bugs are the bane of our existence as developers. Whether it's the way Internet Explorer 8 implements opacity or Safari's transformOrigin bug that wreaks havok on 3D transforms or the fact that browser prefixes are required to enable many of the more modern browser features, you want your animations to "just work" without having to learn all the annoying hacks. jQuery does a great job of delivering cross-browser consistency overall, but when it comes to animation it falls a bit short mainly because it doesn't even attempt to handle the more modern CSS properties. No JavaScript framework can work miracles and suddenly make IE8 do fluid 3D transforms, for example, but GSAP implements a bunch of workarounds under the hood to solve problems wherever possible. It can do 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY all the way back to IE6 including transformOrigin and directional rotation functionality! Plus it works around scores of other browser issues so that you can focus on the important stuff. Compatibility winner: GSAP Popularity jQuery has been around for a long time and has gained incredible popularity because it does many things well. It's like the Swiss Army knife of JavaScript. There probably isn't a single JavaScript tool that's more popular than jQuery, and GSAP is no exception. As the new kid on the block, GSAP is gonna have to prove itself in the JavaScript community just like it did in the Flash community before it's crowned the undisputed champion. Popularity winner: jQuery Conflict management What happens if there's already a tween running that's controlling a particular object's property and a competing tween begins? jQuery does nothing to manage the conflict - the original tween keeps running. For example, let's say you're animating an element's "top" to 100px and that tween still has 2 seconds left before it's done, and another tween starts running that animates the same element's "top" to 0px over the course of 1 second. It would tween to 0px and then immediately jump to almost 100px and finish that [first] tween. Yuck. GSAP automatically senses these conflicts and handles them behind the scenes. In this case, it would kill the "top" portion of the first tween as soon as the second tween begins. Plus there are several other overwrite modes you can choose from if that's not the behavior you want. Conflict management winner: GSAP Support Both jQuery and GSAP have thriving support forums, but since right now jQuery has a massive user base, you're very likely to find someone with an answer to your question. Even though the GreenSock forums rarely have a question that remains unanswered for more than 24 hours, jQuery's pervasiveness gives it an edge here. On the other hand, GreenSock's forums are manned by paid staff (including the author of the platform), so you're quite likely to get solid answers there. Add to that the fact that GreenSock has a track record of being much more agile in terms of squashing bugs and releasing updates than jQuery, so we'll call this round a tie. Support winner: tie Expandability jQuery and GSAP both offer a plugin architecture, but since jQuery has been out much longer and gained so much popularity, there are numerous plugins available. Some are good, some are not, but there is a thriving community of plugin developers out there. Even though technically they're both equally expandable, the sheer number of plugins currently available for jQuery give it the advantage in this round. Expandability winner: jQuery Learning resources Again, jQuery's popularity trumps anything GSAP could throw at it right now. There are lots of tutorials, videos, and articles about jQuery whereas GSAP is new to the game. GreenSock is being aggressive about putting together solid resources (like the Jump Start tour) and the community is crankin' out some great articles and videos too, but jQuery scores the win in this round. Learning resources winner: jQuery Price & license Both jQuery and GSAP are completely free for almost every type of usage and both allow you to edit the raw source code to fix bugs (if that's something you need to do). If you plan to use GSAP in a product/app/site/game for which a fee is collected from multiple customers, you need the commercial license that comes with "Business Green" Club GreenSock memberships (one-off commercial projects don't need the special license). It's actually a more business-friendly license in many ways than a typical open source license that offers no warranties or backing of any kind or imposes code sharing or credit requirements. GreenSock's licensing model provides a small funding mechanism that benefits the entire user base because it empowers continued innovation and support, keeping it free for the vast majority of users. See the licensing page for details. jQuery employs an MIT license and is free for virtually all uses. As much as we all like "free" software, there's always a cost somewhere. jQuery has a few large corporate sponsors that have helped keep it viable. Both jQuery and GreenSock have long track records of delivering updates, bug fixes, and new features (GreenSock is newer to JavaScript, but served the Flash community since around 2006). Both count some of the largest companies in the world among their user base. Although there are some clear benefits of GreenSocks' license over jQuery's, we'll give this round to jQuery because it is technically "free" in more scenarios than GSAP. Price & license winner: jQuery File size jQuery weighs in at about 32kb gzipped and minified whereas GSAP's TweenLite and CSSPlugin are about half that combined. So in half the size, you're getting significantly more animation capabilities and speed. GSAP is built in a modular fashion that allows you to use just the parts that you need. Of course jQuery serves many other purposes beyond animation, but in this cage match we're focused on animation. Even if you add up TweenLite, TimelineLite, TimelineMax, TweenMax, EasePack, CSSPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and RoundPropsPlugin, it's still almost 20% less than jQuery. File size winner: GSAP Flexibility Let's face it: any tweening engine can handle the basics of animating one value to another, but it's really the details and advanced features that make a robust platform shine. GSAP crushes jQuery when it comes to delivering a refined, professional-grade tool set that's truly flexible. All these conveniences are baked into GSAP (no 3rd party plugins required): Tween any numeric property of any object. Optionally round values to the nearest integer to make sure they're always landing on whole pixels/values. Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP's Bezier system is super flexible in that it's not just for x/y/z coordinates - it can handle ANY set of properties. Plus it will automatically adjust the movement so that it's correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Animate any color property of any JavaScript object (not just DOM elements). Define colors in any of the common formats like #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1) or hsl(30, 50%, 80%) or hsla(30, 50%, 80%, 0.5) or "red". Set a custom fps (frames per second) for the entire engine. The default is 60fps. All tweens are perfectly synchronized (unlike many other tweening engines). Use the modern requestAnimationFrame API to drive refreshes or a standard setTimeout (default is requestAnimationFrame with a fallback to setTimeout) Tons of easing options including proprietary SlowMo, RoughEase and SteppedEase along with all the industry standards Animate css style sheet rules themselves with CSSRulePlugin Animate the rotation of an object in a specific direction (clockwise, counter-clockwise, or whichever is shortest) by appending "_cw", "_ccw", and "_short" to the value. You can tween getter/setter methods, not just properties. For example, myObject.getProp() and myObject.setProp() can be tweened like TweenLite.to(myObject, 1, {setProp:10}); and it will automatically recognize that it's a method and call getProp() to get the current value when the tween starts. Same for jQuery-style getters/setters that use a shared method like myObject.prop(). You can even tween another tween or timeline! For example, TweenLite.to(otherTween, 1, {timeScale:0.5}) would animate otherTween.timeScale to 0.5 over the course of 1 second. You can even scrub the virtual playhead of one tween/timeine with another tween by animating its "time". Use plugins like ThrowPropsPlugin for momentum-based motion, and RaphaelPlugin, EaselPlugin, and KineticPlugin for those [canvas or svg] libraries (Raphael, EaselJS, and KineticJS). Plus there are physics-based plugins like Phyics2DPlugin and PhysicsPropsPlugin as well as a fun ScrambleTextPlugin for Club GreenSock members. Flexibility winner: GSAP Conclusion jQuery eeked out a few decent rounds, but ultimately GSAP left it lying on the mat in a pool of its own blood. Of course we're slightly biased, but check out the facts for yourself. Kick the tires. Audition GSAP on your next project. See how it feels. If you only need simple fades or very basic animation, jQuery is probably just fine. In fact, its fadeIn() and fadeOut() methods are quite convenient. However, what happens when your client wants to do something more expressive? Or what if they start complaining that animation isn't smooth on mobile devices? Why not build on a solid foundation to begin with so that you don't find yourself having to rewrite all your animation code? If you want professional-grade scripted animation, look no further. To get started fast, check out our Jump Start tour. Update: there's now a jquery.gsap.js plugin that allows you to continue using jQuery.animate() but have GSAP drive the animations under the hood, thus delivering much better speed plus a bunch of new properties that you can tween (like colors, 2D and 3D transforms, boxShadow, textShadow, borderRadius, clip, etc.). Read more about the plugin here. Recommended reading: Main GSAP JS page jQuery.animate() with GSAP: get the jquery.gsap.js plugin! Why GSAP? A practical guide for developers Jump Start: GSAP JS CSS3 transitions vs GSAP: cage match Speed comparison 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
×