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.
<scriptsrc="https://cdn.jsdelivr.net/npm/animatry@latest/dist/umd/core.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/animatry@latest/dist/umd/metrics.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/animatry@latest/dist/umd/easing.min.js"></script><scriptsrc="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:
consttl=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';constletters=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