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

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

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

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: