You're receiving this email because you wisely signed up at
View this email in your browser

Hello from a guest-edited edition of the Animation at Work newsletter, aka Web Animation Weekly! Lisi checking in! I wanted to start this issue by talking about the misconception of having to be a creative genius for crafting great web animations. 

Creating an engaging animation is not a simple undertaking and often requires lots of tinkering, testing and most of all: time. Every animation teaches you something new and with time you’ll become quicker and more efficient in using the necessary tools and languages, but getting an animation just right, will require you to put some time and dedication into making it feel natural. Playing with other people’s code is a great way to get started in understanding how an animation was made. Like Michelangelo said a long time ago: “If you knew how much work went into it, you would not call it genius.” 

Lisi Linhart, Guest Editor

Adding interactivity always makes a website more playful and engaging. Check out this website for a music competition transforming a classic dots loader in a fun and interactive onboarding experience, that also includes a musical interaction part, creating different sounds, when the dots are hovered. 
[Article] [Tutorial] Just getting started in Web Animation and want to read an overview for what options you have doing animation on the web? Read Viget's The State of Web Animation: Part 1 and Part 2

[Slides] [UX] Eli Fitch gave a great talk on ethics and emotion in animation, have a look at his slides.

[Article] [CSS] Going beyond ease-in-out is always worth it, learn about Crafting Easing Curves for User Interfaces.

[SVG] [Tools] Shape Shifter is a little SVG icon animation tool that lets you export animated SVG icons and sprite sheets.

[CSS] [Tools] Animista is a simple tool that lets you customize often used CSS animations and copy and paste them. 

[Library] [Javascript] Want to get an overview over all the web animation tools & libraries that exist? Have a look at the Web-animation toolkit

[CSS] [Tutorial] 30 Seconds of CSS has some great reappearing CSS patterns, explaining simple code snippets & browser support

[Slides] [Tutorial] Learn some more about Mathematics of Animation in these amazing slides by Varun. 
About our guest editor
Lisi is a dedicated frontend developer with a passion for web animation and design. She enjoys creating little delightful animations based on illustrations, has organized a conference and recently also started speaking. Currently she’s working and researching on her master thesis in Salzburg, Austria.
Love the newsletter? Your support keeps us going!

Contribute to our Patreon,
submit a link, or simply forward it to your friends
Copyright © 2018 Tin Magpie, All rights reserved.

unsubscribe from this list    update subscription preferences