November 27, 5 min read The average cognitive load capacity of humans the amount of information a person can process in an instant is seven plus or minus two units of information, and the amount of information in the working memory lasts around 10 seconds. According to Timewebsite visitors decide whether to engage with a site or bounce off the page in just 15 seconds. Animations and microinteractions can help keep users engaged and reduce the cognitive load while using your website. However, when not done right, animations can hamper user interactions with your product and negatively impact sales.
This command would move an element with a class of circle px across the x-axis in three seconds. If a duration is not set, a default of milliseconds would be used.
Note: The CSS transform properties translateX and translateY are represented as x and y for pixel-measured transforms and xPercent and yPercent for percentage-based transforms, respectively. It is a combination of both the from and to method. This command animates the element with a class of circle from an opacity of 0 to an opacity of 1 across the x-axis in 2 seconds. Easing determines how an object moves from one point to another.
GSAP provides different types of eases and options to give you more control on how your animation should behave. It also provides an Ease Visualizer to help you choose your preferred ease settings.
In the last example, we chained three tweens that displayed the available types of eases, but we had to set a delay of the number of seconds it takes the animation to complete before starting the next one. You can avoid this by putting the tweens in a timeline.
A Timeline serves as a container for multiple tweens. It animates tweens in a sequence with each beginning just after the last one ends, except when set otherwise, and it is not dependent on the duration of the previous tween.
This eliminates the need to set a delay before the next tween begins animating. The position parameter is an important factor in animating with a timeline because it sets the point of insertion of a tween in an animation sequence.
As we learned earlier, it is the third parameter in a tween method and it comes after the config object. The possibilities are endless when animating with GreenSock because you can get more done with less code without worrying about backward compatibility while maintaining great performance across browsers.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. Plus you don't need to worry about a litany of vendor prefixes. GSAP makes it easy to create next-generation effects today. And yes, the scrubber works! These features work in virtually all modern-day browsers see caniuse. 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. 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. 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. Impossible to distinguish vanishing point or depth. DOM elements by default have no transformPerspective. Typically this is the best way to apply realistic perspective to multiple elements instead of using transformPerspective on each child element. A single perspective is applied to the parent div of all the boxes causing each box to share the same vanishing point. The negative z-index set in the transformOrigin properties of the second animation changes the effect drastically.
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. 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. 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 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.
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.
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.
The latest version, GSAP 3comes with about 50 new features and lots of improvements on the previous versions, including:.
The new version comes with a simplified, more user-friendly API. Take the following code, for example, which would have looked like this in previous versions of GSAP. This change also affects the way timelines are created. The two blocks of code below would appear as follows in older versions of GSAP. The gsap object, when chained to a method like to or fromreturns an instance of a tween. GSAP retained almost all of its old functionality and added a host of new features.
In addition, GreenSock rebuilt the core from the ground up as modern ES modules. The new GSAP update still recognizes the old syntax, since the Max and Lite features of the previous version are all aliased to keep legacy codebases from breaking.
This saves developers the hassle of rewriting codebases to use GSAP 3. The duration parameter of a tween is now defined in the vars object, as opposed to previous versions where it was defined as a parameter for methods.
Note: The old syntax still works because the new update is backward-compatible. This helps prevent breaking codebases that use the old syntax. GSAP 3 enables you to specify default properties for your timeline. Child tweens inherit these values on creation. In the older version, properties were set individually per tween, which led to code repetition.GSAP 3 Highlights
Each tween inherits the ease and duration from the parent timeline. Inherited defaults are easily overwritten when another value is defined on a child tween. The new update removed methods used to stagger, such as staggerTostaggerFromstaggerFromTo. This is now a parameter in the vars object. You can now define random value ranges to such as randomor an array to be selected from, and GSAP will choose a random value to animate with.
This feature helps with positioning animations in a timeline. GSAP has made 15 new utility methods available. Many of them return functions so that they can be added directly to tweens.
Keyframes are a way to define multiple states to which a single tween should be animated instead of creating multiple tweens with the same target. You can use the newest version of GreenSock in your project with either of the following methods. The newly released GSAP 3 includes myriad updates to help you create even more stunning animations.Here are a few of the highlights:. There's a LOT to cover, so we broke this into a few articles.
Check out the full demo collection for more. A special shout-out to dsenneff who created the animation at the top of this page! Feel free to post in the our forums about what you like and any questions that you have. Or you can contact us directly if a public forum isn't your style.
Contact us and we'll do our best to make it happen! Have you exercised your animation superpowers today? Go make us proud and tell us about it. Posted November 11, It's now called InertiaPlugin.
It's even more streamlined and capable, but it does exactly what ThrowPropsPlugin did - it just has a more intuitive name now. Posted November 12, Posted November 19, Posted November 27, Posted December 6, Obviously certain features are browser-specific, like you can't do 3D transforms in IE9 because the browser itself can't recognize those so they'd silently failbut that's not a limitation of GSAP.
The core of GSAP itself is pretty much universal. Posted February You can post now and register later. If you have an account, sign in now to post with your account. Paste as plain text instead.
Only 75 emoji are allowed. Display as a link instead. Clear editor. Upload or insert images from URL. Leaderboard More More.
November 1, GreenSock. Get an all-access pass to premium plugins, offers, and more! Join the Club. Qode Kaleidoscope. Swab the World. Luigi de Rosa.When you call one of the gsap methods like. The new GSAP even adjusts itself to accommodate the old syntax! There's technically no more TweenMax, TweenLite, TimelineLite, or TimelineMax, but they're all aliased so that the vast majority of legacy code still works, untouched!
You don't have to rewrite all your code to use GSAP 3, but we'd recommend shifting to the new, more concise syntax for all your new projects. You don't have to keep setting the same ease over and over again Any defaults you set this way will get pushed into every child tween - it's not limited to a certain subset of properties.
Watch the video:. You can even have the random number rounded to the closest increment of any number! For example:. There's also a gsap. We'll cover the utility methods later. Pass a unit as the 3rd parameter and GSAP will return the value converted for you! In practical use, it would be annoying to get values like "20px" back from getProperty and have to manually wrap it in parseFloat.
But again, if you want the unit included, just pass in that unit like gsap. You define it once, and call it anytime, like:.
Animating Vue with GreenSock
Here's a super-simple "fade" effect to show the concept:. If you have one set of targets that should animate to various states, instead of creating a whole new tween for each one re-defining the same targets each timeyou can pass an array of keyframes vars objects and they'll be perfectly sequenced.
These keyframes are basically like individual tweens, so you can even use callbacks like onStart, onComplete, etc. When building out a timeline sequence, it's VERY common to want to place the next animation relative to the previous tween's start or end.
Since the default behavior is to put things at the end of the timeline, it's usually easy to get that effect, but what if you want the next tween to start at the same time as or like 0. What do you do? I bet you either slap a label in there and keep referencing that label. Or maybe you memorize time stamps.This plugin is meant to be used in conjunction with the Greensock Animation Plattform.
It offers an easy API to trigger Tweens or synchronize them to the scrollbar movement. Both the lite and the max versions of the GSAP library are supported. The most basic requirement is TweenLite. Every instance of ScrollMagic.
Roughly Half the file size of the old TweenMax!
Scene now accepts an additional option. See ScrollMagic. Scene for a complete list of the standard options. Tweens Animation to the progress target instead of setting it. Does not affect animations where duration is 0. Using the reset option you can decide if the tween should remain in the current state or be rewound to set the target elements back to the state they were in before the tween was added to the scene.
Add a tween to the scene. If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead see example below. If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.
For a scene with a duration of 0the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back. To gain better understanding, check out the Simple Tweening example.
Instead of supplying a tween this method can also be used as a shorthand for TweenMax. Can also be a Dom Element or Selector, when using direct tween definition see examples. A duration for the tween, or tween parameters. If an object containing parameters are supplied, a default duration of 1 will be used.
Get or Set the tweenChanges option value. This only affects scenes with a duration.
If tweenChanges is truethe progress update when scrolling will not be immediate, but instead the animation will smoothly animate to the target state. For a better understanding, try enabling and disabling this option in the Scene Manipulation Example. Remove the tween from the scene.GSAP has been around for over a decade and over that time has made fans out of quite a few big names. Its products are used on the sites of essentially every industry giant, such as Google, Microsoft, and Amazon just to name a few.
Fair warning though, the library is incredibly robust, so for those starting from zero, there is quite a bit of reading ahead of you. The introductory material offers a wide array of examples with accompanying code which you can copy and paste into your own projects. Particularly useful is the Ease Visualizer. It allows users to see all of the various available types of easing in action. You can rest easy knowing that all of the hard work you put into your animations will look the same across all popular browsers, even those that may be a bit on the older side.
As I mentioned before, the platform is incredibly robust and it also has a large selection of plugins that give the library added functionality. Animations can also be sequenced. Just like in a dedicated animation software, the animations can be placed in different orders to change the overall effect.
For those familiar with After Effects, this works in the same way. Simply take an SVG file, direct it to a path and watch it go. To learn more and get started with GSAP, visit the link here. Taylor is the Managing Editor of Notes on Design. Taylor is a graphic designer, illustrator, and Design Lead at Weirdsleep. Need to update your skills? Recent Articles Quarantine Checklist for Creatives. An Admissions Advisor will contact you to discuss program options.