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? SVG (Scalable Vector Graphics) Animation CSS Animation jQuery Animation (JavaScript) Using free open source plugins for scroll-to-animate effects 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/

READ: https://startupsventurecapital