Collection of anime.js (JavaScript animation library) code examples. Update of September 2018 collection. 12 new items.

Author

  • Julian Garnier

Made with

  • HTML / CSS / 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

Author

  • Mert Cukuren

Made with

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

About a code

Staggering Animation With Anime.js

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

Responsive: yes

Dependencies: anime.js

Author

  • Julian Garnier

Made with

  • HTML / CSS / 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

Author

  • Julian Garnier

Made with

  • HTML / CSS / 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

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

About a code

SVG Sphere Animation With Anime.js

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

Responsive: yes

Dependencies: anime.js

Author

  • Julian Garnier

Made with

  • HTML / CSS / JS

About a code

Anime.js V3 Logo Animation

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

Responsive: yes

Dependencies: anime.js

Author

  • Julian Garnier

Made with

  • HTML / CSS / 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

Author

  • Valery Alikin

Made with

  • HTML / CSS (SCSS) / JS

About a code

Stepper Iteration With Anime JS

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

Responsive: no

Dependencies: jquery.js, anime.js

Author

  • Lee Martin

Made with

  • HTML / CSS / 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

Demo image: Line Drawing Line Drawing - GIF Demo

Author

  • Dusko Stamenic

Made with

  • HTML / CSS / JavaScript

About the code

Line Drawing

Line drawing with anime.js.

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

Dependencies: -

Demo image: SVG Morphing with Anime.js SVG Morphing with Anime.js - GIF Demo

Author

  • Paolo Duzioni

Made with

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

About the code

SVG Morphing with Anime.js

Simple SVG morphing with anime.js.

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

Dependencies: -

Demo image: Animated Hexagon Circle Logo Animated Hexagon Circle Logo - GIF Demo

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Animated Hexagon Circle Logo

Logo animation using anime.js.

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

Dependencies: -

Demo image: Svg illustration with Anime.js Svg illustration with Anime.js - GIF Demo

Author

  • Artem

Made with

  • HTML / CSS (Sass) / JavaScript

About the code

SVG Illustration with Anime.js

Animated SVG illustration with anime.js.

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

Dependencies: -

Author

  • lmgonzalves

Made with

  • HTML / CSS (SCSS) / JS

About a code

Path Slider

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

Responsive: yes

Dependencies: anime.js, path-slider.js

Demo image: Hand Written SVG Text Animation Hand Written SVG Text Animation - GIF Demo

Author

  • Matthew Ellis

Made with

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

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: -

Demo image: Range Input with Anime.js Range Input with Anime.js - GIF Demo

Author

  • Rina Sorovaiski

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Range Input with Anime.js

Elastic range input with SVG and anime.js.

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

Dependencies: -

Demo image: Mobile Planet Gallery Mobile Planet Gallery - GIF Demo

Author

  • Simone Bernabè

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Mobile Planet Gallery

Mobile planet gallery with anime.js.

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

Dependencies: jquery.js, hammer.js

Demo image: Snake Highlight Snake Highlight - GIF Demo

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JavaScript

About the code

Snake Highlight

Slithering highlight in login form with anime.js.

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

Dependencies: -

Demo image: Download Button Download Button - GIF Demo

Author

  • Luis Manuel

Made with

  • HTML / CSS (SCSS) / JavaScript

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

Demo image: Card Flip Card Flip - GIF Demo

Author

  • Marcos Paulo

Made with

  • HTML / CSS / JavaScript

About the code

Card Flip

A simple card flip effect using anime.js.

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

Dependencies: -

Demo image: Animated SVG Frame Slideshow

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

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

Demo image: Expanding Grid Item Animation Expanding Grid Item Animation - GIF Demo

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

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

Demo image: Bike to School Bike to School - GIF Demo

Author

  • Mariusz Dabrowski

Made with

  • HTML / CSS / JavaScript (Babel)

About the code

Bike to School

An experiment with bodymovin.js and anime.js.

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

Dependencies: bodymovin.js

Demo image: Modern Retro - IBM THINK Modern Retro - IBM THINK - GIF Demo

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JavaScript

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: -

Author

  • Andrew Millen

Made with

  • HTML / CSS (SCSS) / JS

About a code

Submit Button

Submit button with anime.js.

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

Responsive: no

Dependencies: jquery.js, anime.js

Demo image: Grid Loading Animations

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

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

Demo image: Animation with Anime.js Animation with Anime.js - GIF Demo

Author

  • Sasha

Made with

  • HTML / CSS (SCSS) / JavaScript

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

Demo image: Preloader with Anime.js Preloader with Anime.js - GIF Demo

Author

  • Kevin Konrad Henriquez

Made with

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

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: -

Author

  • Julian Garnier

Made with

  • HTML / JS

About a code

Anime.js Fireworks

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

Responsive: yes

Dependencies: anime.js

Demo image: Color Changing Color Changing - GIF Demo

Author

  • Alex Zaworski

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Color Changing

Click anywhere.

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

Dependencies: -

Demo image: Floatting Draggable Menu Floatting Draggable Menu - GIF Demo

Author

  • Andy Pagès

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Floatting Draggable Menu

Floatting Draggable Menu (Messenger like).

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

Dependencies: foundation-icons.css

Demo image: Logo Animation Logo Animation - GIF Demo

Author

  • Julian Garnier

Made with

  • HTML / CSS / JavaScript

About the code

Logo Animation

Logo animation for anime-js.com.

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

Dependencies: -