SVG animations From common UX implementations to complex responsive animation

Sarah Drasner

Book - 2017

SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. It becomes increasingly more interesting as you explore its capabilities for responsive animation and performance boons. When you animate SVG, you must be aware of normal image traits like composition, color, implementation, and optimization. But when you animate, it increases the complexity of each of these factors exponentially.This practical book takes a deep dive into how you can to solve these problems with stability, performance, and creativity in mind.Learn how to make SVG cross-browser compatible, backwards compatible, optimized, and responsivePlan and debug animationMake a complex animation responsive, as many sites are responsiveProfile each an...imation technique in terms of performance so that you know what you're getting in to with each library or native technology

Saved in:

2nd Floor Show me where

006.74/SVG/Drasner
1 / 1 copies available
Location Call Number   Status
2nd Floor 006.74/SVG/Drasner Checked In
Subjects
Published
Sebastopol, CA : O'Reilly Media 2017.
Language
English
Main Author
Sarah Drasner (author)
Edition
First edition
Item Description
Includes index.
Physical Description
224 pages : illustrations ; 24 cm
ISBN
9781491939703
  • The anatomy of an SVG
  • Animating with CSS
  • CSS animation and hand-drawn SVG sprites
  • Creating a responsive SVG sprite
  • UI/UX animations with no external libraries
  • Animating data visualizations
  • A comparison of web animation technologies
  • Animating with GreenSock
  • GreenSock's timeline
  • MorphSVG and motion along a path
  • Stagger effects, tweening HSL, and SplitText for text animation
  • DrawSVG and draggable
  • Mo.js
  • React-motion
  • Animating the unanimatable: motion with attributes and bare-metal implementations
  • Responsive animation
  • Designing, prototyping, and animation in component libraries.