Copy. Paste. Ship.

Production-ready GSAP animations for React, Webflow, and vanilla HTML.
Stop rebuilding scroll effects, button hovers, and UI transitions from scratch.
View pricing
View pricing
Browse animations
Browse animations

Try for free

See what Annnimate feels like.
No signup required.

Circular Slider

Free

Draggable circular carousel with snap, autoplay, and arrow navigation

Try it live

How Annnimate works

Buttons, scroll effects, UI components, experimental, shaders, menus. 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.

Live

Tweak timing with data attributes. Edit the code directly. Or ask AI to adapt it for your project. Your choice.

data-anm-duration= "1.6"
data-anm-ease= "expo.out"
data-anm-stagger= "0.1"
Or ask AI to customize it for you

One click copies production-ready code. HTML, React, or Webflow. Paste into your project, customize with data attributes, deploy.

HTMLReactWebflow
<div
data-anm-marquee
data-anm-speed="1"
>
...
</div>
Annnimate
Platform
Support
JD
John Doe
Pro Plan

Multi-Level Drawer Menu

Multi-Level Drawer Menu

Multi-Level Drawer Menu

Dual Scramble

Dual Scramble

Dual Scramble

Fullscreen Slide Menu

Fullscreen Slide Menu

Fullscreen Slide Menu

Mesh Gradient

Mesh Gradient

Mesh Gradient

Image Dissolve Scroll

Image Dissolve Scroll

Image Dissolve Scroll

Character Appear

Character Appear

Character Appear

Multi Flip

Multi Flip

Multi Flip

Tooltip

Tooltip

Tooltip

Text Scramble

Text Scramble

Text Scramble

Hide Header

Hide Header

Hide Header

Circular Slider

Circular Slider

Circular Slider

Infinite Draggable Grid

Infinite Draggable Grid

Infinite Draggable Grid
Search...K

The Library

Every animation is tested, documented, and ready for production. Browse by category. Copy what you need.

Text Scramble

Text Scramble

text
Text Scramble

Mesh Gradient

Mesh Gradient

shader
Mesh Gradient

Mask Reveal

Mask Reveal

scroll
Mask Reveal
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Buttons
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Text
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Scroll
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Cursors
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Transitions
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Cards
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Shaders
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
Menus

Your Stack

One animation. Three formats. Pick what fits your stack.
HTML/CSS/JSReactWebflow
<div
data-anm-marquee
data-anm-speed="1"
data-anm-direction="left"
>
Your content here...
</div>

HTML/CSS/JS

Vanilla GSAP. Works anywhere.

React

useGSAP hooks. Next.js ready.

Webflow

JSON export. Paste into Designer.

AI Assistant

Describe what you want. Get working GSAP code in seconds.
How do I customize the @magnetic-button duration?

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:

html
<a
href="#"
class="magnetic_button_wrap"
data-anm-magnetic-button
data-anm-duration="1.2"
>
<span class="magnetic_button_text" data-anm-magnetic-text>Click Me</span>
</a>

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

Every animation includes tips, use cases, and troubleshooting. No guessing how things work.

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.

0255075
View Pricing
View Pricing

Stay ahead of the curve

Join 1000+ creators getting animation updates. Unsubscribe anytime.

Animations
Animations
Pricing
Pricing
Blog
Blog
Showcase
Showcase
Changelog
Changelog
Roadmap
Roadmap
Sign in
Sign in
XLinkedInInstagram

© 2026 Annnimate · Built by Good Fella

Privacy
Privacy
Terms
Terms
Cookies
Cookies
Refund
Refund
Home
Home
Animations46
Animations46
Pricing
Pricing
FAQ
FAQ
BlogNew
BlogNew
Just shipped:Multi-Level Drawer MenuSee all changes
Get Annnimate
Get Annnimate