CSS Animation Weekly #53 - Bye bye Flash, Web Animation tools and more

So the big news this week was Adobe's announcement that they are finally killing off Flash (in a few years). Now's a great time to take a look around at what Flash alternatives we have, so this issue is packed with tools to help build animations for the web.

Also this week we're animating with CSS variables, experimenting with CSS grid layouts and optimising our animation performance using browser tools.

♥️

Donovan at CSSAnimation.rocks

Tools

Fast becoming the go-to for all sorts of web animation, CodePen is full is awesome examples and tutorials on how GSAP can make complex, performant animations in the browser.

For larger projects, Tumult Hype Professional helps create stunning animated and interactive HTML5 content without any coding.

Ditching Flash, Adobe is offering an alternative in Adobe Animate for animation designers.

If you're looking for an alternative to Adobe's latest tool, check out Google Web Designer. It's a free, professional-grade HTML5 authoring tool, no coding necessary.

More than just animation, Webflow helps designers design and built responsive websites in your browser.

Build banners for your campaign with our drag and drop editor.

If you're an After Effects user, be sure to check out bodymovin. It exports AE projects to HTML.

A free tool for creating animated banners and sliders.

Articles

Great tips here from Val Head on how we can use CSS variables to control our CSS from JavaScript.

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating.

Maria Antonietta Perna explores the Performance Tool available in the Firefox browser to find out more about CSS animation performance.

Featured

Inspiration

Neat demo of animations all about the weather ☔️

Nice transitions on this demo from Sasha Tran

Animation in the real world

Portfolio site of french award-winning designer Laurent Desserrey. Created using Webflow, the scroll effects and use of looping video is awesome.