Anime

The Anime is a module that aims to integrate Anime.js library with Drupal. Provides JavaScript animation engine, Improve site interactivity with awesome animations.

Overview

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Features

• Staggering Follow through animations made easy.
  Anime's built-in staggering system makes complex follow through and overlapping animations simple. It can be used on both timings and properties.
• Layered CSS transforms One element is all you need.
  Animate multiple CSS transforms properties with different timings simultaneously on a single HTML element.
• Controls and callbacks Timing is everything.
  Play, pause, control, reverse and trigger events in sync using the complete built-in callbacks and controls functions.
• Animate anything HTML, JS, CSS, SVG.
  Anime.js works with anything web. CSS, SVG, DOM attributes and JavaScript Objects: animate everything with a single unified API.

Installation

Please view the project's README.md for detailed installation instruction.

Requirements

Download Anime.js Library Latest Version from Github.

Usage

Enable Anime module for code usage and add code to your module/theme Javascript file.

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Similar projects

• Scene
  is a JavaScript and CSS timeline-based animation library for creating animated websites.
• Vivus
  is a module that aims to integrate Vivus.js library with Drupal. Provides SVG animate, Improve site interactivity with awesome animations.
• Textimate ( Text + Animate )
  Provides text animation, enhancing site interactivity with awesome effects. Effortlessly transform static text into mesmerizing animations.
• Splitting.js
  Allows you to creates elements and adds CSS Variables for split words & characters! (lines, items, grids, images, more!) to unlock amazing possibilities for style and animating text, grids, and more!.

Supporting

Please let me know if a new feature is needed or is there any issue and feedback. You can announce it in the Anime Issues section.

Documentation

Check Anime.js documentation for more information.

Demo

See Anime.js examples to how it work.

Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users!