Features
Built-in Animations
Fade:
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
Smooth opacity transitions with optional directional movement
Slide:
slideFromLeft
slideFromRight
slideFromTop
slideFromBottom
Slide elements in from any direction with fade effect
Flip:
flipFromLeft
flipFromRight
flipFromTop
flipFromBottom
3D flip animations with perspective and fade
Special:
zoomIn
zoomInRotate
bounceIn
rotateIn
Complex animations combining scale, rotation, and bounce effects
Advanced Features
Random:
--rizzm-keyframe: random
Randomly selects from available animations
Iterations:
--rizzm-iteration: 2
Shows the animation 2 times
Observer Options:
rootMargin: "50px"
threshold: 0.2
Fine-tune when animations trigger
Easing:
--rizzm-easing: cubic-bezier(0.25, 0.1, 0.25, 1)
Customize animation timing function
Control:
rizzm.refresh()
rizzm.disconnect()
Programmatically control animations
Get Started
1
Install Rizzm
npm install rizzm
2
Initialize Rizzm
import Rizzm from 'rizzm';
const rizzm = new Rizzm({
selector: ".js-rizzm",
options: {
rootMargin: "50px",
threshold: 0.2,
stagger: 150
}
});
3
Add to Your HTML
<div class="js-rizzm"
style="--rizzm-keyframe: fadeInUp;
--rizzm-duration: 800;">
Your content here
</div>Best Practices
Stagger vs Delay
❌ Using Individual Delays
<div>
<div class="js-rizzm"
style="--rizzm-keyframe: fadeInUp;
--rizzm-duration: 600;
--rizzm-delay: 0;">First</div>
<div class="js-rizzm"
style="--rizzm-keyframe: fadeInUp;
--rizzm-duration: 600;
--rizzm-delay: 200;">Second</div>
<div class="js-rizzm"
style="--rizzm-keyframe: fadeInUp;
--rizzm-duration: 600;
--rizzm-delay: 400;">Third</div>
</div>Harder to maintain and requires manual calculation of delays.
✅ Using Stagger
<div class="js-rizzm" style="--rizzm-keyframe: fadeInUp; --rizzm-duration: 600; --rizzm-stagger: 200">
<div class="js-rizzm">First</div>
<div class="js-rizzm">Second</div>
<div class="js-rizzm">Third</div>
</div>✓ Cleaner code - no manual delay calculations
✓ Automatically handles timing between elements
✓ Easier to add or remove items without updating delays
First
Second
Third
Performance Tips
✓
Use transform and opacity
These properties are GPU-accelerated and provide smooth animations.
✓
Avoid animating layout properties
Properties like width, height, padding cause layout recalculation.
✓
Respect user preferences
Use prefers-reduced-motion media query to disable animations when requested.
@media not (prefers-reduced-motion: reduce) {
:root {
--rizzm-keyframe: bounceIn;
--rizzm-duration: 500;
--rizzm-stagger: 250;
--rizzm-element-initial-opacity: 0.0001;
}
.js-rizzm-init-failed {
--rizzm-element-initial-opacity: 1;
}
.js-rizzm {
opacity: var(--rizzm-element-initial-opacity, 1);
}
}This ensures animations only run when users haven't requested reduced motion in their system settings.