Jump to content
GreenSock

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

Search the Community

Showing results for tags 'TweenMax'.

  • 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

    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.
  2. Hi, I would like to make my box rotates to 120 degrees, and then from 120 to 240, and then 240 to 360.. But right now each time it starts at 0 and goes to 120 degrees. TweenMax.to(box, 2, {rotation: '+=120', transformOrigin: '50% 50%', repeat: -1, repeatDelay: 2}); What is the correct way to increment a rotation? Thx
  3. 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. When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works. Video Code CSS html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-color:var(--myColor); } JavaScript TweenMax.to("html", 1, {"--myColor":"orange", yoyo:true, repeat:20}); Demo See the Pen CSS Variables Demo by GreenSock (@GreenSock) on CodePen. Support for CSS variables was added in GSAP 1.20.0
  4. 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. Feature lists are nice, but they can get lengthy and they don't always tell the story in a way that's relevant to you as the developer or designer in the trenches, trying to get real work done for real clients. You hear plenty about theoretical benefits of CSS animations or some whiz-bang library that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is exceedingly cumbersome or there frustrating "gotchas". You need things to just work. .project-post p { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .project-post h2 { padding-top: 16px; margin-bottom: 10px; } .expPoint, .project-post .expList li { font-size: 1.1em; list-style: none; line-height: normal; margin: 0px 0px 0px 8px; padding: 6px 4px 4px 20px; position:relative; border: 1px solid rgba(204,204,204,0); } .expPoint, .expContent { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .expPoint:hover, .project-post .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0px; overflow: hidden; color: #656565; font-size: 0.9em; line-height: 150%; font-weight: normal; margin: 5px 0px 0px 0px; padding-top: 0px; } .toggle { width:6px; height:8px; position:absolute; background-image:url(/_img/toggle_arrow.gif); background-repeat: no-repeat; left: 9px; top: 12px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } #featureAnimation, #featureBox { background-color:#000; border: 1px solid #333; height: 220px; overflow:hidden; line-height: normal; font-size: 80%; } #featureAnimation { position:relative; visibility:hidden; } #featureBox { position:absolute; } #featureAnimation, #featureBox, #whyGSAP, .featureTextGreen, .featureTextWhite { width: 838px; } #whyGSAP, .featureTextGreen, .featureTextWhite { text-align: center; } #whyGSAP, .featureTextGreen, .featureTextWhite { font-size:50px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; top:0; } .featureTextGreen { color:#91e600; font-weight: bold; } .featureTextWhite { color:white; font-weight:normal; } .star { position: absolute; width: 16px; height: 16px; display: none; } #browserIcons { top:64px; left: 100px; width: 92px; height: 92px; position: absolute; text-align:left; } #browserIcons img { position:absolute; } .featureTextMinor { color:#CCCCCC; font-weight:normal; font-size:20px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; visibility:hidden; } .dot { position:absolute; background-color: #91e600; } #ctrl_slider { position:absolute; width: 725px; height:10px; left:18px; top:196px; background: rgba(80,80,80,0.3); border:1px solid rgba(102,102,102,0.5); visibility:hidden; } Why GSAP? Performance Compatibility Other tools fall down in older browsers, but GSAP is remarkably compatible. Scale, rotate & move independently (impossible with CSS animations/transitions) XNJYHQLJYQEW CSS, canvas libraries, colors, beziers, etc. Total control pause(), play(), reverse(), or timeScale() any tween or sequence. GSAP The new standard for HTML5 animation replay
  5. 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.
  6. 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
  7. 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. New DirectionalRotationPlugin Have you ever tweened rotation to a particular value but wished that you could control which direction it traveled (clockwise or counter-clockwise)? For example, if the current rotation is 170 and you tween to -170, normally that would travel counter-clockwise -340 degrees but what if you prefer rotating 20 degrees clockwise instead? Or maybe you just want it to go in the shortest direction to that new position (20 degrees in this case). This is all possible now with the DirectionalRotationPlugin. Previously, shortRotation was available in CSSPlugin, but there were three shortcomings (pardon the pun): It always went in the shortest direction - it wasn't possible to define a particular direction (clockwise or counter-clockwise). It required using a different property name ("shortRotation" or "shortRotationX" or "shortRotationY") instead of the regular property name ("rotation" or "rotationX" or "rotationY"). It only worked on DOM elements. What if you have a generic object or an EaselJS Shape (or whatever)? The new DirectionalRotationPlugin solves all of these issues. First of all, its functionality is baked into CSSPlugin, so you don't even need to load the DirectionalRotationPlugin if you're only animating DOM elements. The plugin is also included in TweenMax, so there's no need to load a separate plugin there either. Use the new syntax to get the desired behavior - add one of the following suffixes to the value: "_cw" for clockwise, "_ccw" for counter-clockwise, and "_short" to go whichever direction is shortest. Here are some examples: //tweens to the 270 position in a counter-clockwise direction (notice the value is in quotes) TweenMax.to(element, 1, {rotation:"270_ccw"}); //tweens to the -45 position in a clockwise direction TweenMax.to(element, 1, {rotation:"-45_cw"}); //tweens 1.5 radians more than the current rotationX value, and travels in the shortest direction TweenMax.to(element, 1, {rotationX:"+=1.5rad_short"}); If you're tweening a more generic object (anything that's not a DOM element), you can use the DirectionalRotationPlugin. If you pass in a simple value, it will assume you're attempting to tween the target's "rotation" property but you can tween ANY rotational properties of any name by passing in an object with the appropriate properties. Here are some examples: //start with a generic object with various rotation values var obj = {rotation:45, rotationX:0, rotationY:110}; //tweens rotation to 270 in a clockwise direction TweenLite.to(obj, 1, {directionalRotation:"270_cw"}); //tweens rotationX to -45 in a counter-clockwise direction and rotationY to 200 in a clockwise direction: TweenLite.to(obj, 1, {directionalRotation:{rotationX:"-45_ccw", rotationY:"200_cw"}}); As of 1.9.0, shortRotation is deprecated in favor of this new (more flexible and concise) syntax. New AttrPlugin This plugin allows you to tween any numeric attribute of a DOM element. For example, let's say your DOM element looks like this: <rect id="rect" fill="none" x="0" y="0" width="500" height="400"></rect> You could tween the "x", "y", "width", or "height" attributes using AttrPlugin like this: //tuck any attributes you want to tween into an attr:{} object TweenMax.to("#rect", 1, {attr:{x:100, y:50, width:100, height:100}, ease:Linear.easeNone}); You can tween an unlimited number of attributes simultaneously. Just use the associated property name inside the attr:{} object. The AttrPlugin is included inside the TweenMax JS file, so you don't need to load the plugin separately if you're using TweenMax. New TextPlugin This plugin allows you to tween the text content of a DOM element, replacing it one character at a time (or one word at a time if you set the delimiter to " " (a space) or you can even use a custom delimiter). So when the tween is finished, the DOM element's text has been completely replaced. This also means that if you rewind/restart the tween, the text will be reverted to what it was originally. Here is a simple example of replacing the text in yourElement: //replaces yourElement's text with "This is the new text" over the course of 2 seconds TweenMax.to(yourElement, 2, {text:"This is the new text", ease:Linear.easeNone}); If you'd like to use a different delimiter so that instead of replacing character-by-character, it gets replaced word-by-word, just pass an object with configuration properties like this: //replaces word-by-word because the delimiter is " " (a space) TweenMax.to(yourElement, 2, {text:{value:"This is the new text", delimiter:" "}, ease:Linear.easeNone}); Sometimes it's useful to have the new text differentiated visually from the old text, so TextPlugin allows you to assign a css class to the new and/or old content, like this: //wraps the old text in <span class="class1"></span> and the new text in a <span class="class2"></span> TweenLite.to(yourElement, 2, {text:{value:"This is the new text", newClass:"class2", oldClass:"class1"}, ease:Power2.easeIn}); As indicated, defining a newClass and/or oldClass will result in wrapping a <span> tag around the associated text. The TextPlugin is NOT included inside TweenMax, so you'll need to load it separately. Other updates and enhancements in 1.9.0: Added support for hsl() and hsla() colors in CSSPlugin and ColorPropsPlugin Implemented a new (more concise and clear) way to register plugins. Old plugins will still work fine, but most of the new ones in 1.9.0 use the new style of registering which won't work with old versions of TweenLite/TweenMax. Please just make sure all your files are updated. Fixed issue that caused className to be ignored by the autoCSS feature that creates the css:{} wrapper internally. Fixed issue that could cause em not to be translated to px accurately, causing a jump when the start and end units for the tween don't match (like px to em or visa-versa) Fixed backfaceVisibility so that it is properly prefixed when necessary Now setting "float" on a DOM element will work across browsers including Firefox and IE. Worked around issue that caused x/y/z transforms not to work properly if they exceeded 21,474 (or -21,474). Fixed issue that caused values not to be interpreted correctly if a negative number had a relative prefix, like "+=-50px" or "-=-50px" Fixed issue in EaselPlugin that prevented ColorMatrixFilter tweens from working correctly when the starting matrix wasn't an identity matrix Now fromTo() and staggerFromTo() methods have immediateRender set to true by default, just like from() and staggerFrom() always did. This seems like the preferred behavior for most developers, but you can certainly set immediateRender:false on any tween if you prefer that behavior. Now fromTo() and staggerFromTo() tweens that have immediateRender:false will record their pre-tween values (before even implementing the "from" part of the tween) so that if their parent timeline rewinds past the beginning of the tween, it restores values to their originals. Get it now Download the latest version of GSAP using the fancy new download screen, and notice that everything is also available as CDN links as well. The docs have been updated to reflect all these changes. Questions? Swing by the forums to get your questions answered.
  8. 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.
  9. Hello GreenSockers, You guys are so awesome and thank you for providing this platform. Today, I saw this beautiful accordion animation https://uimovement.com/design/beaches-app/ and I want to create the same effect using GS. Is it possible to create this effect using in GS? Thanks in advance.
  10. Hello, I am discovering GSAP and I did an exercice with TweenMax, And I don't understand why I have to write : TweenMax.set('....', {transformPerspective: xxx}); If I write the same thing with TweenMax.to and it don't works ... Can someone tell me when we have to use the 1st one and the 2nd one ?
  11. With CSS 3 I am able to use keyframes, which makes animating objects really flexible. For example, with keyframes I can change a object opacity from 0 to 1 at 50% of the animation and then back to 0 at 100% of the animation... that creates a smooth fadein and fadeout. I am trying to accomplish the same with gsap. With TweenMax I can set a fromTo... but how, would I go about doing a fromTofrom? I tried doing something like this: var mydiv = new TimelineMax() .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:0, scale:0}, {opacity:1, scale:1})) .add(TweenMax.fromTo($(".mydiv"), 1, {opacity:1, scale:1}, {opacity:0, scale:2})); However, when using "add", there's a very small delay between the first and the second add. How do I go about removing that delay? Or, is there another way of doing chained animations?
  12. Hi, Does anybody know how to disable rubber-band effect in macOS with using tweenmax smooth scrolling? I know how to disable rubber-band using a simple code, but it doesn't work with smooth scrolling. I think it happens because smooth scrolling using body/html scroll indication. Is it possible to change scroll indication from body/html to any div element or is there any way to disable rubber-band effect? The simple custom code for disable rubber-band effect: html { height: 100%; width: 100%; overflow: hidden; } body { height: 100%; padding: 0; overflow: auto; margin: 0; -webkit-overflow-scrolling: touch; } Rubber-band in macOS Chrome browser: <iframe src="https://giphy.com/embed/S6kGqZiGacx6FyJmLC" width="480" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/S6kGqZiGacx6FyJmLC">via GIPHY</a></p>
  13. I'm getting an error when trying to use TweenMax in React component. I create the component like this below. import React, {Component} from 'react'; import {connect} from 'react-redux'; import Thumbnail from './thumbnail'; import TransitionGroup from 'react-transition-group/TransitionGroup' import {fetchHomeCollection} from '../../actions/client'; import styles from '../../../styles/client/home.scss'; class Home extends Component { constructor(props){ super(props); } componentWillMount(){ this.props.fetchHomeCollection(); } firstChild(props) { const childrenArray = React.Children.toArray(props.children); return childrenArray[0] || null; } renderThumbnails(){ const {collection} = this.props; if(collection.length <= 0) return <div>Loading...</div> return collection.map((photo, index)=>{ return( <TransitionGroup component={this.firstChild} key={photo._id}> <Thumbnail {...photo} delay={0.5 * index} key={photo._id}/> </TransitionGroup> ) }) } render(){ return ( <div id="home" className="flexbox-container"> {this.renderThumbnails()} </div> ) } } function mapStateToProps({photos}){ return{ collection: photos.collection } } export default connect(mapStateToProps, {fetchHomeCollection})(Home); then in my Thumbnail component I use the componentWillAppear to call my TweenMax fromTo method. import React, {Component} from 'react'; import { Link } from 'react-router-dom'; import {TweenMax} from "gsap"; export default class Thumbnail extends Component{ componentWillAppear(callback){ const el = this.container; TweenMax.fromTo(el, 0.3, {opacity: 0}, {opacity: 1, onComplete: callback}); } } Anyone know why I might be getting this error ?
  14. I'm trying to achieve an animation where the user hovers over a header. On mouseenter the animation should start playing with a pre-defined duration. On mouseleave the animation should reverse with another duration (a much faster one). My problem is that on mouseleave the animation doesn't reverse from where it was left off, it seems to be reversing randomly. If you hover over the title and rapidly hover off you can clearly see what I'm talking about. I tried to set the time of the animation on mouseleave so it keeps tracks of where it was but it doesn't seem to work either.
  15. The Animation system in cocos is imo really clunky, since I have years of experience with TweenMax, TimelineMax, I would like to use greensock with cocos creator. Both use a javascript basic so I suppose it should be doable. Has anyone experience with it? What are caveats? Thanks for your time ;-)
  16. Hello I am trying to animate numbers which I will get from an API while rendering it into viewport. I have tried to do so but in my case all the instance of numbers are getting updated but I want each number should be updated upto the value I have got from API. How can I achieve this? Here is what I have tried. https://codepen.io/patrickjane/pen/agNePM Thank You!
  17. Legends, I need some guidance. Who can help me in the right direction? I'd like to replicate the effect on the homepage of https://www.barovier.com/it/. The lighting and the ripple effect on the background image. Any idea how this can be achieved?
  18. I'm getting this error when attempting to implement Draggable. I'm confused because I am able to do some of the functions that are shown in the 'Get Started' section i.e var obj = {myProp:0};TweenLite.to(obj, 2, {myProp:100}); I added a codepen - very simple representation of what I am doing. Any idea what's going wrong here?
  19. Hello! I'm trying to apply an animation to the same element in different time lines. But it works in jumps - without a smooth transition between the states of the element. I have a task to do animation with many elements inside one screen. I have several scenes that need to be run by scrolling or clicking on the menu. Under the link all works approximately, as it is necessary to me. One problem is that the animation does not go smoothly from the first state to the second state and then to the third. https://codepen.io/yuliarushay/pen/PBjeyN Thanks!
  20. I was making an animation using GSAP and SVG. I am new to GSAP so i don't know that if there is another way to do this animation with GSAP. If there is any better way to do this please suggest me. I would be thankful for good suggestions. Edited : it has issue when user scroll very quickly many parts of bulb doesn't appear properly and also some issues when user scroll upside. (Give suggestion to fix it)
  21. I setup a TimelineMax sequence using SplitText... awesome by the way. Loving the SplitText. But after my animations run, I am getting this error in my console. Any ideas? Oh... I'm building in React using Gatsbyjs... just in case.
  22. I have simple css animation looks like this, pen circle to square using css I want the same animation using tween max. can someone help me to achieve this??
  23. Hi, I'm trying to animate the drag for the swiper with tweenmax. Now the dragging option is to quick and jerky. Dees anyone know how to animate the drag option with tweenmax to have an easing accelerate effect? Here is an example with a slider who has the drag options with nice easing options: http://www.benmingo.com/ Thank you!
×