Transcript Animation for the Web

ANIMATION FOR
THE WEB
WHAT ARE WEB ANIMATIONS?
• Web animations are often saved as GIF, CSS,
SVG, WebGL or video
• Ranges from simple animations (hover effects)
• To full-screen background animations
• KEY: Keep it simple.
• Simple bits of animation can guide the user
without changing the aesthetic
WHEN DO YOU USE ANIMATION?
• All animation needs to serve a purpose/goal for the user and not get in the
way of the content
• Primary reason to use animation is to increase usability (guide tool to help
users navigate the website better)
– Animation can help to show which element is clickable
– Creates a flow or directs the users to what you want
them to see
• Second reason to use animation is for aesthetic reasons
– Use to spark visual interest and engage users
– Create emotional connection between the interface and the user
– “The Blink Test” (3-5 secs visitors use to decide to stay or leave)
HOW DO YOU CREATE ANIMATIONS?
1. SVG (Scalable Vector Graphics) Animation
2. CSS Animation
3. jQuery Animation (JavaScript)
4. Using free open source plugins for scroll-to-animate effects
5. Software such as: Adobe Edge Animate CC, Google Web Designer,
Animatron
ADOBE EDGE ANIMATE EXAMPLES
• http://html.adobe.com/edge/animate/showcase/birds/ (responsive animation)
• http://html.adobe.com/edge/animate/showcase/interactive-marquee/
EXAMPLES
• http://www.thehappyforecast.com/region-select/
• The Happy Forecast website uses beautiful interactive animation to display the social wellbeing of each postal code in
London.
• https://y7k.com/projects
• Digital agency’s portfolio showing the use of small simple animations
• http://pedrolandaverde.com/
• UI/UX designer’s website. Showcasing simple background SVG animations that trigger on scroll.
• http://dreamteam.pl/
• Using animation to portray the brand and style of the stage and exhibition designer, Katrzyna Konkowska. Visually
appealing and yet easy to navigate.
• https://getbeagle.co/
• Proposal creation tool. Using scroll triggered animation for transitional effects.
• http://www.hongkiat.com/blog/svg-animations/
• Examples of SVG animations for inspiration
RESOURCES FOR SELF-LEARNING:
• A Beginner’s Introduction to CSS Animation
http://webdesign.tutsplus.com/tutorials/a-beginners-introduction-to-css-animation--cms-21068
• Creating SVG files: From Illustrator to the Web
http://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web--vector-20899
• Animating SVG
• http://www.hongkiat.com/blog/scalable-vector-graphics-animation/
• jQuery tutorials
• http://www.vandelaydesign.com/jquery-animation-tutorials/
•
•
•
•
•
Free open source plugins for scroll-to-animate effects:
https://github.com/jlmakes/scrollreveal.js
http://janpaepke.github.io/ScrollMagic/
http://jackonthe.net/css3animateit/
http://mynameismatthieu.com/WOW/
R EA D: H T T P S : //STA RT UPSVENT URECAPI TAL . COM /Y OUR -UI - ISN - T- A-DISNEY - MOVI E70 3 F7FBD24D2#. SO O6RT Y 9A