1
0
mirror of https://github.com/cssanimation/css-animation-101.git synced 2025-01-16 14:28:17 +01:00
This commit is contained in:
Donovan Hutchinson 2020-11-30 06:30:51 +00:00
parent ee70e1e147
commit 67a5f661b7
17 changed files with 49 additions and 47 deletions

View File

@ -16,7 +16,7 @@ Find more including free tutorials and other courses at [CSSAnimation.rocks](htt
## More CSS Animation stuff
I have a great [video course on CSS Animation](http://courses.cssanimation.rocks/p/level-up/) you should totally check out. It's a practical guide to building and animating all sorts of parts of a landing page.
I have a great [video course on CSS Animation](http://courses.cssanimation.rocks/p/level-up/) you should totally check out. You'll find it a practical guide to building and animating all sorts of parts of a landing page.
I also send out a free weekly [CSS Animation newsletter](https://cssanimation.rocks/weekly/). Sign up and get an email of cool inspiration in your inbox each week.
@ -42,7 +42,7 @@ You can find this book in the following languages:
## Contributing
I love to get feedback, even if it's just to helpfully point out a typo! Pull requests welcomed, or else you can message me [on Twitter](https://twitter.com/cssanimation) or [by email](mailto:donovan@cssanimation.rocks).
I love to get feedback, even if just to helpfully point out a typo! Pull requests welcomed, or else you can message me [on Twitter](https://twitter.com/cssanimation) or [by email](mailto:donovan@cssanimation.rocks).
## Technical details

View File

@ -7,13 +7,13 @@ Before we get into the technical side of CSS animation, let's discuss **why** we
## More than words alone
Animation can convey information efficiently, or it can be used to grab attention but in the end it's all about communication.
Animation can convey information efficiently, or it can be used to grab attention but in the end it is all about communication.
Movement in our designs gives us a more powerful way to communicate. It transcends verbal and written language.
Subtle and appropriate animation can add appeal to our designs and credibility to our work. This happens because as humans we're used to seeing movement all the time in the "real" world. Bringing some of that life into our work brings the two closer.
As our web browsers continue to improve and better support animation, it's becoming a more viable option than ever. In many ways animation is as important to web design as the fonts we use and layouts we create.
As our web browsers continue to improve and better support animation, it is becoming a more viable option than ever. In many ways animation is as important to web design as the fonts we use and layouts we create.
## What is animation on the web?
@ -23,7 +23,7 @@ Animation can be subtle, like when the CodePen save button wiggles a little to r
![Animated "Save" button (http://codepen.io/donovanh/pen/KwEQdQ)](images/save_button-min.gif)
We're very good at spotting movement. It's something we've evolved to do. Adding a little animation here and there can introduce some of that "illusion of life" in a very subtle way.
We're very good at spotting movement. This is something we have evolved to do. Adding a little animation here and there can introduce some of that "illusion of life" in a very subtle way.
We can also use animation to introduce content to a page:
@ -39,11 +39,13 @@ The above is based on an instructional video for the game "Portal". However, tel
## With great power comes great responsibility
It's easy to do too much with animation. Having too many things moving around on the page at once is distracting. It's usually a good idea to try to do _less_ animation when possible. Any movement you do add will be all the more powerful.
It can be easy to do too much with animation. Having too many things moving around on the page at once is distracting.
This might mean only moving a small item on your page. Sometimes it's ok to do _less_.
Try to do _less_ animation when possible. Any movement you do add will be all the more powerful.
Having said that, if you want to create more of a "wow" effect with larger animations, you can do so. Just make sure and stop when it's time for your viewers to focus on the content. This might mean setting animations to play once rather than infinitely, or stopping animations when people begin to scroll a page.
This might mean only moving a small item on your page. Sometimes it is better to do _less_.
Having said that, if you want to create more of a "wow" effect with larger animations, you can do so. Just stop when your viewers need to focus on the content. This might mean setting animations to play once rather than infinitely, or stopping animations when people begin to scroll a page.
## Inspiration
@ -55,7 +57,7 @@ For loads of great examples, take some time to browse [Hover States](http://hove
For example, here's a nice example from Dribbble showing [Google's Material Design principles](https://dribbble.com/shots/1621920-Google-Material-Design-Free-AE-Project-File). Searching for "animation" is a great way to find inspiring ideas.
I also regularly check up on what's happening at [CodePen](https://codepen.io). It's a great source of canvas and web animation examples.
I also regularly check up on what's happening at [CodePen](https://codepen.io). A great source of canvas and web animation examples.
## Summary
@ -69,6 +71,6 @@ I also regularly check up on what's happening at [CodePen](https://codepen.io).
Think about your own work and how animation might help.
It's tempting to go crazy and animate all the things, but try to look for ways subtle animation might better _help_ your visitors understand the content. Is there a call-to-action on your page people are missing? Is there a sudden change in your page that's happening too suddenly, and could benefit from a smoother transition?
Try not to go crazy and animate all the things. Look for ways subtle animation might better _help_ your visitors understand the content. Is there a call-to-action on your page people are missing? Is there a sudden change in your page that's happening too suddenly, and could benefit from a smoother transition?
Lastly, take a look at sites like <a href="http://hoverstat.es/">Hover States</a> and <a href="http://littlebigdetails.com/">Little Big Details</a> and <a href="https://dribbble.com/">Dribbble</a>. These sorts of sites help if you're ever stuck for ideas.

View File

@ -3,7 +3,7 @@
> "You don't learn to walk by following rules. You learn by doing, and by falling over."
> Richard Branson
Today we're going to look at ways we can build and see our CSS animations in the browser. Before we get started with the coding, it's a good idea to have a workflow that makes it easy to get started.
Today we're going to look at ways we can build and see our CSS animations in the browser. Before we get started with the coding, we want to create a workflow that makes it easy to get started.
We'll cover two ways of doing this: developing in the browser, and developing offline (locally).
@ -11,7 +11,7 @@ We'll cover two ways of doing this: developing in the browser, and developing of
The simplest way to get going for small experiments is to develop online. A site I often use is [CodePen](https://codepen.io). Another good one is [JS Fiddle](http://jsfiddle.net/).
For the rest of this course I'll be using [CodePen](https://codepen.io) for examples and it's worth being familiar with the way it works.
For the rest of this course I'll be using [CodePen](https://codepen.io) for examples and it can be worth being familiar with the way it works.
CodePen is a coding playground that involves an edit mode where you can make changes to HTML, CSS and JavaScript and see the results immediately. The screen is divided up into four areas. The preview content, the HTML area, CSS and JavaScript. Within each is a settings option that allows you to configure languages (Sass instead of CSS for example) and other cool stuff.
@ -37,7 +37,7 @@ Personally I'd recommend trying to get to grips with the code. Understanding the
If you're familiar with Github, Node and checking out code, you might want to set up a development enviroment on your own machine.
I am a big fan of Gulp. Being Node-based, it's very fast. Modules can be put together to process Sass into CSS, autoprefix for browser support and sync browsers so that you don't need to keep refreshing each time you update the code.
I am a big fan of Gulp. It is Node-based and very fast. Modules can be put together to process Sass into CSS, autoprefix for browser support and sync browsers so that you don't need to keep refreshing each time you update the code.
If you've used Grunt or other build tools, the process should be familiar.
@ -51,7 +51,7 @@ As you learn CSS animation, feel free to try different ways to create your code.
## Homework
Register with [CodePen](http://codepen.io). Have a go adding some HTML and CSS, and see how the results change in response. It's also a good idea to check out some of the featured CodePens on the home page, and see how it's done.
Register with [CodePen](http://codepen.io). Have a go adding some HTML and CSS, and see how the results change in response. Check out some of the featured CodePens on the home page.
_Optional:_ If you want to try local development, download local starting files:

View File

@ -16,7 +16,7 @@ When we use a transition on an element we tell the browser that we want it to _i
![Animated transition from A to B (http://codepen.io/donovanh/pen/RNdxqw)](images/ab_animated.png)
For example we can change an element's style on hover, apply a transition, and the browser will create a smooth animation between the element's starting style and it's new style.
For example we can change an element's style on hover, apply a transition, and the browser will create a smooth animation between the element's starting style and its new style.
![Animated button (http://codepen.io/donovanh/pen/MYQdZd)](images/button.png)
@ -36,7 +36,7 @@ A transition is the change from one state to another. For example, when hovering
## Homework
How's your creative environment looking? How about taking a look into the code, and looking for the `transition` property in the CSS. Can you see what it's doing?
How's your creative environment looking? How about taking a look into the code, and looking for the `transition` property in the CSS. Can you see what is happening?
Next time you're browsing the web, look for examples of transitions as you navigate web pages. Look for interesting changes such as when a new element is added to a page, or you hover over a button. You'll find the web is full of subtle animation once you start looking for it.

View File

@ -44,6 +44,6 @@ We'll take some time to work on the animation property later.
## Homework
Can you think of ways animations might be used on your web pages? Keep an eye open for animation when browsing. Look out for when something moves in a way that calls attention to itself. In these cases it's usually an animation.
Can you think of ways animations might be used on your web pages? Keep an eye open for animation when browsing. Look out for when something moves in a way that calls attention to itself. In these cases it means animation.
If you've downloaded the starter HTML and CSS, take a look for the `animation` property. Unlike transitions, animations need a second part, called `keyframes`. Try changing some values and see what happens.

View File

@ -1,6 +1,6 @@
# Transitions in action
Now that we have introduced the `transition` and `animation` properties, it's time to delve further into transitions and see some code!
Now that we have introduced the `transition` and `animation` properties, lets delve further into transitions and see some code!
## Transitions
@ -57,7 +57,7 @@ The cubic bezier timing function is a lot of fun. We'll cover timing functions i
When I've given code examples, I've not included vendor prefixes. This is to make the code easier to read, but if you're using the code in production they are needed.
I like to use Autoprefixer (it's an option on Codepen, press the settings "cog" icon in the CSS section), and can be run with build tools such as Grunt or Gulp. Alternately you can manually write them out like this:
I like to use Autoprefixer (this is an option on Codepen: press the settings "cog" icon in the CSS section), and can be run with build tools such as Grunt or Gulp. Alternately you can manually write them out like this:
-webkit-transition: ...;
-moz-transition: ...;

View File

@ -34,7 +34,7 @@ Let's look at each of these properties.
### transition-property
Usually stated first in the shorthand, this is the property that the browser will animate. To change the background for example, `background` could be used. It's also possible to use `all` to have all applicable CSS properties transition.
Usually stated first in the shorthand, this is the property that the browser will animate. To change the background for example, `background` could be used. You can use `all` to have all applicable CSS properties transition.
### transition-duration
@ -42,7 +42,7 @@ A `transition-duration` value tells the browser how long the transition will tak
### transition-delay
The `transition-delay` property tells the browser to wait before applying the transition. This is a time value, and it can be specified in seconds or milliseconds. For example, `3s` would be three seconds and `100ms` would be one hundred milliseconds. Equally, you could write that as `0.1s`. It's up to you.
The `transition-delay` property tells the browser to wait before applying the transition. This is a time value, and it can be specified in seconds or milliseconds. For example, `3s` would be three seconds and `100ms` would be one hundred milliseconds. Equally, you could write that as `0.1s`. Up to you.
### transition-timing-function
@ -52,7 +52,7 @@ Both transitions and animations make use of timing functions. There's a lot to t
While you can use transitions on positioning, size, colour, border, background-position and many others, there are some that cannot be transitioned. The font-family cannot be transitioned, as this would mean trying to generate frames between two very different font images.
Background images created with CSS, such as generated gradients, cannot have their properties animated. This would mean the browser recreating the background image with each frame of animation, so it's not supported.
Background images created with CSS, such as generated gradients, cannot have their properties animated. This would mean the browser recreating the background image with each frame of animation and so is not supported.
However you _can_ animate things like opacity and background position. By moving background images around or hiding them you can create interesting effects.
@ -68,6 +68,6 @@ A similar effect is used on this [button sheen effect](https://cssanimation.rock
I've created [a basic Codepen](http://codepen.io/donovanh/pen/NPYNGa?editors=110) to try out transitions.
At the moment it's set up to transition from a diamond shape into a circle. Try changing some of the attributes, to see what happens.
At the moment there a transition from a diamond shape into a circle. Try changing some of the attributes, to see what happens.
If you'd like to go further, press the "Fork" button to create your own version and you can then save your work to your own Codepen account.
If you would like to go further, press the "Fork" button to create your own version and you can then save your work to your own Codepen account.

View File

@ -58,9 +58,9 @@ The two co-ordinates here are (1, -0.49) and (.13, 1.09). On a graph, they look
![Source: http://cubic-bezier.com/#1,-0.49,.13,1.09](images/cubic-bezier-graph.png)
Rather than create these by hand, I use [cubic-bezier.com](http://cubic-bezier.com). It's a great way to create some interesting effects.
Rather than create these by hand, I use [cubic-bezier.com](http://cubic-bezier.com). A great way to create some interesting effects.
They really get fun when using values greater than 1. It's possible to create transitions that overshoot, and bounce back.
They really get fun when using values greater than 1. This will create transitions that overshoot and bounce back.
## Steps
@ -89,4 +89,4 @@ I've written on the subject of [timing functions here](https://medium.com/css-tu
Following on from [the previous homework example](http://codepen.io/donovanh/pen/NPYNGa?editors=110) try changing the `transition-timing-function` value and see how it changes the way the transition feels.
You can also try changing values on [this demo](http://codepen.io/donovanh/pen/GgaRNv). Technically it's an animation rather than a transition, but the timing function applies in the same way.
You can also try changing values on [this demo](http://codepen.io/donovanh/pen/GgaRNv). Technically this is an animation rather than a transition but the timing function applies in the same way.

View File

@ -78,7 +78,7 @@ You can also [see this example on CodePen](http://codepen.io/donovanh/pen/LEvjJg
As well as using multiple transitions on multiple elements, we can also use more than one transition on a single element.
A case for this is when you need an element's background to change separately from it's border. Applying a single transition to all properties might be too crude for both.
A case for this is when you need an element's background to change separately from its border. Applying a single transition to all properties might be too crude for both.
We can achieve this by combining multiple transitions into a single declaration. Multiple transitions are separated by commas.
@ -90,7 +90,7 @@ The first transition here works on only the background, and the second (after th
## Homework
In this chapter we looked at how multiple effects could be handled by a single transition, and how multiple transitions can be used together. It's worth take a look at the CodePen examples for each:
In this chapter we looked at how multiple effects could be handled by a single transition, and how multiple transitions can be used together. Take a look at the CodePen examples for each:
* Example 1: [Fancy button](http://codepen.io/donovanh/pen/YPMGpJ)
* Example 2: [Cat Hover card](http://codepen.io/donovanh/pen/LEvjJg)

View File

@ -89,7 +89,7 @@ In this case I've changed the animation-direction property to `alternate`. See i
## Prefixes
For the moment it's still necessary to use the `-webkit-` prefix on the `animation` property. I won't add it to examples, but it will be needed for your animations to work in browsers such as Safari.
While this is becomeing less important, you may want to use the `-webkit-` prefix on the `animation` property. I won't add it to examples, but it will be needed for your animations to work in browsers such as Safari.
In CodePen you can use the "Autoprefixer" option within the CSS settings. For local development, I use the Gulp version of Autoprefixer. [Prefix Free](http://leaverou.github.io/prefixfree/) is a decent alternative also.

View File

@ -10,7 +10,7 @@ Similar to `transition-delay`, we can use this property to make the animation wa
If the animation loops, the delay does not apply each time it loops. The delay only applies to when the animation is applied to the element.
It's actually possible to give this property a negative value, such as `-1s`. This would cause the animation to start as if a second has already elapsed.
You can give this property a negative value such as `-1s`. This would cause the animation to start as if a second has already elapsed.
### animation-direction
@ -70,7 +70,7 @@ Having said that, `cubic-bezier` timing functions can create some great effects
## Using timing functions within keyframes
It's worth noting that when you specify a timing function for an animation, the timing function applies to _each keyframe_ of the animation.
When you specify a timing function for an animation, the timing function applies to _each keyframe_ of the animation.
This means that if you were to specify four keyframes, the timing function would apply to each. An ease-out function would slow down as it approached each keyframe.

View File

@ -44,7 +44,7 @@ Taking each light one at a time, we can start with the red light. It would be on
}
}
I've added a 2% gap at the beginning and had the third part of the animation begin at 42% as this adds a little bit of a fade to the way the traffic light appears. It's the subtle stuff that makes all the difference.
I've added a 2% gap at the beginning and had the third part of the animation begin at 42% as this adds a little bit of a fade to the way the traffic light appears. The subtle stuff that makes all the difference.
With the red light done, we look at the amber light on the grid.

View File

@ -1,14 +1,14 @@
# Animation recap
We've covered a lot of detail so far! I hope it's making sense.
We've covered a lot of detail so far! I hope things are making sense.
When learning this, I must admit it took me a while for this animation and keyframe stuff to make sense to me. If it's not clear yet, don't be frustrated. Keep at it, and bit by bit the various tricks of using animation in HTML and CSS will become clear.
When learning this, I must admit it took me a while for this animation and keyframe stuff to make sense to me. If it is not clear yet, try not to becoe frustrated. Keep at it, and bit by bit the various tricks of using animation in HTML and CSS will become clear.
In this chapter we're going to take a moment to recap what we learned. But first, we'll take a look at that homework challenge!
## Homework challenge: Traffic lights
The homework challenge should have been easy. Well, it's easy if you know how. I've created an updated version of [the UK-based traffic light demo](http://codepen.io/donovanh/pen/ogRRdR?editors=010), this time changing the sequence to remove the "red + amber" stage.
I've created an updated version of [the UK-based traffic light demo](http://codepen.io/donovanh/pen/ogRRdR?editors=010), this time changing the sequence to remove the "red + amber" stage.
[See it in action here](http://codepen.io/donovanh/pen/vEqbdw?editors=010). I've made the colour scheme match what Google suggested American traffic lights look like.
@ -38,7 +38,7 @@ Keyframes have their own shorthand (_to_ and _from_) when you want to only go fr
Stacking percentages beside each other can have the animation "pause" at that stage.
Lastly, it's possible to omit the 0% keyframe and the browser will take the element's style as implied. For example, to have something fade away, we don't necessarily have to give it a starting `opacity` of 1 (assuming the element is already visible):
Lastly, you can omit the 0% keyframe and the browser will take the element's style as implied. For example, to have something fade away, we don't necessarily have to give it a starting `opacity` of 1 (assuming the element is already visible):
@keyframes name {
100% {

View File

@ -82,7 +82,7 @@ I generated this bezier over on [cubic-bezier.com](http://cubic-bezier.com/#.52,
## Part 2: Adding the hover transition
It's a good idea to pause or stop an animation once it's finished or when you want people to concentrate on something else. Constant animation can be distracting, so let's make use of `animation-play-state` to pause the animation when on hover.
It can be a good idea to pause or stop an animation once it has finished or when you want people to concentrate on something else. Constant animation can be distracting, so let's make use of `animation-play-state` to pause the animation when on hover.
.screen:hover {
animation-play-state: paused;
@ -128,4 +128,4 @@ Take a moment to think about what we've covered so far.
We covered a lot. Combining animations and transitions is a powerful way to bring pages to life.
When thinking about how this can apply to your work, think about how it might be controlled too. When might animation work for your users' benefit, and when might it work against it? It's great to know how to animate but even better to know when not to.
When thinking about how this can apply to your work, think about how it might be controlled too. When might animation work for your users' benefit, and when might it work against it? While it is great to know how to animate it can be even better to know when not to.

View File

@ -8,7 +8,7 @@ Here's [today's demo on CodePen](http://codepen.io/donovanh/pen/gbVMjm). Try scr
Many sites trigger custom animations when you scroll to a certain point. They could start playing a video, trigger a complex keyframe animation, or just have items fade into place to draw attention to them.
In each case, what's happening is that there's some JavaScript that adds a class to an element when it's visible on screen. We can then attach animations to the class, so that the browser scrolling results in the animation starting at the right time.
In each case, what's happening is that there's some JavaScript that adds a class to an element when it is visible on screen. We can then attach animations to the class, so that the browser scrolling results in the animation starting at the right time.
There are many JavaScript options that add classes, and one I've found easy to use is [Wow.js](http://mynameismatthieu.com/WOW/). Let's use it to create a simple example where content fades into view as we scroll.
@ -63,7 +63,7 @@ We should now have a situation where items will fade in as the user scrolls! [Se
## Using Animate.css
Wow.js has been designed to work well with the CSS framework [Animate.css](http://daneden.github.io/animate.css/). I've not used in this example yet as it's good to understand how to create our own transitions, but it's worth looking at some of the transitions Animate.css gives us out of the box.
Wow.js has been designed to work well with the CSS framework [Animate.css](http://daneden.github.io/animate.css/). I've not used in this example yet as it helps to understand how to create our own transitions. It can be worth looking at some of the transitions Animate.css gives us out of the box.
In [this example](http://codepen.io/donovanh/pen/xbvOQK) I've used Animate.css. Note how there are no animations or transitions in the CSS. Instead, I've added a class to the HTML to tell Animate.css which animation to apply:
@ -73,7 +73,7 @@ The class `bounceInUp` is a reference to one of Animate.css's many built in anim
## Using Modernizr
It's generally a good idea to protect against situations in which we hide content and show it again using JavaScript. People may not have JavaScript enabled or working for some reason or another. A script such as [Modernizr](http://modernizr.com/) can be used to handle this. It'll add a `js` class to the body of the document, and we can then bring that into our styles.
I find it is generally a good idea to protect against situations in which we hide content and show it again using JavaScript. People may not have JavaScript enabled or working for some reason or another. A script such as [Modernizr](http://modernizr.com/) can be used to handle this. It'll add a `js` class to the body of the document, and we can then bring that into our styles.
I've included Modernizr in the [demo](http://codepen.io/donovanh/pen/gbVMjm).

View File

@ -22,7 +22,7 @@ A growing percentage of your visitors will be using phones. When on a phone, the
## Confusion
Sometimes websites go too far and try to animate _all the things_. This doesn't just muddy the site's message, it can cause confusion. This is especially true of UI. When adding animation to elements on the page that visitors interact with, make sure that it's obvious _why_ the animation has been triggered. Your visitors don't have time to decipher complexity in either the visual design or the way it moves, so try to be clear.
Sometimes websites go too far and try to animate _all the things_. This doesn't just muddy the site's message, it can cause confusion. This is especially true of UI. When adding animation to elements on the page that visitors interact with, make sure that it is obvious _why_ the animation has been triggered. Your visitors don't have time to decipher complexity in either the visual design or the way it moves, so try to be clear.
## Don't make me sick
@ -30,7 +30,7 @@ Too much animation, or the wrong kind of animation, can make people feel sick.
When Apple introduced iOS7, an updated operating system for their phone, it brought with it a lot more motion and animation. Some of this was [enough to make people sick](http://reverttosaved.com/2013/09/28/why-ios-7-is-making-some-users-sick/). Some people, like myself, struggle to read in a car or bus as the motion makes us feel ill, and others can't play certain video games for more than a few minutes at a time.
The reason this happens is down to the way our [vestibular system](https://www.youtube.com/watch?v=dSHnGO9qGsE) works. We have 3 tubes in our ears that help us determine where our head is in 3D space. It's possible to trick our minds into thinking we're moving, and then when the vestibular system doesn't echo the movement, our brains get confused and we feel ill.
The reason this happens is down to the way our [vestibular system](https://www.youtube.com/watch?v=dSHnGO9qGsE) works. We have 3 tubes in our ears that help us determine where our head is in 3D space. We can trick our minds into thinking we're moving, but then when the vestibular system doesn't echo the movement our brains get confused and we feel ill.
That we get sick is an evolutionary side effect. Throwing up is a complex thing, and we have a special part of our brains dedicated to handling it. As it happens, this part of the brain is located near the part that deals with balance, and so we feel ill.

View File

@ -10,7 +10,7 @@ I've prepared a [transitions and animations cheat sheet (PDF)](https://cssanimat
## Resources to bookmark
It's good to know how to create our own CSS animations and transitions, but sometimes it's handy to build on existing platforms. Here are some great tools that we can use to save time and get the result we want quickly.
While it is good to know how to create our own CSS animations and transitions, it can also be good to build on existing platforms. Here are some great tools that we can use to save time and get the result we want quickly.
### [Animate.css](http://daneden.github.io/animate.css/)
@ -22,11 +22,11 @@ A nice alternative to Animate.css, Hover.css is another wide variety of ready to
## Other tools
CSS animation is pretty powerful, and can achieve a lot without needing to resort to other technology such as JavaScript. However it's not the right tool for all situations. Sometimes there's a need for more complex animations, and JavaScript can help take things further. The best packages build on CSS to make use of its speed and browser support, but let you do more.
CSS animation is pretty powerful, and can achieve a lot without needing to resort to other technology such as JavaScript. However it is not always the right tool for all situations. Sometimes there can be a need for more complex animations, and JavaScript can help take things further. The best packages build on CSS to make use of its speed and browser support, but let you do more.
### [GSAP](http://greensock.com/gsap)
Greensock Animation Platform is a JavaScript-based method of creating more advanced animations and offers fine control and great performance. There's a bit of a learning curve but it's a powerful tool.
Greensock Animation Platform is a JavaScript-based method of creating more advanced animations and offers fine control and great performance. There's a bit of a learning curve but it is a powerful tool.
### [Snabbt.js](http://daniel-lundin.github.io/snabbt.js/)