Javascript animation library.
npm install animatrybash
npm install animatry
`
Or 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._
`html
`
Getting Started
`js
import { animatry } from 'animatry';
animatry.to('.box', {
x: 500,
rotate: 45,
scale: '+=0.5',
repeat: 5,
alternate: true,
});
`
Full Documentation
Visit the official website at animatry.com.
You will find examples, plugin usage, easings, and full API references.
Timeline Support
Chain multiple tweens with precise control:
`js
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,
});
`
view in docs
Keyframes
Animate through multiple states with a single tween:
`js
animatry.to('.box', {
duration: 2,
keyframes: {
x: [0, 200, 100, 300],
y: [0, 50, 0],
easeEach: 'powerInOut',
},
});
`
Or with percentage/object-based syntax:
`js
animatry.to('.box', {
duration: 2,
keyframes: {
'0%': { x: 0 },
'50%': { x: 200, ease: 'bounceOut' },
'100%': { x: 0 }
},
});
`
view in docs
Easing Options
`js
'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.
view in docs
Plugins
Animatry comes with built-in and optional plugins. Examples:
$3
You can split text into chars, words or lines.
`js
import { animatry, splitText } from 'animatry';
const letters = splitText('.headline', 'chars').chars;
animatry.from(letters, {
y: '100%',
opacity: 0,
stagger: { duration: 0.6 }
});
`
view in docs
$3
Morph between arbitrary SVG paths or shape elements like or .
`js
import { animatry, morphPath } from 'animatry';
animatry.use(morphPath);
animatry.to('.path1', {
morphPath: '.path2',
duration: 2,
repeat: -1,
alternate: true,
});
`
view in docs
$3
Pin, steer, and trigger animations on scroll.
`js
import { animatry, scrollObserver } from 'animatry';
scrollObserver({
animation: animatry.to('.box', { x: 300 }),
trigger: '.box',
start: 'top center',
end: 'bottom top',
steer: true,
});
``