Web Animation has always been one of the most exciting topics in web development for me. I even wrote a master thesis about it to learn more about the scientific aspects of animation.
The interesting part about animating on the web is that there are so many different ways of creating animations. You can start with simple CSS interactions, which are great for the user experience. Check out Val Head’s Designing Interface Animation for learning more about the combination of animation and interfaces. Then we have more elaborate SVG animations, which are great for creating complex animations, that explain you something. Read Sarah Drasner’s SVG Animations book to learn all about it.
But you can go even further and create generative and very fancy animations with canvas / WebGL using one of the many libraries to create more interactive experiences like paper.js, two.js or pixi.js.
All of these different ways of creating web animations are great for learning, improving and exploring HTML, CSS, SVG and Javascript. Which is why it’s also an awesome topic to explore for beginners.
– Lisi
Collection
A great collection of resources about web animation
Collection
A collection of easing functions to get custom easings for CSS
Inspirations
A great website by Steve Gardner that collects inspirations for web animation
Last month I switched from the Developer Experience team to the Product team, which was an exciting change. I have already been working directly on the product the past few weeks, when I was building the version 2 of Storyblok’s partner portal, which just launched. Now joining the product team, I get to work directly on new features on the core product and my team is really nice and fun to work with. We’re working hard on launching the version 2 of Storyblok’s visual editor in the next month.
This book is a great practical guide on web animation and how to prioritize it with your team.