Copy. Paste. Ship.
Stop rebuilding scroll effects, button hovers, and UI transitions from scratch.
Try for free
No signup required.
Circular Slider
FreeDraggable circular carousel with snap, autoplay, and arrow navigation
How Annnimate works
Buttons, scroll effects, UI components, experimental. Filter by category, search by name, sort by popularity. Find what you need in seconds.
Every animation runs in a live sandbox. Test on different screen sizes. See exactly how it behaves before you copy.
Tweak timing with data attributes. Edit the code directly. Or ask AI to adapt it for your project. Your choice.
One click copies production-ready code. HTML, React, or Webflow. Paste into your project, customize with data attributes, deploy.
Character Appear
Multi Flip
Tooltip
Text Scramble
Hide Header
Circular Slider
Infinite Draggable Grid
Animated Grid
Velocity Clip
Image Follow List
Infinite Parallax Slider
Hoverable List
The Library
Animated Grid
Hide Header
Hoverable List
Your Stack
HTML/CSS/JS
Vanilla GSAP. Works anywhere.
React
useGSAP hooks. Next.js ready.
Webflow
JSON export. Paste into Designer.
AI Assistant
To customize the duration of the @magnetic-button, use the data-anm-duration attribute on your button element. The value can range from 0.5 to 3 seconds.
Here's how you can set it:
This changes the animation duration to 1.2 seconds for a snappier effect. By default, it is set to 1.6 seconds.
For full documentation, visit: Magnetic Button Documentation
Documentation
Tips & Tricks
Performance optimization, mobile handling, and edge cases explained.
Use Cases
Real-world examples and recommended attribute combinations.
Troubleshooting
Common issues and solutions for each animation.
Variations
Pre-built variations to quickly test different styles.