- 🚀 Zero JavaScript Required - Add animations directly in HTML
- 🎨 Professional Animations - Elegant, subtle, and smooth transitions
- 📱 Responsive by Default - Optimized for all screen sizes
- ⚡ Performance Focused - GPU-accelerated animations
- ♿ Accessibility First - Respects user preferences
- 🎯 Trigger Based - Scroll, hover, and click animations
- 🔄 Sequence Animations - Create complex animation chains
- 🛠️ Utility First - Composable animation classes
- 📦 Lightweight - Only 5KB gzipped
- 🌐 Browser Support - Works in all modern browsers
Add VelocityFX to your project using our CDN:
<!-- Add to your <head> -->
<link href="https://cdn.jsdelivr.net/npm/velocityfx@latest/dist/velocityfx.min.css" rel="stylesheet">
<!-- Add before </body> -->
<script src="https://cdn.jsdelivr.net/npm/velocityfx@latest/dist/velocityfx.min.js"></script>npm install velocityfxThen import in your project:
import 'velocityfx/dist/velocityfx.min.css';
import VelocityFX from 'velocityfx';
const vfx = new VelocityFX();Add animation classes directly to your HTML elements:
<!-- Entry Animations -->
<div class="anx-fade-in">Fades in on load</div>
<div class="anx-slide-up">Slides up on load</div>
<!-- Hover Animations -->
<button class="anx-hover-scale">Scales on hover</button>
<div class="anx-hover-lift">Lifts on hover</div>
<!-- Scroll Animations -->
<div data-anx-scroll class="anx-fade-up">
Animates when scrolled into view
</div>
<!-- Sequence Animations -->
<div anx-sequence anx-sequence-delay="200">
<div anx-animate="fade-up">First</div>
<div anx-animate="fade-up">Second</div>
<div anx-animate="fade-up">Third</div>
</div>Visit our documentation for detailed guides and examples:
VelocityFX supports all modern browsers:
- Chrome 60+
- Firefox 60+
- Safari 12+
- Edge 79+
- Opera 47+
VelocityFX is built with performance in mind:
- Uses GPU-accelerated properties (transform, opacity)
- Automatically disables animations on low-end devices
- Respects
prefers-reduced-motion - Optimized bundle size (5KB gzipped)
- No dependencies
We welcome contributions! Please see our Contributing Guide for details.
VelocityFX is MIT licensed.
Created and maintained by the VelocityFX team.