From 81a038119d29c993f3a5d2e33b4c45e712f79653 Mon Sep 17 00:00:00 2001 From: Donovan Hutchinson Date: Mon, 30 Nov 2020 06:34:22 +0000 Subject: [PATCH] Updating it's --- index.html | 93 +++++++++++++++++++++++++++--------------------------- 1 file changed, 47 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 345a6a8..798e5fb 100644 --- a/index.html +++ b/index.html @@ -191,17 +191,17 @@

Before we get into the technical side of CSS animation, let’s discuss why we’re animating in the first place.

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?

Animation brings us two main benefits: conveying information and grabbing attention. We can come up with many ways these benefits can help us as we build for the web.

Animation can be subtle, like when the CodePen save button wiggles a little to remind us when we need to save our work:

Animated “Save” button (http://codepen.io/donovanh/pen/KwEQdQ)
Animated “Save” button (http://codepen.io/donovanh/pen/KwEQdQ)
-

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:

Animating list items (https://cssanimation.rocks/list-items/)
Animating list items (https://cssanimation.rocks/list-items/)
@@ -213,15 +213,16 @@

The above is based on an instructional video for the game “Portal”. However, telling stories through our content doesn’t always need to be so literal. We can add subtle movement, such as showing data changes in a chart. In this way, data can itself tell a story with animation helping.

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.

-

This might mean only moving a small item on your page. Sometimes it’s ok to do less.

-

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.

+

It can be easy to do too much with animation. Having too many things moving around on the page at once is distracting.

+

Try to do less animation when possible. Any movement you do add will be all the more powerful.

+

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

Animation has a long and rich history. I recently wrote a post on Principles of Animation for the Web. The principles draw from Disney’s 1981 book The Illusion of Life: Disney Animation.

If you want to go further, dig into the Animator’s Survival Kit videos. YouTube is full of sources of inspiration and ideas.

For loads of great examples, take some time to browse Hover States. This site features all sorts of interesting examples of animation from the web. Dribbble.com is helpful also.

For example, here’s a nice example from Dribbble showing Google’s Material Design principles. Searching for “animation” is a great way to find inspiring ideas.

-

I also regularly check up on what’s happening at CodePen. It’s a great source of canvas and web animation examples.

+

I also regularly check up on what’s happening at CodePen. A great source of canvas and web animation examples.

Summary

Homework

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 Hover States and Little Big Details and Dribbble. These sorts of sites help if you’re ever stuck for ideas.

Creative environments

“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).

In the browser

-

The simplest way to get going for small experiments is to develop online. A site I often use is CodePen. Another good one is JS Fiddle.

-

For the rest of this course I’ll be using CodePen for examples and it’s worth being familiar with the way it works.

+

The simplest way to get going for small experiments is to develop online. A site I often use is CodePen. Another good one is JS Fiddle.

+

For the rest of this course I’ll be using CodePen 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.

Local development

For more involved projects, I prefer to develop offline. There are ways to do so that can be efficient and quicker than working in the browser.

@@ -257,14 +258,14 @@

Personally I’d recommend trying to get to grips with the code. Understanding the way the CSS works will help when it comes to fixing issues, or creating more expressive effects that visual tools can provide.

Gulp

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.

I’ve created a Github repo to make local development faster. If you’re comfortable with using Git, go ahead and follow the readme for setup instructions.

Do improve it if you wish and push the results back. Teamwork!

In summary

As you learn CSS animation, feel free to try different ways to create your code. You might want to host it yourself, or you might prefer to use CodePen. Either is good. Make sure you can get from idea to code as smoothly as you need to.

Homework

-

Register with CodePen. 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. 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: