Explore functional animation in web design through this CSSConf.Asia 2016 talk by Sarah Drasner. Discover how carefully considered animations can enhance user experience, guide users through spatial maps, and make sites function intuitively. Learn about various use cases for animation, from design principles to technical implementation. Gain insights into topics such as saccade, invisible animation, cognitive leaks, UX patterns, modals, and brute force UX. Examine real-world examples, including a use case from Barcelona, and explore technologies like React Motion. Delve into concepts such as perceived performance, capturing attention, spatial awareness, and immersive animation. Investigate SVG animation techniques, responsive design considerations, and accessibility concerns. Benefit from Drasner's extensive experience as an award-winning UX Design and Engineering Manager, Frontend Masters workshop instructor, and CSS-Tricks staff writer.
Overview
Syllabus
Introduction
Saccade
Why is this important
Animation gets a bad rap
Invisible Animation
Cognitive Leaks
UX Pattern
Isolation
Modals
Brute Force UX
Investigate modal
Bake animation into an experience
Use case Barcelona
Do you hate animation
Animation can be informative
Animation needs a hero
React Motion
Bouncy Ball Demo
Form Loader
Perceived Performance
Capturing Attention
Spatial Awareness
Code Drops Demo
Drag Drop Demo
Performance
Performance Demo
Netflix
Immersive Animation
SVG
SVG Pros
Responsive SVG
Performance hits
GreenSock
Timeline
Timeline Demo
SVG DOM
Responsive Design
Accessibility
Hipster Elephant
Web Technologies
Taught by
JSConf
