week-2.md

Week 2

Inspiration

CSS Animation Rocks by @donovanh.

Table of Contents

• Slides
• Theory
• Lab

Slides

• Lecture-2

Theory

• CSSanimation.rocks - Why animate?
• 12 principles of animation by Alan Becker.
• Principles of User Interface Design by Joshua Porter,

Lab

Transitions in Space

Add interactivity based on user input

Synopsis

• Time: 16:00h
• Due: before lecture 3

Description

Your artwork should respond to input from the user. Use transitions, animation, pseudo-classes and events to make your artwork interactive. What happens when people hover over certain elements with their mouse? What if they press keys on their keyboard?

• Can the user :hover over certain elements with their mouse?
• What happens when the user tries to use a keyboard?
• Should something happen when you scroll the page?
• Do you need JavaScript to listen for events?

Extra resources

• CSS Tricks - Hey designers, if you only know one thing about JavaScript
• CSSanimation.rocks - Transitions vs Animations
• CSSanimation.rocks - Animation principles for the web
• CSSanimation.rocks - Animating pseudo-elements
• Shay Howe - Transitions & Animations
• Shay Howe - Complex Selectors

Playground

• Animista.net
• Animate.css