Security News
Dutch National Police Disrupt Redline and Meta Malware Operations
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
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.
Basic Animation
This feature allows you to animate basic properties like translation, rotation, and background color of a DOM element.
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
Timeline Control
Timelines allow you to create complex animation sequences with precise control over the timing of each animation.
var tl = anime.timeline({
easing: 'easeOutExpo',
duration: 750
});
tl.add({
targets: '.box',
translateX: 250
}).add({
targets: '.box',
translateY: 250,
offset: '-=500' // Starts 500ms before the previous animation ends
});
SVG Animations
Anime.js can animate SVG properties, allowing for intricate and visually appealing vector animations.
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: true
});
Keyframes
Keyframes allow you to define multiple stages of an animation, giving you more control over the animation sequence.
anime({
targets: '.box',
keyframes: [
{translateX: 250},
{translateY: 250},
{translateX: 0},
{translateY: 0}
],
duration: 4000,
easing: 'easeOutElastic(1, .8)',
loop: true
});
GSAP (GreenSock Animation Platform) is a powerful JavaScript library for creating high-performance animations. It offers more features and plugins compared to Anime.js, making it suitable for more complex animations.
Velocity is an animation engine with the same API as jQuery's $.animate(). It is designed for fast performance and is a good alternative for those who are familiar with jQuery animations.
Popmotion is a functional, flexible JavaScript animation library. It provides a more functional approach to animations compared to Anime.js, making it a good choice for developers who prefer functional programming paradigms.
[!IMPORTANT]
🎉 Anime.js V4 is now available in early access 🎉
After years in the making, Anime.js V4 is finally available in early access for my GitHub Sponsors!
Anime.js (/ˈæn.ə.meɪ/
) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
Getting started | Documentation | Demos and examples | Browser support
Via npm
$ npm install animejs --save
or manual download.
import anime from 'animejs/lib/anime.es.js';
const anime = require('animejs');
Link anime.min.js
in your HTML :
<script src="anime.min.js"></script>
anime({
targets: 'div',
translateX: 250,
rotate: '1turn',
backgroundColor: '#FFF',
duration: 800
});
Chrome | Safari | IE / Edge | Firefox | Opera |
---|---|---|---|---|
24+ | 8+ | 11+ | 32+ | 15+ |
Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.
FAQs
JavaScript animation engine
The npm package animejs receives a total of 161,623 weekly downloads. As such, animejs popularity was classified as popular.
We found that animejs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Dutch National Police and FBI dismantle Redline and Meta infostealer malware-as-a-service operations in Operation Magnus, seizing servers and source code.
Research
Security News
Socket is tracking a new trend where malicious actors are now exploiting the popularity of LLM research to spread malware through seemingly useful open source packages.
Security News
Research
Noxia, a new dark web bulletproof host, offers dirt cheap servers for Python, Node.js, Go, and Rust, enabling cybercriminals to distribute malware and execute supply chain attacks.