Animation
![Screenshot of SVG Loaders website](https://toolkit.addy.codes/wp-content/uploads/screenshots/svg-loaders.png)
SVG Loaders
A collection of handy free SVG loading icon animations.
![Screenshot of Flat Surface Shader website](https://toolkit.addy.codes/wp-content/uploads/screenshots/flat-surface-shader.png)
Flat Surface Shader
This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises...
![Screenshot of Animated Backgrounds website](https://toolkit.addy.codes/wp-content/uploads/screenshots/animated-backgrounds.png)
Animated Backgrounds
Are you tired of boring, static backgrounds on your website or presentation? Our animated backgrounds will bring your content to life and make it stand out...
![Screenshot of Ambient Canvas Backgrounds website](https://toolkit.addy.codes/wp-content/uploads/screenshots/ambient-canvas-backgrounds.png)
Ambient Canvas Backgrounds
Five ambient webpage backgrounds created using the HTML5 Canvas API and jwagner's Simplex Noise library.
![Screenshot of Animated Icons website](https://toolkit.addy.codes/wp-content/uploads/screenshots/animated-icons.png)
Animated Icons
1100+ Animated Icons for the modern web. High-quality animated icons to wow your users! Available to download for free without attribution. Adjust to your...
![Screenshot of Envato Elements website](https://toolkit.addy.codes/wp-content/uploads/screenshots/envato-elements.png)
Envato Elements
One subscription for access to 1,500,000+ assets. Unlimited downloads & future-proof licensing.
![Screenshot of CSS Keyframes Animation Generator website](https://toolkit.addy.codes/wp-content/uploads/screenshots/css-keyframes-animation-generator.png)
CSS Keyframes Animation Generator
Create CSS @keyframe animations with a visual timeline similar to video editors.
![Screenshot of Barba.js website](https://toolkit.addy.codes/wp-content/uploads/screenshots/barba-js.png)
Barba.js
Create badass, fluid and smooth transitions between your website’s pages.
![Screenshot of Animated GIF/WebP Maker website](https://toolkit.addy.codes/wp-content/uploads/screenshots/animated-gif-maker.png)
Animated GIF/WebP Maker
GIF maker allows you to instantly create your animated GIFs by combining separated image files as frames. Produced GIFs are of high quality and free of...
![Screenshot of Two.js website](https://toolkit.addy.codes/wp-content/uploads/screenshots/two-js-2.png)
Two.js
A two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and...
![Screenshot of Two.js website](https://toolkit.addy.codes/wp-content/uploads/screenshots/two-js.png)
Two.js
Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg,...
![Screenshot of p5.js website](https://toolkit.addy.codes/wp-content/uploads/screenshots/p5-js.png)
p5.js
p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and...
![Screenshot of Paper.js website](https://toolkit.addy.codes/wp-content/uploads/screenshots/paperjs.png)
Paper.js
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.
![Screenshot of Leon Sans website](https://toolkit.addy.codes/wp-content/uploads/screenshots/leon-sans.png)
Leon Sans
Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. It allows you to change font weight dynamically and to create custom...
![Screenshot of Vanta.js website](https://toolkit.addy.codes/wp-content/uploads/2021/08/www.vantajs.com__utm_sourcetoolkit.addy_.codes_.png)
Vanta.js
Animated website backgrounds in a few lines of code.
![Screenshot of Zdog website](https://toolkit.addy.codes/wp-content/uploads/screenshots/zdog.png)
Zdog
Javascript 3D library. Round, flat, designer-friendly pseudo-3D engine for HTML canvas & SVG.
![Screenshot of Haiku Animator website](https://toolkit.addy.codes/wp-content/uploads/screenshots/haiku-animator.png)
Haiku Animator
Create engaging animations for any app or website. Code export for React, Angular, Vue, Lottie (iOS & Android). Figma, Sketch, Ai Integration.
![Screenshot of Anime.js website](https://toolkit.addy.codes/wp-content/uploads/screenshots/anime-js.png)
Anime.js
Lightweight animation library for JavaScript.
![Screenshot of GreenSock Animation Platform website](https://toolkit.addy.codes/wp-content/uploads/2021/04/greensock.com__utm_sourcetoolkit.addy_.codes-2-e1618936571872.png)
GreenSock Animation Platform
Powerful and performant JavaScript animation library.
![Screenshot of PixelTrue Free Illustrations website](https://toolkit.addy.codes/wp-content/uploads/screenshots/pixeltrue-free-illustrations.png)
PixelTrue Free Illustrations
Free illustrations and animations. Free for personal and commercial use.
![Screenshot of Animista CSS Animations website](https://toolkit.addy.codes/wp-content/uploads/screenshots/animista-css-animations.png)
Animista CSS Animations
Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.
![Screenshot of RoughNotation website](https://toolkit.addy.codes/wp-content/uploads/screenshots/roughnotation.png)
RoughNotation
A small JavaScript library to create and animate annotations on a web page.
![Screenshot of Design Animation Handbook website](https://toolkit.addy.codes/wp-content/uploads/screenshots/design-animation-handbook.png)
Design Animation Handbook
A free ebook/audiobook. Learn how you can use animation to demonstrate abstract concepts, make products feel more life-like, and instill more emotion into...
![Screenshot of Josh W Comeau website](https://toolkit.addy.codes/wp-content/uploads/screenshots/josh-w-comeau.png)
Josh W Comeau
Development blog focusing on React, animation, CSS and JavaScript. Great learning resource with interactive articles.
![Screenshot of Cassie Evan’s Blog website](https://toolkit.addy.codes/wp-content/uploads/screenshots/cassie-evans-blog.png)
Cassie Evan’s Blog
Cassie Evan's blog is a goldmine of SVG animation inspiration and educational resources.
![Screenshot of CSS Gradient Animator website](https://toolkit.addy.codes/wp-content/uploads/screenshots/css-gradient-animator.png)
CSS Gradient Animator
Animate CSS gradients.
![Screenshot of Kapwing website](https://toolkit.addy.codes/wp-content/uploads/screenshots/kapwing.png)
Kapwing
Kapwing is a modern editor for images, GIFs, and videos.
![Screenshot of LottieFiles website](https://toolkit.addy.codes/wp-content/uploads/2020/11/lottie.jpg)
LottieFiles
Discover, test and share striking animations, designed for Lottie and Bodymovin
![Screenshot of Animate.css website](https://toolkit.addy.codes/wp-content/uploads/screenshots/animate-css.png)
Animate.css
Just-add-water CSS animations.
![Screenshot of Stylie website](https://toolkit.addy.codes/wp-content/uploads/screenshots/stylie.png)
Stylie
Stylie is a fun tool for easily creating complex web animations. Quickly design your animation graphically, grab the generated code and go!
![Screenshot of Framer website](https://toolkit.addy.codes/wp-content/uploads/screenshots/framer.png)
Framer
Create responsive layouts, design realistic prototypes, and bring everything closer to production—all in one place.
![Screenshot of SVG Artista website](https://toolkit.addy.codes/wp-content/uploads/screenshots/svg-artista.png)
SVG Artista
Little tool that helps you create SVG animations.
But wait, there's more! 🧰✨
Check out the sidebar menu (or tap the in the bottom right on mobiles) to search and browse by tag.