explore possibilities for creating content from the browser, beginning with animation
- 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
An anime university professor
- 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
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
Strong interest in Web/Browser-based animation tools
iteration start +
Adjust keyframe offset
Adjust keyframe easing
Changes to keyframes
@keyframes(i.e. affects all users of rule)
- Update original
Changes to timing graph
- Updates the winning declaration of each property
- Not possible to change repeat count etc.
- Updates the winning declarations of each property
- Have a button / tab to generate source
- DOM changes (e.g. FLIP method, node removal,
- Record and replay mode?
- 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?
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"
Reuse Layered Animation
We can insert Layered Animation from URL.
And, we can insert Layered Animation effect from JSON file.
Design mode context
- A keyframe (limited to a single element)
- A CSS ruleset
- A state (cf. Stateful Animations)
- No context (sets element style?)
- Animation recommend
- Built-in physics engine
- Customize animation for myself
- Animation Hub (GitHub-like)
- manage making histories
- Cut animation (for mobile)
By Brian Birtles