1. Animation for the Web

2. 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

3. 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)

5. 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

6. Adobe Edge Animate Examples
(responsive animation)

7. 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. 
Digital agency’s portfolio showing the use of small simple animations
UI/UX designer’s website. Showcasing simple background SVG animations that trigger on scroll.
Using animation to portray the brand and style of the stage and exhibition designer, Katrzyna Konkowska. Visually appealing and yet easy to navigate.
Proposal creation tool. Using scroll triggered animation for transitional effects.
Examples of SVG animations for inspiration

8. Resources for self-learning:
A Beginner’s Introduction to CSS Animation
Creating SVG files: From Illustrator to the Web
Animating SVG
jQuery tutorials
Free open source plugins for scroll-to-animate effects:

9. READ: https://startupsventurecapital