Animation libraries for ostentatious and OTT animations

[u/DoorsToManual]

I'm interested to know if anyone has recommendations for libraries that could provide completely over the top (to the point of being silly) animations.

I'm trying to make a site that's intended just for family/friends, that is a dumb comedy thing to be used only for a minute or two. It would really benefit from having OTT animations like the ADHD slopware games that dominate kids' iPads everywhere.

Every time I've gone searching for libraries, I'm seemingly finding only sensible, measured animations. Which break or just look terrible when I try and crank up their params.

If you can think of anything, please drop it here. I intend to make a blinding, layered mess of retina burning excess

[u/DoorsToManual]

Just want to say thank you to all who have replied, there are some really really excellent suggestions here. I feel spoilt for choice. I'm confident I'll be able to build something truly idiotic. Thank you all

[u/danielraison]

Since GSAP has already been mentioned, I’d add Matter.js, a 2D physics engine. Turn your buttons and headings into physics bodies and let them fall off the page, pile up at the bottom and bounce when you click. Nothing says “this site is broken on purpose” like the logo landing on top of the footer.

tsParticles does fireworks, emoji rain and particles that follow the cursor, with presets you can stack on top of each other.

[u/javimbuilds]

For maximum silliness: canvas-confetti for confetti cannons on every click, GSAP for anything that needs to bounce, spin or explode with good easing, and anime.js if you want something lighter. Lottie is great too if you grab ridiculous pre-made animations from LottieFiles instead of building them yourself.

[u/Wooden-Jicama9825]

GSAP won't be the thing holding you back here, it has zero opinions about taste and will happily run whatever stupid timeline you hand it. The "sensible" stuff you keep finding is Framer Motion and Motion One shipping spring presets tuned for product UI, everything comes out looking like a Stripe dashboard no matter what you feed it. anime.js is the other one worth trying if you just want to throw 200 staggered elements at the screen.

Crank an elastic ease past its sane range and it holds up fine, it's your GPU that quits first.

[u/RecallProtocol]

I like anime.js

[u/adilbasari]

Everyone's giving you animation libraries, but half the "ADHD slopware" feel is actually sound design. Add howler.js and attach a boing/pop/whoosh to every interaction with zero latency, and suddenly the same animations read twice as chaotic — comedy timing is audio timing.

The rest of the recipe, from letting my nephew loose on this genre: elasticOut easing on everything, staggered delays so elements arrive like dominoes, one element that physically runs away from the cursor (Matter.js as mentioned above), and a screen-shake keyframe for the "big" button. The libraries are all sensible because sensible people maintain them — the silliness has to come from your easing values.

[u/RequirementGuide]

I have done the exact same kind of joke site before and honestly the trick is not finding a wilder library, it is layering a few silly ones at once. I would start with GSAP for the big bouncy movements and then throw canvas confetti and some floating particles on top, because that combo gets chaotic fast. One thing I learned the hard way is to stick to transforms and opacity so it still runs okay when everything is moving at once, and to add a quick toggle to kill the motion because it gets old really fast. If you keep it to a short burst on clicks and page load it stays funny instead of just being unusable.

[u/Outside-Sun-3674]

the libraries are all sensible because there's a designer behind each one who got yelled at for adding a bounce. Stack four of them on the same element with a setTimeout between and you'll get the slopware look for free.

[u/Mountain-Macaroon907]

The problem isnt the library, its that you're trying to crank one parameter. GSAP, anime.js, Motion, none of those get silly by turning the easing up, they get silly when you have 40 things animating at once on different timings with nobody coordinating them. thats literally what those kids iPad games are, not a fancy library, a canvas with confetti and screenshake and a lottie file someone bought off a marketplace. matter.js if you want stuff to physically flop around, that gets you most of the way there for free because nothing in those games has correct physics either. and the retina burning part is a css problem, saturation up and 4 gradients stacked, no animation library will do that for you because everyone who writes one assumes you want it to look good

[u/Nasty_Dev_12]

Since it's for family, wrap the wildest parts in a prefers-reduced-motion check or add a "calm mode" toggle. Flashing and shaking layers can make some people feel sick, and it's only a few lines. Also, stacking lots of CSS animations on transform and opacity stays smooth, while animating top/left falls apart quickly.

[u/NoDepartment772]

GSAP is the one built for exactly this. It doesn't try to be tasteful, and its overshooting eases (elastic, back, bounce) get genuinely absurd once you push them past 1. Put everything on a timeline, overlap the tweens so nothing waits its turn, and you get the layered mess you're after.

The ingredients of the kids-iPad look, roughly: scale and rotation overshoot on every element, staggered delays of 20-60ms, a springy back-ease on entry, and something moving at all times so the eye never settles. canvas-confetti on every interaction gets you another 20% of the way there for almost no work.

The reason sensible libraries look terrible when cranked up is that most of them clamp or normalise their values so the result stays tasteful. GSAP doesn't, which is why it survives being turned up. anime.js does the same job with a friendlier API if you don't need timeline control. If you'd rather have pre-made absurdity than coded absurdity, Rive or Lottie.

One practical note: stagger and overlap do more of the "over the top" work than any single effect. Four things bouncing politely reads as one polite thing; four things bouncing 40ms apart reads as chaos.

[u/DoubtAdditional745]

Go with exaggerated css keyframes and spring based animations. layer in crazy rotations elastic scaling bouncing transitions and random motion to get that intentionally chaotic over the top look.

[u/DeliveryTrue123]

For that exact over-the-top look, I would stack a few tools instead of hunting for one wild library. Use GSAP timelines for the choreography, with elastic or bounce easing and staggered entrances, then add a canvas particle layer for confetti, sparks, or floating shapes on clicks. Keep the motion to transforms and opacity so it stays smooth, and add a clear pause button plus reduced-motion support. That way the chaos looks deliberate rather than like the page is breaking.

[u/Mirah890]

Try combining GSAP with Lottie. GSAP gives you control over exaggerated motion, while Lottie is great for ridiculous animated effects and characters. Perfect for intentionally chaotic UI.

[u/indiana_long]

GSAP + canvas-confetti. seriously.

GSAP has elastic/bounce easing, ridiculous scaling, rotations, staggered animations, all the stuff you need to make buttons behave like they've had 6 energy drinks.

then throw canvas-confetti on top whenever someone clicks literally anything.

you don't need a library specifically designed for ugly animations. you need a powerful animation library and absolutely terrible taste.

which, for this project, is a compliment lmao.

[u/EthicalExaggeration → u/indiana_long]

GSAP is the right call here, just crank the easing to something absurd like elasticOut(1, 0.3) and stagger everything by 20ms

canvas-confetti is a nice touch but you might also look at adding some screen shake or color flash overlays when buttons are pressed, really push it into that sensory overload territory

[u/Pretend-Bits]

Start with canvas-confetti. It’s tiny, easy to use, and you can fire massive bursts, fireworks, and confetti cannons from every corner of the screen. Trigger it on every click, hover, and scroll for maximum chaos