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

GSAP, the standard for JavaScript HTML5 animation | GreenSock — greensock.com

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.

Tumult Hype Professional — tumult.com

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

Adobe Animate CC — www.adobe.com

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

Google Web Designer — www.google.com

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.

Responsive web design tool, CMS, and hosting platform — webflow.com

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

TweenUI

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

bodymovin/bodymovin: after effects to html library

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

HTML5Maker

A free tool for creating animated banners and sliders.

Articles

Animating with CSS Variables

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

CSS Grid Layout Slideshow — tympanus.net

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

Check CSS Animation Performance with the Browser's Dev Tools

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

Featured

Inspiration

Customizable Weather Animations

Neat demo of animations all about the weather ☔️

CodePen - Personal Website - Anime.js

Nice transitions on this demo from Sasha Tran

Animation in the real world

laurent desserrey - internet designer — laurent.directory

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