Review of Animation for the Web including SVG Interface Animation using CSS and JS, along with Greensock GSAP

1. SVG + JS + UX =>
FUNCTIONAL ANIMATION
Presented by Duke Speer
@Duke3D
OpenWest - June, 2018
joind.in/talk/view/24378

2. SLIDES ARE HERE:
JOIND.IN/TALK/VIEW/24378
NOTE – CODEPEN SLIDES AND DEMOS
HOTLINK THROUGH TO PENS
joind.in/talk/view/24378

3. https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet
HOW DEEP WILL YOU DIVE?
"If you don't know SVG you can't call yourself a
web developer; call yourself a web enthusiast"
- Dmitry Baranovskiy (Creator of Snap.svg)

4. https://httparchive.org/reports/state-of-the-web
HOW DEEP WILL YOU DIVE?

5. https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet
HOW DEEP WILL YOU DIVE?
You can't be a web performance expert
without being an image expert!
~ Jason Grigsby

6. STATE OF THE SVG
Mature Image Format
• 1.0 Spec effective 2001
• 1.1 Spec effective 2011
New Features In Progress
• 2.0 Spec Candidate
Sept.2016
• Animation API
Frameworks Galore
• Vue.js
• React.js
• Greensock
• jQuery plugins
• Raphael.js
• Meteor
… many more

7. STATE OF THE SVG

8. STATE OF THE SVG
Responsive by design
Container wraps a fully addressable DOM
Both CSS and Javascript
Media Queries based on Viewbox
Accessible – Aria labels

9. VERSATILE CODE IMPLEMENTATIONS

10. https://commons.wikimedia.org/wiki/File:Bitmap_VS_SVG.svg
VECTOR IMAGE FORMAT

11. https://commons.wikimedia.org/wiki/File:SVG-v-PNG8-enlarged.jpg
INFINITELY SCALABLE – SMALL TEXT FILE

12. https://
RASTER OR VECTOR?

13. https://
RASTER OR VECTOR?

14. https://
RASTER OR VECTOR?

15. https://
RASTER OR VECTOR?

16. MESH GRADIENTS
flickr.com/photos/danlin/202637886

17. 316K 62K
PORTRAIT SMOOTHING OR VECTOR SIMPLIFICATION?

18. https://

19. OPTIMIZE!
Illustrator – Export As instead of Save As
Reduce Points – Simplify Shapes
Reduce decimal points to 1 (Illustrator won’t go to zero.)
Check for clean paths – human readable
Keep layer names used in animation – discard rest.
Remove CRUFT, unused groups, etc.

20. OPTIMIZE!
SVGOMG
Peter Collingridge's SVG Editor
SVGO / SVGO-GUI
High Performance SVGs

21. https://
OPTIMIZE!

22. ICONS - ONE APPROACH FOR
GRACEFUL DEGRADATION
Use this syntax that draws on browser tag error correction in older browsers:
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>
And here’s the magic: Browsers that support SVG will read the code as:
<svg width="96" height="96">
<image xlink:href="svg.svg" width="96" height="96"/>
</svg>
They ignore the unexpected src attribute and will load and show only the SVG file.

23. ICONS - ONE APPROACH FOR
GRACEFUL DEGRADATION
Use this syntax that draws on browser tag error correction in older browsers:
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>
Browsers which do not support SVG will ignore the unknown svg tag and xlink attribute.
Thanks to parser error correction, image is replaced with img and the code is rendered as:
<img src="svg.png" width="96" height="96"/>
and will show the fallback bitmap image.

24. SVG SPRITES V. ICON FONTS
For very simple images (e.g. icons), it may be preferrable not to create a separate SVG file.
Write all the content inline in HTML. It saves a request and could even be shorter than the file
path.
<svg height="160" width="160">
<path d="M5 1v14l9-7">
<image src="images/next.png">
</svg>
source: https://lynn.ru/examples/svg/en.html
u

25. SVG ACCESSIBILITY
<svg aria-labelledby="title” height="160" width="160">
<title id="title">Next Article Arrow</title>
<path d="M5 1v14l9-7">
<image src="images/next.png">
</svg>
u

26. http://www.joeharrison.co.uk/projects/responsivelogos
MEDIA QUERIES INSIDE SVG CONTAINER

27. BRIEF HISTORY OF ANIMATION
Disney Animation:
The Illusion of Life
By Frank Thomas and Ollie Johnston - 1981

28. 12 PRINCIPLES OF ANIMATION
FOR STORYTELLING
Exaggeration
Solid drawing
Arc
Staging
Secondary Action
Appeal
Straight Ahead Action and Pose to Pose
Timing & Spacing
Follow Through and Overlapping Action
Anticipation
Squash and Stretch
Slow In and Slow Out

30. https://
COMPUTER-BASED ANIMATION
Principles of Traditional
Animation Applied to
3D Computer Animation
By John Lasseter, Pixar - 1987

