Framer Motion Animations
https://github.com/thedotmack/framer-motion-animations- Category
- Developer Tools
- Rank
- No. 1851Tools index
Previous survey · No. 1859 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- thedotmack
- GitHub
- 2 stars
- Date
About
Animate.css-style preset animations ported to Framer Motion — drop-in keyframes for React UI.
What it does
A React component library that wraps children in named motion effects. Developers choose an entrance, exit, or attention effect, then adjust timing, repetition, styling, and completion behavior through component properties.
Why it's ranked here
The broad effect catalog and simple wrapper model make common interface motion quick to add. Direct variant access also permits deeper control. However, timing and reduced-motion behavior conflict with the documented promises for presets that define their own duration.
What's good
The library covers attention effects, entrances, exits, flips, rotations, zooms, and slides. Components forward references, accept motion-compatible element properties, expose completion callbacks, and support direct variant access. CommonJS, ES modules, and TypeScript declarations are configured.
Tradeoffs
Preset durations take precedence over the calculated duration, so speed modifiers and reduced-motion shortening do not affect animations that specify timing internally. The source-copy variant file contains only three effects plus a placeholder, despite installation instructions presenting it as copy-ready.
How to use it well
It suits React teams that already use Framer Motion and want recognizable effects without hand-authoring keyframes. Start with named wrappers, then use exported variants when transition control matters. It does not replace presence management for removal animations, and the supplied source-copy route needs completion before broad use.
Technical notes+
src/index.ts exports the component set, BaseAnimationProps, animationVariants, BaseAnimation, and createAnimationComponent. src/components/index.ts creates the named wrappers from variant keys, while src/lib/variants.ts stores their initial and animated states. In src/components/BaseAnimation.tsx, the transition duration uses animation.animate.transition?.duration before adjustedDuration; consequently, embedded preset timing overrides duration modifiers and the 0.001-second reduced-motion value. The same file reads matchMedia during render and forces transform, opacity, backface, and will-change styles. src/shadcn/animation-variants.ts includes only bounce, flash, and pulse before a placeholder comment, while src/shadcn/framer-animations.tsx exports wrappers for the wider catalog. package.json declares React, React DOM, and Framer Motion as peers, and tsup.config.ts configures minified CommonJS and ESM builds with declarations, source maps, tree shaking, and those peers externalized.
Observed
- License
- MIT
- Primary language
- TypeScript and TSX
- Interface
- React component library with exported animation variants and base utilities
- Installation
- Published package installation through npm, Yarn, or pnpm; source-copy instructions are also documented
- Peer requirements
- React 16.8 or newer, React DOM 16.8 or newer, and Framer Motion 10 or newer
- Packaging
- CommonJS and ES module outputs with TypeScript declarations; React, React DOM, and Framer Motion remain external peers
- Platform
- Modern React applications, including a client-marked source-copy component for shadcn/ui-style projects
Read from README.md, package.json, src/index.ts, src/types/index.ts, src/lib/variants.ts, src/components/index.ts, src/components/BaseAnimation.tsx, src/shadcn/animation-variants.ts, src/shadcn/framer-animations.tsx, tsup.config.ts, demo/vite.config.ts, demo/postcss.config.js, demo/tailwind.config.js, demo/src/App.tsx, demo/src/main.tsx.
What it can do
Apply preset bounce animations to React components
React component → Animated component with bounce effect
Apply preset fade animations to React components
React component → Animated component with fade in/out effect
Apply preset slide animations to React components
React component → Animated component with slide transition
Apply preset zoom animations to React components
React component → Animated component with zoom in/out effect
Apply preset rotation animations to React components
React component → Animated component with rotation effect
Apply preset pulse animations to React components
React component → Animated component with pulsing effect
Import drop-in keyframe animations for Framer Motion
Animation preset name → Framer Motion keyframe configuration
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.