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.light

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

STAGGERING ANIMATION WITH ANIME.JS

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

Author

  • Mert Cukuren

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

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.light

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

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.light

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

SVG SPHERE ANIMATION WITH ANIME.JS

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

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

ANIME.JS V3 LOGO ANIMATION

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

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

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.light

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

STEPPER ITERATION WITH ANIME JS

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

Author

  • Valery Alikin

Made with

  • HTML / CSS (SCSS) / JS

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.light

Author

  • Lee Martin

Made with

  • HTML / CSS / JS

LINE DRAWING

Line drawing with anime.js.

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

Author

  • Dusko Stamenic

Made with

  • HTML / CSS / JavaScript

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.light

Author

  • Paolo Duzioni

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript (Babel)

ANIMATED HEXAGON CIRCLE LOGO

Logo animation using anime.js.

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

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS) / JavaScript

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.light

Author

  • Artem

Made with

  • HTML / CSS (Sass) / JavaScript

PATH SLIDER

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

Author

  • lmgonzalves

Made with

  • HTML / CSS (SCSS) / JS

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.light

Author

  • Matthew Ellis

Made with

  • HTML / CSS (SCSS) / JavaScript (Babel)

MOBILE PLANET GALLERY

Mobile planet gallery with anime.js.

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

Author

  • Simone Bernabè

Made with

  • HTML / CSS (SCSS) / JavaScript

SNAKE HIGHLIGHT

Slithering highlight in login form with anime.js.

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

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JavaScript

DOWNLOAD BUTTON

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

Download Button - GIF Demo

Author

  • Luis Manuel

Made with

  • HTML / CSS (SCSS) / JavaScript

CARD FLIP

A simple card flip effect using anime.js.

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

Author

  • Marcos Paulo

Made with

  • HTML / CSS / JavaScript

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.

Demo image: Animated SVG Frame Slideshow

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

EXPANDING GRID ITEM ANIMATION

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

Expanding Grid Item Animation - GIF Demo

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

BIKE TO SCHOOL

An experiment with bodymovin.js and anime.js.

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

Author

  • Mariusz Dabrowski

Made with

  • HTML / CSS / JavaScript (Babel)

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.light

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JavaScript

SUBMIT BUTTON

Submit button with anime.js.

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

Author

  • Andrew Millen

Made with

  • HTML / CSS (SCSS) / JS

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.

Demo image: Grid Loading Animations

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

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.light

Author

  • Sasha

Made with

  • HTML / CSS (SCSS) / JavaScript

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.light

Author

  • Kevin Konrad Henriquez

Made with

  • HTML (Haml) / CSS (SCSS) / JavaScript

ANIME.JS FIREWORKS

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

Author

  • Julian Garnier

Made with

  • HTML / JS

COLOR CHANGING

Click anywhere.

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

Author

  • Alex Zaworski

Made with

  • HTML / CSS (SCSS) / JavaScript

FLOATTING DRAGGABLE MENU

Floatting Draggable Menu (Messenger like).

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

Author

  • Andy Pagès

Made with

  • HTML / CSS (SCSS) / JavaScript

LOGO ANIMATION

Logo animation for anime-js.com.

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

Author

  • Julian Garnier

Made with

  • HTML / CSS / JavaScript

Post navigation