Post thumbnail: 20 Anime JS Examples

20 Anime JS Examples

Collection of anime.js (JavaScript animation library) code examples.

Related Articles

  1. Three.js Examples

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

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

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

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

back to top