31. PRINCIPLES OF ANIMATION
FOR USER EXPERIENCES
Exaggeration
Solid drawing
Arc
Staging
Secondary Action
Appeal
Straight Ahead Action and Pose to Pose
Timing & Spacing
Follow Through and Overlapping Action
Anticipation
Squash and Stretch
Slow In and Slow Out

32. INTERACTION ANIMATION

33. PRINCIPLES OF ANIMATION
FOR USER INTERFACES
Purposeful
Easing
Morphing
Zooming
Loading
Secondary Action
Target 0.2 – 0.6 seconds
Establish Context
Reveal a Mental Model for Info Architecture
Reveal Persistant Navigation Tools
Draw eye to changes of state
Connect related objects
Minimize perceived long loading times
Communicate brand mood and personality

34. MENTAL MODELS
?

35. https://www.choicefurnituresuperstore.co.uk/images/Pd-
Global-Furniture/Vermont-Oak/3-Pd-Global-Vermont-Oak-
Chest-of-Drawers-2-Over-3-Drawers.jpg
MENTAL MODELS

36. https://www.choicefurnituresuperstore.co.uk/images/Pd-
Global-Furniture/Vermont-Oak/3-Pd-Global-Vermont-Oak-
Chest-of-Drawers-2-Over-3-Drawers.jpg
MENTAL MODELS
Underwear Socks
T-Shirts
Sweaters
Shorts

37. MENTAL MODELS
?

38. MENTAL MODELS

39. EASE IN-OUT

40. https://www.smashingmagazine.com
/2015/05/functional-ux-design-animations/
EXPAND INTO VIEW – CONTRACT TO “HOME”
Principles:
- Follow Through
- Exaggeration
via
Bounce style Ease In/Out

41. EASING ADDS REALISM

42. https://
EASES – BEZIER CURVE

43. https://
EASES – BEZIER CURVE

44. Under 200ms likely not perceived – not worth the overhead to load extra code.
Larger animations take more time to appear high quality / have smooth motion
Unless filling time to disguise a long load, over 600ms is likely holding up the user.
My default is 0.3sec. Adding 20-30 ms is significant for improving readability.
TIMING

45. FACILITATE USER EXPERIENCE
https://www.sarasoueidan.com/blog/building-a-circular-navigation-with-svg/

46. FACILITATE USER EXPERIENCE

47. FACILITATE USER EXPERIENCE

48. DESIGN GUIDELINES FOR
INTERACTIVE ANIMATIONS
Meet a stated purpose! Animation is not decoration. It should guide or facilitate the user reaching a goal.
Keep it simple and unobtrusive – great interface animation is gentle and almost invisible!
Design to be non-blocking and interruptible. Enable input and respond immediately to that input.
Brief - Long enough to be seen, but not so long that the user is waiting for it to finish on a repetitive activity.
Reduce Cognitive Load – remove mystery and confusion about what’s off the edges of the screen.
Call user’s attention to asynchronous changes of state – (e.g. order status goes from submitted to accepted.)
Cluster and associate related objects via color, contrast, and opacity.
Use low-hanging fruit – transforming position, rotation, scale, opacity and color incurs the least overhead.

49. DESIGN GUIDELINES FOR
INTERACTIVE ANIMATIONS
A good UX designer can easily explain the logic behind each decision
in a design concept. This includes the information architecture, the
hierarchy of page content, the flow and the assumptions made.
~ Amit Daliot, Lead architect - 5ive

50. DESIGN GUIDELINES FOR
INTERACTIVE ANIMATIONS
Interface animation should match your brand’s mood, voice and personality.
Does this example promote Apple’s reputation for sophisticated elegance?

51. EXPRESSING BRAND STORY & PERSONALITY
https://www.behance.net/gallery/32158897/Brand-Identity-by-Ramotion-Branding-Agency-in-SF

52. EXPRESSING BRAND STORY & PERSONALITY
https://www.behance.net/gallery/32158897/Brand-Identity-by-Ramotion-Branding-Agency-in-SF

53. DESIGN GUIDELINES FOR
INTERACTIVE ANIMATIONS
Best practice – include animation styles in your Brand and UX Style Guide to
create consistency across all platforms and more DRY reusable code segments.
Drawer animation
Our side-to-side animations are influenced by the carriage of the IBM Executive electric typewriters.
We extracted qualities like precision and accuracy from the machine. The carriage slings smoothly
as it returns to the left margin, stopping exactly in the same place every time.
https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/

54. DESIGN GUIDELINES FOR
INTERACTIVE ANIMATIONS
Best practice – include animation styles in your Brand and UX Style Guide to
create consistency across all platforms and more DRY reusable code segments.
IBM 2560 multi-function card machine
The sliding of the multi-function card machine is used as inspiration for the mobile drop down.
As a punched card is fed from the hopper, it gracefully pushes out from the left side. Then, the card
halts for a split second and slides out of sight, the way the drop down zips back up into place.
https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/

