TOP 31 Anime JS Examples

ANIME.JS GRID STAGGERING

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

STAGGERING ANIMATION WITH ANIME.JS

LAYERED ANIMATIONS WITH ANIME.JS

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

ADVANCED STAGGERING WITH ANIME.JS

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

SVG SPHERE ANIMATION WITH ANIME.JS

ANIME.JS V3 LOGO ANIMATION

EASINGS ANIMATIONS WITH ANIME.JS

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

STEPPER ITERATION WITH ANIME JS

BANKSY SHREDDER

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

LINE DRAWING

Line drawing with anime.js.

SVG MORPHING WITH ANIME.JS

Simple SVG morphing with anime.js.

ANIMATED HEXAGON CIRCLE LOGO

Logo animation using anime.js.

SVG ILLUSTRATION WITH ANIME.JS

Animated SVG illustration with anime.js.

PATH SLIDER

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.

MOBILE PLANET GALLERY

Mobile planet gallery with anime.js.

SNAKE HIGHLIGHT

Slithering highlight in login form with anime.js.

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.

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.

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.

SUBMIT BUTTON

Submit button with anime.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.

ANIMATION WITH ANIME.JS

Simple and clear animation for menu with anime.js.

PRELOADER WITH ANIME.JS

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

ANIME.JS FIREWORKS

COLOR CHANGING

Click anywhere.

FLOATTING DRAGGABLE MENU

Floatting Draggable Menu (Messenger like).

LOGO ANIMATION

Logo animation for anime-js.com.