- CSS Animation Weekly
- Posts
- CSS Animation Weekly #29- Web animation 2017, direction aware hovers and more
CSS Animation Weekly #29- Web animation 2017, direction aware hovers and more
This week we're learning all about the state of the art of web animation in 2017, creating direction-aware hover effects and exploding shards of polygons, as well as some amazing inspiration from around the web.
❤️
Donovan at CSSAnimation.rocks
Articles
A terrific overview of where things are at in the world of web animation. 🎉
Gabrielle Wee shares how to create custom animation effects that depend on the direction the cursor approaches from. Great parallax and cube examples.
A nice step by step guide to creating SVG polygon animations.
Featured Course
A big welcome to all our new Sitepoint subscribers Last week I launched this new course - a series of video lessons on bringing animation to your UI. It's free for all Sitepoint Premium members.
If you've taken the course, be sure to leave a nice review!
Inspiration
A fantastic example of how CSS and JS animation can make for a really fast loading full page experience. Amazing work here. 📦
Hover over this video thumbnail to see a cool 3D effect 😎
Seriously gorgeous effect created by simply drawing circles and animating them upwards! ⃝
The topic is a little dark - washing an owl in a washing machine!? But the animation is superb. Lots to learn from this. 🦉
An adorable example of Tweenmax used to show the construction of a house - drag the timeline to control how the animation plays. 🏡
Animation in the real world
Loads of parallax and scroll-trigger animations on this gorgeous graphic novel all about... hybrid cars 🤔
Become a CSS Animation supporter
You can get the latest news on courses and tutorials, download free resources and support this newsletter from as little as $1 a month! Support CSS animation here.
A bonus link for you - see Chris Coyier upgraded in the new CSS Tricks footer 🕶