55. DESIGN GUIDELINES FOR
INTERACTIVE ANIMATIONS
Best practice – include animation styles in your Brand and UX Style Guide to
create consistency across all platforms and more DRY reusable code segments.
IBM 729 magnetic tape unit
The rhythmic oscillations of tape reels in motion got us thinking about a user’s waiting experience.
If a user watches search results load, showing the machine at work relays a sense of efficiency.
The swift and even balance of the spinning circles indicates that progress is being made.
https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/

56. RESOURCES
Animating Your Brand by Donovan Hutchinson in 24 Ways has a more realistic
perspective on including animation in style guides.
https://24ways.org/2015/animating-your-brand/
Val Head gave a talk on Motion In Design Systems: Animation, Style Guides,
and the Design Process – ($19 to access the recording.)
https://aycl.uie.com/virtual_seminars/motion_in_design_systems_animation_style_guides_and
_the_design_process
One of the better write-ups about animation considerations is by Sarah Drasner
in her article
Animation in Design Systems published by 24 Ways
https://24ways.org/2016/animation-in-design-systems/
Note - The charts on the following pages are from this article.

57. SET REALISTIC OBJECTIVES

58. SET REALISTIC OBJECTIVES
https://ibm-design-language.eu-de.mybluemix.net/design/language/experience/animation/elements/

59. CONFIRM INTERACTIONS

60. COMMUNICATE CONTEXT CONSISTENTLY

61. COMMUNICATE CONTEXT CONSISTENTLY

62. DRAW ATTENTION TO STATE CHANGES

63. ZOOM / FLOW INTO DETAILS AND TASKS

64. ZOOM / FLOW INTO DETAILS AND TASKS

65. HINT AT NEXT STEPS ALONG GARDEN PATH

66. HELP TELL YOUR SITE OR PRODUCT’S STORY

67. CHOOSING THE PROPER TOOL
http://www.themetisfiles.com/wp-content/
uploads/2016/04/Hammer-and-Nail.jpg
Use low-hanging fruit – transforming position, rotation,
scale, opacity and color incurs the least overhead.
CSS 2D transforms of SVG elements render most efficiently.
Using JS to increment and repaint elements may get
pixelated during the transform. (CSS/Greensock solves this.)
GSAP SVGMorph and SVGDraw have no equal for
sophisticated effects that work on all browsers.

71. ADD INTEREST …

73. WHEN THE POINT COUNTS DON’T MATCH …

74. READ MORE

75. CLIENT PROJECT DEMO
Removed – Not approved for public release.

76. SVG + JS + UX =>
FUNCTIONAL ANIMATION
Presented by Duke Speer
@Duke3D
OpenWest - June, 2018
joind.in/talk/view/24378

77. RESOURCES – NEW TO SVG
Start simple: using SVGs on web
https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet
Using SVG – An Intro to Icons on CSS-Tricks
https://css-tricks.com/using-svg/
Book for beginners …
Practical SVG
https://abookapart.com/products/practical-svg
Tutorial for first SVG Animation
https://designmodo.com/svg-animation/

78. RESOURCES – SVG IN FRONTEND FRAMEWORKS
React
https://css-tricks.com/productive-in-react/
https://www.youtube.com/watch?v=PGUMRVowdv8
Vue
http://vueconf.us/workshops/?focus=sarah-drasner
https://github.com/sdras/animating-vue-workshop
Nuxt for Vue
https://nuxtjs.org/guide
Raphael
http://dmitrybaranovskiy.github.io/raphael/
Meteor
https://guide.meteor.com/ui-ux.html
SVG Drawing Tool - Inkscape - FOSS/Free
https://inkscape.org/en/about/features/

79. RESOURCES – SVG
Dimitri - You Don’t Know SVG
https://www.youtube.com/watch?v=SeLOt_BRAqc
Reduced Motion Option in UI for Accessibility
https://hugogiraudel.com/2018/03/19/implementing-a-reduced-motion-mode/
3D to SVG Converter
http://stylecampaign.com/blog/2014/03/3D-to-SVG/
One Project’s Character Animation Process
https://playgroundinc.com/blog/the-playground-vector-animation-process/
Cell Animation by hand
https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/

80. RESOURCES – SVG
Blog Re: The problems that Greensock solves
https://greensock.com/css-performance
Greensock Intro
https://www.youtube.com/watch?v=v9GK4Rf6w3A
Getting Started with Greensock – another viewpoint
https://www.youtube.com/watch?v=v9GK4Rf6w3A
Convert to SVG
https://hashnode.com/post/start-simple-using-svgs-on-web-cikiox3se00i9sf53929d4qet
https://image.online-convert.com/convert-to-svg
Animation in Design Systems
https://24ways.org/2016/animation-in-design-systems/
https://css-tricks.com/the-importance-of-context-shifting-in-ux-patterns/
Animation Tech Compared
https://css-tricks.com/comparison-animation-technologies/
Benchmarks
https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/
Greensock - Motion on a path
https://davidwalsh.name/gsap-svg
Courseware
https://frontendmasters.com/courses/svg-animation/