Animation DevTools

Daisuke Akatsuka

Mantaroh Yoshinaga

Brian Birtles

aim

explore possibilities for creating content from the browser, beginning with animation

investigation

• Interviews
• Processes of making animation

• Want to coordinate multiple kinds of content
• Want to apply animation to existing web content
• Importance of layered content

Art Animation Creators

• Want to focus on VR
• Important to be able to start easily
• Need to consider different types of animation used throughout the world
• Want to be able to combine resources
• Emphasised importance of the time axis
• Being able to create animations in the browser would be great since anyone could create animations
• Would like to use animation tools for education

interviews

An anime university professor

Web Animators

• Would love to be able to compare animations with a view to consistency
• In addition to being able to change visual effects like vertex/alpha/color, adjusting delay/duration/easing is even more important
• The time axis is the primary axis that we tweak
• We'd like to share the animation
• It's hard to implement interruption of animations
• Timeline synchronization including synchronizing with music

• Tools that anyone can use and on any platform
  • People love their animation tools
  • Tools in the browser can be easily tried
• Associate with different resources
• Being able to re-use animations and effects

Animation expression

• Common animation parameters
  • Basic visual properties: vertex, alpha, color
  • Timing properties: duration, delay, easing
    (In terms of animation, the timing axis is the more important of the two)
• Interest in VR and 3D

summary

Strong interest in Web/Browser-based animation tools

Concept #1:

Timewaves

idea

create material

define Avars

animate

tweak / debug

deploy

"As a platform engineer, I want to inspect all the animations and see exactly what they're doing."

"As an app developer, I want to replay the interactions in my app and fine-tune their timing."

delay

animation

iterations

iteration start

easing

direction

direction +
iterations +
iteration start +
easing  

keyframes

effect easing

keyframe easing

timing

keyframes

animation

const anim = div.animate(
  [ { transform: 'translate(0px)',
      backgroundColor: 'red' },
    { transform: 'translate(-20px)',
      easing: 'ease-out' },
    { backgroundColor: 'blue' },
    { transform: 'translate(100px)',
      backgroundColor: 'green' } ],
  {
    duration: 500,
    iterationStart: 0.5,
    iterations: 2.5,
    easing: 'ease-in',
    direction: 'alternate'
  });

Tweaking timing

Tweaking timing

Tweaking timing

Tweaking timing

Tweaking timing

Tweaking keyframes

Adjust keyframe offset

Adjust keyframe easing

Saving changes

CSS Animations

• Changes to keyframes
  • Update original @keyframes (i.e. affects all users of rule)
• Changes to timing graph
  • Updates the winning declaration of each property

CSS Transitions

• Not possible to change repeat count etc.
• Updates the winning declarations of each property

Scripted animations

• Have a button / tab to generate source

Replay?

• DOM changes (e.g. FLIP method, node removal, display:none etc.)
• Record and replay mode?

Concept #2:

Unexpected Avars

idea

create material

define Avars

animate

tweak / debug

deploy

"As an animator, I want to discover

new animation expressions."

"As an amateur animator, I want to make animations more easily."

Physical

phenomenon

Human

imagination

Animation expression

Physical

phenomenon

Human

imagination

New animation expression

Computer

support

idea

create material

define Avars

animate

tweak / debug

deploy

Concept #3:

Stateful Animations

"As an app developer, I want to add animated transitions to my app's interactions"

Challenges

• How to work with interactions that modify the DOM?
• How to work with existing apps?
• Save format? CSS? SASS? JSON?
• Does this even need to be an animation tool, or is animation just part of a bigger state editing tool?
  • Let's you build Web Components / React components?

idea

create material

define Avars

animate

tweak / debug

deploy

Concept #4:

Layered Animation

"As a web creator, I want to create web animation content easily"

"As a web creators, I want to reuse web animation / animation's effect"

What is Layered Animation?

Layered Animation ≒ Group of Animation Contents

What is Layer?

Animation Layer consist of Web Animation Contents.

Insert Layered Animation

We can insert web content as "Animation Layer"

Element.appendAnimation("./animatedWebPage.html");
Element.animate("./AnimationEffect.json");

Reuse Layered Animation

We can insert Layered Animation from URL.

And, we can insert Layered Animation effect from JSON file.

Element.appendAnimation("./animatedWebPage.html");
Element.animate("./AnimationEffect.json");

idea

create material

define Avars

animate

tweak / debug

deploy

Concept #5:

Design Mode

"As a web developer, I want to make animated components like spinners and highlight effects"

Design mode context

• A keyframe (limited to a single element)
• A CSS ruleset
• A state (cf. Stateful Animations)
• No context (sets element style?)

Other ideas

• Animation recommend
  
• Built-in physics engine
  
• Customize animation for myself
• Animation Hub (GitHub-like)
  • co-development
  • manage making histories
• Cut animation (for mobile)

idea

create material

define Avars

animate

tweak / debug

deploy

Timewaves

Unexpected Avars

Stateful Animations

Layered Animation

Design Mode

Summary