This week we're focusing on tools and services that make your animating life easier. Whether that's finding the right WebGL tool, learning the various ways CSS animation can be used, or stringing together complex animations with JavaScript.
Also, if you're interested in working for the world's top companies, check out this week's sponsor, Toptal.
As ever, if you've found something cool you'd like shared, let me know!
♥️
Donovan at CSSAnimation.rocks
Articles
Finding the best WebGL tool
Eve Weinberg takes on the task of exploring the many tools and helpful utilities for working with WebGL. Essential reading if you're thinking of getting into advanced animation in the browser.
CSS Web Animation Tools, Techniques and Resources
Jake Rocheleau dives into CSS animation resources, covering the basics, SVGs, timing functions and on-scroll events.
Sponsor
Toptal: Find Your Top Designers
See why top startups depend on Toptal to connect them with elite designers, hand-picked to match their needs. Work with top designers on an on-demand basis.
Tools
anime.js
Anime.js is an elegant JS based animation framework. Useful for creating randomised effects and animations with relatively little code.
snabbt.js
If you're finding CSS keyframes don't quite cut it, Snabbt is worth considering. It is a minimalist JS animation framework that makes use of CSS for smooth results.
Animate.css
A rightfully popular toolkit for adding CSS animations to your UI. It's a set of animations covering everything from sliding in, zooming, bouncing and more.
WOW.js
A popular tool that triggers animations on scroll. It's set up to work nicely with Animate.css but you can use your own animations if you want to create a unique voice.
Scrollanim
A handy utility to trigger animations on scroll. Scrollanim uses Animate.css to trigger animations on scroll.
Tinseltown.js
Recreate the hacker-style TV scenes with this fun tiny JS animation plugin. Random faux Hollywood-style page loading effects, and less than 4kb in size.
Free HTML5 Online Animation Maker, Banner Maker and Video Maker | Animatron
Billed as "animation for the rest of us", Animatron is a web-based tool for generating explainer animations, banners and other HTML/CSS elements using animation.
Inspiration
Bouncy Ball - Compare Web Animation Techniques
Wondering how the various frameworks compare? Find some inspiration here with a "hello world" of animation created using each approach.
The Wave
An elegant wave of bubbles with hover effect, from the folks at Digital Ocean. Nice touch with the Sammy Shark image.
Animation in the wild
GearAward - Code-driven art
An inruiling 3D-style effect on the background image here, try moving the mouse to see the result. The site also links loads of interesting CodePen experiments.