Animatry is a modern JavaScript animation library built for performance, flexibility, and a clean API.
It supports declarative and imperative workflows, handles complex animation timing, and is extensible through powerful plugins.
Install via npm:
npm install animatryOr use the CDN:
To keep the bundle size low, you need to import these 4 packages. This makes it possible to use plugins standalone without importing the entire base library.
<script src="https://cdn.jsdelivr.net/npm/animatry@latest/dist/umd/core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animatry@latest/dist/umd/metrics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animatry@latest/dist/umd/easing.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/animatry@latest/dist/umd/animatry.min.js"></script>import { animatry } from 'animatry';
animatry.to('.box', {
x: 500,
rotate: 45,
scale: '+=0.5',
repeat: 5,
alternate: true,
});Visit the official website at animatry.com.
You will find examples, plugin usage, easings, and full API references.
Chain multiple tweens with precise control:
const tl = animatry.timeline({ ease: 'powerInOut' });
tl.to('.box1', {
x: 300,
duration: 1.5,
onComplete: () => console.log('First step complete'),
});
tl.to('.box2', {
y: 100,
opacity: 0,
});Animate through multiple states with a single tween:
animatry.to('.box', {
duration: 2,
keyframes: {
x: [0, 200, 100, 300],
y: [0, 50, 0],
easeEach: 'powerInOut',
},
});Or with percentage/object-based syntax:
animatry.to('.box', {
duration: 2,
keyframes: {
'0%': { x: 0 },
'50%': { x: 200, ease: 'bounceOut' },
'100%': { x: 0 }
},
});'none' / 'linear'
'powerIn' / 'powerOut' / 'powerInOut(2)'
'steps(5)'
'bounceInOut'
'elasticOut(3)'
'backIn(1.5)'
'cubic-bezier(0.25, 0.1, 0.25, 1.0)'You can also define custom easing functions that transform a 0–1 progress value.
Animatry comes with built-in and optional plugins. Examples:
You can split text into chars, words or lines.
import { animatry, splitText } from 'animatry';
const letters = splitText('.headline', 'chars').chars;
animatry.from(letters, {
y: '100%',
opacity: 0,
stagger: { duration: 0.6 }
});Morph between arbitrary SVG paths or shape elements like <circle> or <rect>.
import { animatry, morphPath } from 'animatry';
animatry.use(morphPath);
animatry.to('.path1', {
morphPath: '.path2',
duration: 2,
repeat: -1,
alternate: true,
});Pin, steer, and trigger animations on scroll.
import { animatry, scrollObserver } from 'animatry';
scrollObserver({
animation: animatry.to('.box', { x: 300 }),
trigger: '.box',
start: 'top center',
end: 'bottom top',
steer: true,
});- scrollSmooth
- magnetic
- scaleText
- scrollTo
- matchMedia
- React integration: useAnimatry / <Animatry>
This is an actively developed project. Contributions, feedback, and feature requests are welcome.
Website: animatry.com
Docs: animatry.com/docs
Issues: GitHub Issues