43 Anime JS Examples

About a code

SVG Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

od

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Diagonal Thumbnail Slideshow Animation

Anime.js implementation of the diagonal thumbnail slideshow animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Animated Cycle Anime.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, anime.js

About a code

Animated Folder Micro-Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Turning One Into Nine Anime.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: anime.js

About a code

Submit Button

An uncommon take on a submit button with a progress meter.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Animated Easter SVG Icons

Animated easter svg icons with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: anime.js

About a code

Morph Clock

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Letterize.js + Anime.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

404 Error Page

404 error SVG animation page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css, anime.js

About a code

SVG Icon Animations with Anime.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: anime.js

About a code

Navigation & Sub-Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Anime.js Grid Staggering

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: anime.js

About a code

Staggering Animation With Anime.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Layered Animations With Anime.js

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Advanced Staggering With Anime.js

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

SVG Sphere Animation With Anime.js

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Anime.js V3 Logo Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Easings Animations With Anime.js

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About a code

Stepper Iteration With Anime JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, anime.js

About a code

Banksy Shredder

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: vue.js, anime.js, load-image.js

About the code

Line Drawing

Line drawing with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

SVG Morphing with Anime.js

Simple SVG morphing with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Hexagon Circle Logo

Logo animation using anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

SVG Illustration with Anime.js

Animated SVG illustration with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About a code

Path Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js, path-slider.js

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Mobile Planet Gallery

Mobile planet gallery with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js, hammer.js

About the code

Snake Highlight

Slithering highlight in login form with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Download Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: segment.js

About the code

Card Flip

A simple card flip effect using anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: imagesloaded.js

About the code

Expanding Grid Item Animation

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: imagesloaded.js

About the code

Bike to School

An experiment with bodymovin.js and anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bodymovin.js

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About a code

Submit Button

Submit button with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: jquery.js, anime.js

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: masonry.js

About the code

Animation with Anime.js

Simple and clear animation for menu with anime.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css, jquery.js

About the code

Preloader with Anime.js

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About a code

Anime.js Fireworks

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: anime.js

About the code

Color Changing

Click anywhere.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Floatting Draggable Menu

Floatting Draggable Menu (Messenger like).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: foundation-icons.css

About the code

Logo Animation

Logo animation for anime-js.com.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -