Kinetic Compositions: Animations & Transitions

Animation offers a medium of story telling and visual entertainment which can bring pleasure and information to people of all ages everywhere in the world.

— Walt Disney

Animation Basics

Animation can be accomplished in several ways, but the most common are either binary transitions or keyframe animations that modify an element through a predetermined timeline. These are typically triggered by a state change — either the page loading, an element being selected, or hovered upon.

12 basic principles of animation, Wikipedia
Animation principles for UX and UI designers, UX Planet

Why Use Animation?

The Designer’s Guide to Adding Animation in UX Design, by Jolina Landicho. MAY 29TH, 2019. UX Booth.
The ultimate guide to proper use of animation in UX by Taras Skytskyi. UX Collective
The Role of Animation and Motion in UX by Page Laubheimer on January 12, 2020
The Importance of Good Animation in UX by Will Fanguy. InVision

2D Transforms

Transforms are static — immediately changing the targeted element and causing it to stay that way. There are four main types of transformations: rotate, translate, scale and skew.

Rotate

The rotate value provides the ability to rotate an element from 0 to 360 degrees. Using a positive value will rotate an element clockwise, and using a negative value will rotate the element counterclockwise.

.example {
  transform: rotate(-30deg);
}

.example {
  transform: rotate(-30deg);
  transform-origin: bottom left;
}

Translate

The translate value works a bit like that of relative positioning, pushing and pulling an element in different directions. Using the translateX value will change the position of an element on the horizontal axis while using the translateY value will change the position of an element on the vertical axis.

.example {
  transform: translate(40px 20px);
}

.example {
  transform: translateX(100px);
}

.example {
  transform: translateY(100px);
}

Scale

Using the scale value within the transform property allows you to change the appeared size of an element. It’s also possible to scale only the height or width of an element using the scaleX and scaleY values.

.example {
  transform: scale(0.7);
}

.example {
  transform: scaleX(0.7);
}

.example {
  transform: scaleY(0.7);
}

Skew

Skew, is used to distort elements on the horizontal axis, vertical axis, or both. To distort an element on both axes the skew value is used, declaring the x axis value first, followed by a comma, and then the y axis value.

.example {
  transform: skewX(-20deg);
}

.example {
  transform: skewY(-20deg);
}

Putting it all Together

Transforms are applied to the element in the order they are listed.

.example {
  transform: scale(0.7, 1.5) rotate(30deg) skewY(-15deg) translate(200px, 20%);
}

CSS Transforms: Lesson 7, Learn to Code Advanced HTML & CSS by Shay Howe

Using SVGs in Animation

Scalable Vector Graphics or SVG is a 2D vector image format that scales to look sharp at any resolution. SVG and HTML are peers, and this means that SVG is just as easy to modify and manipulate with CSS.

To create an SVG, you can use design tools like Illustrator or Sketch. You can also write SVG directly using the text editor of your choice.

Any transformation or transition animation that can be applied to an HTML element can also be applied to an SVG element.

Drawing

First, create a new regular web document:

First step’s first — drawing. Size the artboard. Position the images on the artboard as it would look in the first frame of the animation. Separate the parts of your drawing into layers and groups (like you would in Photoshop), especially if any of them are going to be animated.

If you’ve added text with the Text Tool, convert them into outlines. Select the text, then from the menu, Type > Create Outlines.

SVG

From Illustrator: File > Save As... and select SVG (svg) from the Format dropdown.

Open the SVG file in your text editor — you’ll notice the markup has the names of the layers and groups you created in Illustrator as ids. This is extremely helpful when identifying the elements of your illustration.

HTML

Copy the markup between (and including) <svg> and </svg> and drop it into your HTML. Here’s the raw SVG for you to work with (view source):

Clean up the markup. The <g> element represent a group of paths—treat them like you would a <div>. I’d suggest things like converting id names to class names and declaring the fill color in the CSS.

Before you clean up the markup, you may want to run the SVG through an optimizer like SVGO or SVG-Optimiser.

Wrap the SVG in a container:

<div class="svg-container">
  <svg class="bug"></svg>
</div>

CSS

The beautiful thing about SVG is that its infinitely scalable irrespective of screen size and pixel density — a wonderful thing for responsive web design. Make the SVG responsive:

.svg {
  width: 100%;
  height: auto;
}

You can also set the fill value of a path in CSS, like you would any other attribute.

.svg path {
  fill: #000;
}

Tutorial #7

Instructions

1. Create an image(s) in Illustrator.
2. Save the image(s) as an SVG.
3. Open the file in HTML and clean up the layers, and
4. Apply 2D Transforms to the image(s).

Examples

Idelle Weber
Elaine Sturtevant
Rosalyn Drexler

Transitions

Transitions allow you to alter the appearance and behavior of an element whenever a state change occurs. You’ll commonly see the transition property used on :hover and :focus states.

With transitions you determine the start and end state, the computer handles the tweening (the states in between the beginning and the end); tweening is a term from animation.

.example {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

There are two ways to trigger CSS transitions:

• Using the :hover CSS pseudo-class
• Adding a class with JavaScript (we’ll get to that in the lesson on Intermediate JavaScript)

So, if we were trying to write a transition rule that smoothly changes the background color over 2 seconds starting 1s after the action that causes the transition, we’d write:

transition: background-color 2s ease 1s;

CSS Transitions, MDN Documentation
CSS Transitions and Transforms for Beginners, Rachel Cope August 24, 2015 UPDATED ON March 28, 2019
Transitions: Lesson 8, Learn to Code Advanced HTML & CSS by Shay Howe

Tutorial #8

Instructions

Add at least three transitions to each of the SVG illustrations created in the previous tutorial.

Animations

Animations are similar to transitions, in that they make properties change over time, but they give us more control over how those changes happen.

What is a keyframe?

Keyframes are a common animation concept, usually found in hand-drawn animation. In web-based animations, keyframes represent the beginning, ending, or midpoint state of the element being animated. The transition property allows us to define a beginning and end point for a state change. However, sometimes you'll want to have an element move through multiple states during an animation. That's where the CSS keyframes rule comes in. Keyframe syntax uses @.

What if we want to create an animation that causes an element to bounce into the browser.

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

First, we create a keyframe with the animation name, bounceIn. Then, apply the animation rule to the CSS element you want animated.

.square {
  animation: bounceIn 3s ease-in-out;
}

Resources

• CSS Animations, MDN Documentation
• CSS Animation for Beginners, Rachel Cope. December 4, 2014 UPDATED ON March 25, 2019
• Animations: Lesson 8, Learn to Code Advanced HTML & CSS by Shay Howe
• CSS Animations, JavaScript Info
• Animate.css Library

Conclusion

CSS Animations are easy and mostly compatible, so they’re often a good choice for basic animation needs. For anything more complex, such as animation that depends on user input, you’ll need to use Javascript.

Exercise #4

Instructions

1. Create a drawing using Illustrator that will serve as a background.
2. Separate the various shapes of your drawing into layers and groups (like you would in Photoshop)
3. Save the drawing as an SVG.
4. Open the file in HTML and clean up the layers. You may want to run the SVG through an optimizer like SVGO or SVG-Optimiser.
5. Apply animations to at least five of the shapes in the drawing.

Examples

Henri Matisse