CSS Animation Weekly #30

A blockbuster of awesome articles this week, including loads of modern fast front-end tips, diagonal
CSS Animation Weekly #30
By CSS Animation Weekly • Issue #30
A blockbuster of awesome articles this week, including loads of modern fast front-end tips, diagonal parallax headers, optimising for performance, and learning what CSS animation will be able to achieve in the future. Enjoy!
♥️
Donovan at CSSAnimation.rocks

Articles
A detailed yet very easy to understand overview of how Prashant Sani’s new website was put together. Great insight into how to build a modern, fast, animated portfolio website.
A step-by-step guide to creating a parallax effect using as diagonal shape. Non-rectangular headers are great!
Nice overview of the 4 main properties that animate best with CSS.
codepen.io  •  Share
Rather than reach for SMIL, check out these awesome CSS and JavaScript alternatives.
Inspiration
Great example of GSAP animation in this cute BB8 - check the description for more info. 
codepen.io  •  Share
Super slick simple demo showing an atom flying around a curved path. Hover to see the effect ⚛️
codepen.io  •  Share
This sample illustrating the use of CSS Motion Path is best viewed in Chrome. Shows how the upcoming “motion-path” property can be used to animate along a line 🏠
Click this unsuspecting checkbox to see what happens! ☑
codepen.io  •  Share
Animation in the real world
The Journey from Bean to Cup
How does a tiny coffee bean reach your award winning cup of Costa coffee? See how in an interactive tour.
Did you enjoy this issue?
CSS Animation Weekly
CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.
Carefully curated by CSS Animation Weekly with Revue. If you were forwarded this newsletter and you like it, you can subscribe here. If you don't want these updates anymore, please unsubscribe here.