ZOOOOOOM! 🔍

Is everything big enough and are we in dark mode?

Housekeeping 🧹

• Everyone is encouraged to have their cameras on
• Session will be recorded and made available by the learning team in a few weeks
• Content will also be available on my website after the session
• We will stop for questions along the way and should have some time at the end
• Animations may be a bit laggy due to MS Teams

🎞️ Animation on the Web 🌐

Things ✌️ Talk About

(the agenda)

• Why do we need animations?
• Animating in CSS
• Principles of Animation
• When to ignore all of this

Why do we need animations? 🤷

• User Feedback
• Draw attention to something
• Highlight personality
• Juicyness

☝️ A Quick Note on Custom Properties

These examples make extensive use of CSS Custom Properties so it's good to have a basic understanding of them

.my-stuff {
  /* def */
  --my-color: red;
  --my-size: 12px;

  /* use */
  background-color: var(--my-color);

  /* default */
  height: var(--my-size, 24px);
  width: var(--some-undefined-value, 24px);
}

Animating in CSS 🧑‍💻

• Transitions
• Keyframes
• View Transitions
• Optimizing Animations

Transitions 🎢

• Related to state changes
• Control change of properties over time
• Implicit transitions
  • Intermediate states defined by browser

Setting up a Transition 🔧

We need something to animate

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

.greeting {
  display: inline-block;
  text-transform: lowercase;
  padding: 0.5rem 1rem;
  background-color: var(--color-brand-muted);
  color: var(--color-on-base);
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='font-size:24px;'><text y='50%'>🤚</text></svg>")
      16 0,
    auto;
}

.hand {
  display: inline-block;
}

Using Transitions 👷

Questions?

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

📏 Shorthand Syntax

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

Multi Property Transitions ♾️

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

🤏 Multi Property Transition Shorthand

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

Combining Transitions 🤝

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

Timing ⏱️ Functions

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

⏪ Recap Transitions

• Syntax for Transitions
• Defining transitions based on DOM state
• Transitioning multiple properties
• Shorthand syntax
• Combining transitions
• Timing functions

Animations 🎞️

• Run as soon as the element or class is added
• More complex animations possible
• Can be independent of state
• Implicit or Explicit
  • We can define intermediate states

Using Animations 📹

Questions?

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

State Based Animations 🔛

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

Multi Property Animations 🍿

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

⏪ Recap - Animations

• Syntax for Animations
• Syntax for Keyframes
• Defining animations based on DOM state
• Animating multiple properties

View 🕶️ Transitions

• Triggered by JS
• Transitions content as well as properties
• Can be used across navigations (browser support in progress)

Triggering a Transition ✅

Questions?

<script> 
  const words = [
    "pale",
    "dangerous",
    "secret",
    "madly",
    "sharp",
    "mammoth",
    "overrated",
    "painful",
    "ill-informed",
    "dizzy",
    "ambitious",
    "stable"
  ]

  const random = () =>  words[Math.floor(Math.random()*words.length)].toUpperCase();

  const handleWrapperClicked = (wrapper) => () => {
    // updateCallback 
    document.startViewTransition(() => {
      const content = wrapper.querySelector('.view-transitions-content')

      content.classList.toggle('inverted')
      content.innerHTML = random()
    })
  }

  // wait for all snippets to initialize
  setTimeout(() => {
    const wrappers = document.querySelectorAll('.view-transitions-wrapper')
    for (const wrapper of wrappers) {
      // trigger
      wrapper.addEventListener('click', handleWrapperClicked(wrapper))
    }
  }, 1000)
</script>

<style is:global>
  .view-transitions-wrapper {
    overflow: hidden;
  }

  .view-transitions-content {
    padding: 1rem;
    background-color: var(--color-brand);
    user-select: none;
    margin: 0;

    &.inverted {
      filter: invert();
    }
  }
</style>

The Default Transition 😐

• 2 Different transitions
  • Fades old content out
  • Fades new content in

<div class="view-transitions-wrapper">
  <h1 class="view-transitions-content">CONTENT</h1>
</div>

Understanding the Transition 🤔

Questions?

<div class="view-transitions-wrapper">
  <h1 class="view-transitions-content">CONTENT</h1>
</div>

⏪ Recap - View Transitions

• Trigering a View Transition
• The Default Transition
• Customizing a Transitions

Animation Optimization ⚡

• Size changes are costly
• Some properties are GPU accelearated
  • transform
  • filter
  • opacity
• Using will-change
  • Last resort
  • Do not apply to too many elements

Premature optimization? It's relatively easy to write it correctly first time

🔮 Will-Change

• Used to inform the browser that certain elements of a property will be changed
• The browser can use this to optimize the transition/animation of the property

.greeting {
  will-change: transform;
}

The 12 Principles of Animation 📔

• Introduced in "The Illusion of Life" by Frank Thomas and Ollie Johnston

What do we do with our new found skills?

1. Squash and Stretch 🪢

Illusion of weight and volume

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

2. Anticipation ⌛

Using small actions to indicate an action is about to happen

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

3. Follow Through and Overlap 🐾

Adding movement after an action

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

4. Arcs ⭕

Nature moves in arcs

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

5. Slow In & Slow Out 🦥

Easing in and out of an action

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

6. Timing ⌚

Number of frames for a given action

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

7. Secondary Action 🔂

Additional actions that enhance an action

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

8. Exaggeration 💥

Provide dramatic effect

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

9. Staging 🎭

Direct the audience attention

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

10. Straight Ahead & Pose to Pose 📼

Two different techniques for determining frames

• Straight ahead - Draw frames consecutively
• Post to Pose - Draw frames at start and end the figure out what's in between

11. Solid Drawings 🖼️

Make it feel like 2D shapes occupy a 3D space

<div class="wrapper">
  <div class="greeting">
    Hi there
    <span class="hand">👋</span>
  </div>
</div>

12. Appeal 🌟

• Simple
• Clear
• Compelling

Make the viewer feel something

⏪ Recap - Principles of Animation

1. Squash and Stretch
2. Anticipation
3. Follow Through and Overlap
4. Arcs
5. Slow In & Slow Out
6. Timing
7. Secondary Action
8. Exaggeration
9. Staging
10. Straight Ahead & Pose to Pose
11. Solid Drawings
12. Appeal

🪟 Frameworks and Libraries 📚

• TailwindCSS Animation Properties - Primitives for building animations
• Animate.css - Predefined animations and transitions
• Frame Motion - More sophisticated Javascript driven animations

For defining animations, not design systems

When not to use Animations 🚫

• If the the user has enabled reduced-motion
• If it will add too much visual noise
• If they will distract the user
• Responsiveness and accessibility concerns

Suggestions 💡

• Use animations lightly
• Less is more, small interactions go a long way
• Define your identity and use animations to enhance that
• Understanding interactivity on different screen types
• Animations should have a purpose

Case Study 🕵️

Josh Comeau

• Changing themes
• Navigation dropdown
• Background svg
• Link hover
• Twitter link

Ling's Cars

• Sense of identity
• Maximalism can work too

References and Further Reading 📖

MDN

• Using CSS Custom Properties
• Using CSS Transitions
• Using CSS Animations
• View Transitions API

Principles of Animation

• The Illusion of Life - The 12 Principles
• 12 Principles of Animation
• 5 Ways to Boost Your Game Juice
• Apply the 12 Principles of Animation to Web Development

StackOverflow

• Parabolic Timing Functions