TOP 31 Anime JS Examples

ANIME.JS GRID STAGGERING

An animation that demonstrate the new anime.js grid staggering feature.

See the Pen anime.js grid staggering demo by Julian Garnier (@juliangarnier) on CodePen.

STAGGERING ANIMATION WITH ANIME.JS

See the Pen staggering animation with anime.js — week 18/52 by Mert Cukuren (@knyttneve) on CodePen.

LAYERED ANIMATIONS WITH ANIME.JS

An animation that demonstrate how to make layered animations with anime.js.

See the Pen Layered animations with anime.js by Julian Garnier (@juliangarnier) on CodePen.

ADVANCED STAGGERING WITH ANIME.JS

An animation that demonstrate the new anime.js grid staggering feature.

See the Pen Advanced staggering with anime.js by Julian Garnier (@juliangarnier) on CodePen.

SVG SPHERE ANIMATION WITH ANIME.JS

See the Pen SVG sphere animation with anime.js by Julian Garnier (@juliangarnier) on CodePen.

ANIME.JS V3 LOGO ANIMATION

See the Pen anime.js V3 logo animation by Julian Garnier (@juliangarnier) on CodePen.

EASINGS ANIMATIONS WITH ANIME.JS

An easing visualisation animation using the new staggering system in anime.js.

See the Pen Easings animations with anime.js by Julian Garnier (@juliangarnier) on CodePen.

STEPPER ITERATION WITH ANIME JS

See the Pen Stepper Iteration with Anime JS by Valery Alikin (@AlikinVV) on CodePen.

BANKSY SHREDDER

A simple art shredder made famous by Banksy using CSS Grid and Anime JS.

See the Pen Banksy Shredder by Lee Martin (@leemartin) on CodePen.

LINE DRAWING

Line drawing with anime.js.

See the Pen Getting Familiar with Anime.js [Line Drawing] by Dusko Stamenic (@DuskoStamenic) on CodePen.

SVG MORPHING WITH ANIME.JS

Simple SVG morphing with anime.js.

See the Pen SVG Morphing with Anime.js by Paolo Duzioni (@Paolo-Duzioni) on CodePen.

ANIMATED HEXAGON CIRCLE LOGO

Logo animation using anime.js.

See the Pen Animated Hexagon Circle Logo by Ryan Mulligan (@hexagoncircle) on CodePen.

SVG ILLUSTRATION WITH ANIME.JS

Animated SVG illustration with anime.js.

See the Pen Animated Svg illustration with Anime.js by Artem (@fitzsyke) on CodePen.

PATH SLIDER

See the Pen Path Slider Basic Demo by lmgonzalves (@lmgonzalves) on CodePen.

HAND WRITTEN SVG TEXT ANIMATION

A little hand written text animation made with anime.js. The masking is a little rough but you get the idea.

See the Pen Hand written SVG text animation by Matthew Ellis (@mellis84) on CodePen.

MOBILE PLANET GALLERY

Mobile planet gallery with anime.js.

See the Pen Mobile Planet gallery by Simone Bernabè (@simoberny) on CodePen.

SNAKE HIGHLIGHT

Slithering highlight in login form with anime.js.

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

DOWNLOAD BUTTON

Used CSS transitions and animations, along with the lightweight animation library anime.js, and segment.js for SVG animations.

CARD FLIP

A simple card flip effect using anime.js.

See the Pen Card Flip by Marcos Paulo (@hellomp) on CodePen.

ANIMATED SVG FRAME SLIDESHOW

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles. Used anime.js for the animations.

EXPANDING GRID ITEM ANIMATION

A grid item animation where the thumbnail scales up when the details view is opened. Used anime.js.

BIKE TO SCHOOL

An experiment with bodymovin.js and anime.js.

See the Pen Bike to School by Mariusz Dabrowski (@MarioD) on CodePen.

MODERN RETRO – IBM THINK

IBM invites you to think. A modern retro poster for the IBM think campaign. Combines SVG dash technique with animations with anime.js to animate circles to the logo. Uses SVG blend modes to recreate the blending of colors in the logo.

See the Pen Modern retro – IBM THINK by Mikael Ainalem (@ainalem) on CodePen.

SUBMIT BUTTON

Submit button with anime.js.

See the Pen Submit Button (Anime.js) by Andrew Millen (@andrewmillen) on CodePen.

GRID LOADING ANIMATIONS

A set of grid loading animations for your inspiration. The idea is to show grid items with an interesting effect once they are loaded. Used anime.js.

ANIMATION WITH ANIME.JS

Simple and clear animation for menu with anime.js.

See the Pen Personal Website – Anime.js by Sasha (@sashatran) on CodePen.

PRELOADER WITH ANIME.JS

Decided to give animate.js a go and had a lot of fun with it.

See the Pen Preloader with Anime.js by Kevin Konrad Henriquez (@kkhenriquez) on CodePen.

ANIME.JS FIREWORKS

See the Pen Anime.js Fireworks canvas demo by Julian Garnier (@juliangarnier) on CodePen.

COLOR CHANGING

Click anywhere.

See the Pen Color Changin' by Alex Zaworski (@alexzaworski) on CodePen.

FLOATTING DRAGGABLE MENU

Floatting Draggable Menu (Messenger like).

See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.

LOGO ANIMATION

Logo animation for anime-js.com.

See the Pen anime.js logo animation by Julian Garnier (@juliangarnier) on CodePen.