Timeline Example - Animejs Typing CST Test
Loading…
Timeline Example — Animejs Code
Sequences multiple animations using a timeline.
# animejs/demo/timeline.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
</head>
<body>
<div id="box1" style="width:50px;height:50px;background:red;margin:10px;"></div>
<div id="box2" style="width:50px;height:50px;background:blue;margin:10px;"></div>
<script>
const tl = anime.timeline({ loop: true });
tl.add({ targets: '#box1', translateX: 250, duration: 1000 })
.add({ targets: '#box2', translateY: 200, duration: 1000 });
</script>
</body>
</html>Animejs Language Guide
Anime.js is a lightweight JavaScript animation library that enables developers to create smooth, complex, and performant animations on the web. It works with CSS properties, SVG, DOM attributes, and JavaScript objects.
Primary Use Cases
- ▸Animating CSS properties like opacity, transform, and color
- ▸SVG morphing and path animations
- ▸UI micro-interactions (buttons, menus, modals)
- ▸Data visualizations and chart animations
- ▸Sequenced animations via timelines
Notable Features
- ▸CSS, SVG, DOM, and JS object animation support
- ▸Powerful easing functions and custom easing
- ▸Timeline control for synchronized sequences
- ▸Animation looping and direction control
- ▸Callback events for animation lifecycle (begin, update, complete)
Origin & Creator
Anime.js was created by Julian Garnier in 2015 as a lightweight, versatile animation library for the web.
Industrial Note
Anime.js is widely used for interactive web applications, marketing pages, dashboards, data visualizations, micro-interactions, and SVG-based animations.