Week06.02 Animation & Course conclusion - UX-UI-Design-Lab/DH150-viz GitHub Wiki

Agenda (practice)

1. understanding css animation, @keyframes and transition
2. animatable
3. ease in-out, linear
4. interactivity as an extension of animation

---

In this part, we will learn how computer (web browser) create the illusion of life (animation).

The animation is the visual presentation of change over time. So it is not much of structural changes, but just visual style. So, the relevant technology of web-animation is CSS (Cascading Style Sheet).

The animators have developed visual language by mimicking the movement in Nature -- and it is very much related to Math formula (as we reviewed with natural simulation). Pretty much part of the simulation is about how fast you want to make the changes -- or "accelerate" -- it can be caused by gravity or some other forces (from inside or from outside).

https://www.khanacademy.org/computing/pixar/animate/ball/v/animation-1a

This is the traditional technique how you creates Frames (the unit of visual changes). You can make a change a little by little by frame (like stop motion animation or flip-book animation).

https://www.khanacademy.org/computing/pixar/animate/ball/v/a2-quick

Or, you can use your assistant (= computer nowadays but in old time the interns) to work on the detailed frames (=inbetween) when you design the main changes (= keyframes).

https://www.khanacademy.org/computing/pixar/animate/ball/v/animate-4

And add some shape morphing, you can make the animation more realistic (=squash and stretch when the object starts and ends the movement).

---

In web-coding, you will use style-related code to change the visuals. There are two types of code you can use: animation and transition.

• Transition is a classic version of simple animation, with only two basic frames. No repeat. Not much reusable.
• Animation is a recently added css code for more sophisticated animation. You can add more frames, set the repetition (infinite = forever repeating), you can name it as specific function so you can reuse it.

(note: of course there are other options of creating animation on web -- using canvas and javascript or using svg animation attribute -- but it needs too much programming to be explained so I will simply go with CSS animation only)

When you want to animate something on web, you need to first check if you can make it animated -- because some elements are pretty stubborn (metaphorically), it sometimes doesn't cooperate with css code.

Here is the list of animatable CSS properties: https://www.w3schools.com/cssref/css_animatable.asp

---

You don't need to remember all css code, but what you may need to check is how to setup the animation. Because that is how most prototyping tools (xd, figma, invision, framer) make the animation.

in <style>,

#something_to_be_animated { ... animation: animation-name, duration, timing, delay, iteration; ...}

For the animation-name, it actually calls a function named "@keyframes" - (https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp)

@keyframes *animation-name*{ from {css_code to start with} to {css-code to end with} }

What you set up for the animation (in css) are these:

• animation-name (what do you want to call this animation?)
• animation-duration (how long do you want to make this change happen?)
• animation-timing-function (how, fast or slow or complicated, do you want to make that change happen?)
• animation-delay (when do you want to start the change? immediately or a bit later?)
• animation-iteration-count (how many times do you want to repeat the change?)
• animation-direction ( -- too technical so I skip it)
• animation-fill-mode ( -- too technical again)
• animation-play-state (-- too technical)

so, for the "too technical" parts, you can refer to this: https://www.w3schools.com/cssref/css3_pr_animation.asp

---

The important think I want to understand is "timing-function" -- it is about the manipulation of force and acceleration. https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

• linear: The animation has the same speed from start to end (like sliding on the ice, without any friction)
• ease: Default value. The animation has a slow start, then fast, before it ends slowly (imagine a pendulum or swing)
• ease-in: The animation has a slow start (like falling down)
• ease-out: The animation has a slow end (like slow down and stop the toy car by losing energy)
• ease-in-out: The animation has both a slow start and a slow end (a pendulum or swing) -- in short "ease"

---

Activity01: Understanding web animation

Visit this quiz in Khan academy https://www.khanacademy.org/partner-content/pixar/animate/ball/e/animation-101 and solve 7 questions -- provide the screenshot you mastered the quiz.

---

Adding interactivity is from my perspective, another illusion of life -- and I would like to call it as animation with choices. When you provide interactivity, that means the interface has paused in animation but the user can choose whether and in which direction the animation would flow. In old days, the change has been rather too quick and sudden -- so designers want to smooth the effect of change. The transition effect was devised for that purpose. And now more and more, interaction is visualized with proper transition effects (ex. fade).

In framer, when you add interactions (+) on the right side, you will choose

1. trigger: how do you want to initiate the change
2. transition: what type of visual transition effect you want to apply?

• fade: changes in transparency (alpha value in color)
• flip: changes in rotation
• instant: no transition, just immediate/instant change
• magic motion: some style of animation Framer developed and used as a default transition
• modal: showing a popup box (centered)
• overlay:peeking/sliding from the side
• push: changes in position (sliding)
• or goto somewhere, by url or back

3. then, you will decide the details of animation (timing)

• spring: this will show you popping-up kind of animation
• ease: this will show you rather smooth changes (and you can find the term familiar easy-in, out here)

https://www.framer.com/support/using-framer/transitions/

Well, it is time to play around -- I want you to make something consolidated by using interactions (and animation effect between that change).

---

Activity02: adding interactions to link the works as a solid experience design

1. your cover_page ("what are you?" activity05 in Week01)
2. assignment01: Visual Storytelling(magazine cover)
3. assignment02: Visual Mapping (Simply Redrawn)
4. assignment03: Color scheme for young kids
5. assignment04: Invitation
6. assignment05: Grid
7. individual research video

I want you to add interactions from your first work in Framer ("what are you?" activity) to each assignment. Please provide returning flow (= transition back). If you have worked with other tools, you need to find the way to link all your work smoothly. (for example, use "open link" in Framer). You may want to add some visual cues (ex. buttons) to indicate where the viewers would visit. (ex. assignment01 icon) -- the example work will be provided but you can be creative.

---

So, this is the last part of visualization topic I wanted to introduce you. Hope you find something interesting and useful for your future career and your intellectual/practical development. As the last activity, I want you to read this chapter and think about what visualization means and what you learned.

Reading: visual thinking for design, ch. 8: creative meta-seeing, by C. Ware (CCLE)

Activity03: Reflection of the course

What did you learn during this course about visualization in terms of creative meta-seeing? Provide a quote you agree with. You may also post a question from the reading so we can discuss further about learning visualization.

---

1. Evaluate your peer's works
2. Leave constructive comments

The detailed rubric will be added here.

---

Here is a timeline for the assignment06 and how we wrap up this course:

1. by Thursday (July 30th), please complete activity02.

2. by Friday morning (July 31th, around noon), I will release the peer-review survey by the url of your first work. Please check the announcement.

3. by next Tues midnight (Aug. 4th), you will complete peer review. Your participation will be counted 50% of assignment06. The rest of 50% will come from your peer's evaluation on your work.

4. by next Thurs midnight (Aug. 6th), I will post the grades and extra credits.

---

The purpose of assignment06 is to evaluate your constructive criticism -- now you learned how to see so you know how to make good suggestions to improve the other's design by analyzing the work. The assignments so far was graded based on your learning (to check if you read and practice what I asked you to do) but I didn't evaluate the aesthetics of your work. Your peers will give you some insightful comments.