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

How I developed the "Fastest Scroll-Animations website", Ever! 🏎

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.

Diagonal Parallax

A step-by-step guide to creating a parallax effect using as diagonal shape. Non-rectangular headers are great!

Perfomant CSS animation for beginners

Nice overview of the 4 main properties that animate best with CSS.

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

Rather than reach for SMIL, check out these awesome CSS and JavaScript alternatives.

Inspiration

BB8 from Starwars with SVG & GSAP

Great example of GSAP animation in this cute BB8 - check the description for more info.

Atom Button

Super slick simple demo showing an atom flying around a curved path. Hover to see the effect ⚛️

CSS Motion Path Sample

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 🏠

Jelly Checkbox

Click this unsuspecting checkbox to see what happens! ☑

Animation in the real world

The Journey from Bean to Cup — www.costa.co.uk

How does a tiny coffee bean reach your award winning cup of Costa coffee? See how in an interactive tour.