web animations
TRANSCRIPT
![Page 1: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/1.jpg)
Web Animations
Puppet Icon Designed by Juan Pablo Bravo, The Noun project
![Page 2: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/2.jpg)
Hola!
Suresh (@bsuresh2)
Front-end Developer
Mobile And Application Development team @CtiDigital
![Page 3: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/3.jpg)
vsDeclarative
http://cats-paradise.net/
Imperative
![Page 4: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/4.jpg)
Before we begin...
http://www.visualphotos.com/image/2x2714849/boxer_taping_hands_before_fight
![Page 5: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/5.jpg)
a: A motion picture made by photographing successive
positions of inanimate objects (as puppets or
mechanical parts).
b: A motion picture made from a series of drawings
simulating motion by means of slight progressive
changes.
“Animation”
From webster definition of animation
![Page 6: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/6.jpg)
There is more to it...
http://i.telegraph.co.uk/multimedia/archive/01958/Boxing_1958661b.jpg
Rule
s Principle
s
Tricks
Techniqu
es
![Page 7: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/7.jpg)
Twelve
Commandments
Revelation Icon Designed by Cédric Villain, The Noun project
![Page 8: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/8.jpg)
Gifted to this world
by...
The God
Ollie Johnston
&
Frank ThomasFrom Disney Inc.
![Page 9: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/9.jpg)
● Squash and stretch
● Anticipation
● Staging
● Action and Pose to Pose
● Follow Through and Overlap
● Slow in Slow out
● Arc
● Secondary Motion
● Timing
● Exaggeration
● Solid drawing
● Appeal
![Page 10: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/10.jpg)
Animation by Definition
Object moves from A to B aka
simulating motion by progressive
changes over time.
![Page 11: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/11.jpg)
Squash and stretch
![Page 12: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/12.jpg)
Squash and Stretch
- This gives a sense of weight and flexibility to
drawn objects.
- It can be applied to simple objects, like a
bouncing ball.
- Or more complex constructions, like the
musculature of a human face.
![Page 13: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/13.jpg)
Anticipation
![Page 14: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/14.jpg)
Anticipation
- Prepare the audience for an action,
- Example
- a golfer making a swing has to swing the club back
first.
- This technique can also be used for less
physical actions
![Page 15: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/15.jpg)
Staging
![Page 16: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/16.jpg)
Action and Pose to Pose
![Page 17: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/17.jpg)
Action - CSS Transitions
- Drawing out a scene frame by frame from
beginning to end.
- Creates a more fluid, dynamic illusion of
movement
- Better for producing realistic action
sequences.
![Page 18: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/18.jpg)
Pose to Pose - CSS Keyframes
- This involves starting with drawing a few key
frames, and then filling in the intervals later
- Works better for dramatic or emotional
scenes.
- Hybrid combination can be used as well!
![Page 19: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/19.jpg)
Follow Through and Overlap
● To give the impression that characters follow the laws of
physics, including the principle of inertia.
● Exaggerated use of the technique can produce a
comical effect
● While more realistic animation must time the actions
exactly, to produce a convincing result.
![Page 20: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/20.jpg)
Slow in Slow out aka. Easing
![Page 21: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/21.jpg)
Arc
● Most natural action tends to follow an arched
trajectory.
● Animation should adhere to this principle by
predefined/generated "arcs" for greater
realism.
![Page 22: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/22.jpg)
Secondary Motion
● Emphasize, rather than take attention away
from, the main action.
● If the latter is the case, those actions are
better left out.
![Page 23: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/23.jpg)
Timing
● On a purely physical level, correct timing
makes objects appear to obey the laws of
physics.
● For example, an object's weight determines
how it reacts to an force, like a push based
on reaction.
![Page 24: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/24.jpg)
Exaggeration
● Exaggeration is an effect
especially useful for animation,
IMITATION!
● Imitation of reality depends on
whether one seeks realism or a
particular style.
![Page 25: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/25.jpg)
Appeal
● There are several tricks for making
a animation connect better with
the audience;
● Symmetry, golden ratios! even a
hint of naturalistic fractal
distributions.
![Page 26: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/26.jpg)
All combined together!
A little Demo time!
![Page 27: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/27.jpg)
Wooooah...cool!
![Page 28: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/28.jpg)
Some real life examples
![Page 29: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/29.jpg)
![Page 30: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/30.jpg)
vsDeclarative
http://cats-paradise.net/
Imperative
![Page 31: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/31.jpg)
Declarative Animations
● Performance
● Ease of wrapping
● Motion Principles?!
Extracts from ngeurope famo.us talk by Zack brown, http://codepen.io/redouglas/pen/vCgwc
![Page 32: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/32.jpg)
Declarative Animations - The Hard
part
● Interactions?!
● Complex Orchestrated Animations
● Timing & knowing when things are done
● Design changes
● Authoring, Refactor?!
● Maths/computed physics
Extracts from ngeurope famo.us talk by Zack brown
![Page 33: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/33.jpg)
Imperative animations
● Animations can be orchestrated
● Halted and reversed at any given point
● User interactions
● Computational physics
● External forces like spring, elastic, damping, oscillation!
![Page 34: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/34.jpg)
Imperative animations - The Hard
part
● Performance
● Load times
● Devices
● GPU Layer Access
![Page 35: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/35.jpg)
What Now?!
![Page 36: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/36.jpg)
Browser Challenges
Browser Repaint
![Page 37: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/37.jpg)
Repaints can be tricky!
Spanish fresco restoration - http://www.bbc.co.uk/news/world-europe-19349921
![Page 38: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/38.jpg)
The Browser Repaint!
![Page 39: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/39.jpg)
The Browser Repaint - Inspectors
● Chrome dev tools Timeline
● Mozilla MozAfterPaint
● IE Visual Round Trip Analyser
(VRTA)
![Page 40: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/40.jpg)
The Common Struggle
● Complex DOM
● Web standards
● Accessibility
● Jank Busting
● GPU layer access
![Page 41: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/41.jpg)
![Page 42: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/42.jpg)
Light at end of tunnel
● Various frameworks like Famo.us, KineticJS
GSAP, ionic framework, Material design
● WebGL
● SVG Animations, Bonsai, Snap.svg, RaphealJS, D3
● Web Standards/Browsers RAF (Req Animation frame),
Prefix free, ‘will-change’ property, WebGL support etc.,
![Page 43: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/43.jpg)
Light at end of tunnel
● Tools to help you traverse the Animation universeBookmarklet for Browser independent paint inspection by Lindsey Simon at Google
https://developers.google.com/speed/articles/reflow
CSS Triggers
http://csstriggers.com/
![Page 44: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/44.jpg)
Light at end of tunnel
● Abstractions can be good
● Can also be hinderance?!
![Page 45: Web Animations](https://reader035.vdocuments.net/reader035/viewer/2022062300/55a6c7b21a28aba2048b4719/html5/thumbnails/45.jpg)
Thanks!
&
Any Questions?!
@bsuresh2