https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion

Port of the most beautiful animation Tailwind library tailwindcss-motion by @romboHQ.
https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion
tailwind unocss
Last synced: 27 days ago
JSON representation
Port of the most beautiful animation Tailwind library tailwindcss-motion by @romboHQ.
Host: GitHub
URL: https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion
Owner: whatnickcodes
License: mit
Created: 2024-10-08T22:08:16.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-11-11T01:37:40.000Z (6 months ago)
Last Synced: 2025-04-13T02:14:11.821Z (27 days ago)
Topics: tailwind, unocss
Language: CSS
Homepage: https://animations.tips.io/
Size: 2.49 MB
Stars: 18
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

awesome-unocss - unocss-preset-tailwindcss-motion - preset-tailwindcss-motion) - Ridiculously awesome animations via unofficial [Tailwind Motion](https://rombo.co/tailwind) port, by [@whatnicktweets](https://x.com/whatnicktweets). (Community / Presets)
README

        # 😍 unocss-preset-tailwindcss-motion 😍 

![Motion Animation Preview](https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion/blob/HEAD/cover.png?raw=true)

Port of the most beautiful animation Tailwind library [tailwindcss-motion](https://github.com/romboHQ/tailwindcss-motion) by @romboHQ.

## Get Started

This is for UnoCSS folks but should be really easy if you are familiar. Simply add the preset to your UnoCSS config via our [NPM package](https://www.npmjs.com/package/unocss-preset-tailwindcss-motion).

```bash

npm i -D unocss-preset-tailwindcss-motion

```

```js

import { presetTailwindMotion } from 'unocss-preset-tailwindcss-motion'

export default defineConfig({

    presets: [

        presetUno(),

        presetTailwindMotion()

    ],

})

```

## Changelog

It is now updated to match `v4` of the Tailwind plugin.

## Demo

[Giant Test Page](https://animations.tips.io)

## Why?

I needed a solid animation library for my side project that is heavily UnoCSS dependent. UnoCSS is truly a work of art and so is this library. Now you can have both. More on side project soon.

## Features

Please reference the [official plugin docs](https://github.com/romboHQ/tailwindcss-motion) for a better explanation. Basically it comes down to:

```html







Etc...

Default

Custom

JIT


Default

Custom

JIT support

Etc...



Normal

2000ms speed

Bouncy

300ms delay

Loop 2x

2000ms speed, bouncy


```

Making sense? Easy, great! Check out the million options below:

## Full Docs & Reference

### Base Animations

#### Scale

```

motion-scale-

motion-scale--[0|50|75|90|95|100|105|110|125|150]

motion-scale--[value]

motion-scale-in

motion-scale-out

motion-scale-loop

motion-scale-in-75

motion-scale-out-150

motion-scale-loop-[1.337]

motion-scale-in-[0.5]

motion-scale-loop-75/mirror

motion-scale-loop-[1.5]/reset

```

#### Scale X/Y

``` 

motion-scale--

motion-scale---[0|50|75|90|95|100|105|110|125|150]

motion-scale---[value]

motion-scale-x-in

motion-scale-y-out

motion-scale-x-loop

motion-scale-x-in-75

motion-scale-y-out-150

motion-scale-x-loop-[0.82]

motion-scale-y-in-[1.25]

motion-scale-x-loop-75/mirror

motion-scale-y-loop-[1.5]/reset

```

#### Translate

```

motion-translate--

motion-translate---(0|25|50|75|100|150)

motion-translate---[value]

motion-translate-x-in

motion-translate-y-out

motion-translate-x-loop

motion-translate-x-in-75

motion-translate-y-out-150

motion-translate-x-loop-[42px]

motion-translate-y-in-[-15rem]

motion-translate-x-loop-25/mirror

motion-translate-y-loop-[88vh]/reset

```

#### Rotate

```

motion-rotate-

motion-rotate--(0|1|2|3|6|12|45|90|180)

motion-rotate--[value]

motion-rotate-in

motion-rotate-out-45

motion-rotate-loop

motion-rotate-in-[42deg]

motion-rotate-out-[-15deg]

motion-rotate-loop-90/mirror

motion-rotate-loop-[180deg]/reset

```

#### Opacity

```

motion-opacity-

motion-opacity--(0|25|50|75|100)

motion-opacity--[value]

motion-opacity-in

motion-opacity-out-50

motion-opacity-loop

motion-opacity-in-[0.42]

motion-opacity-out-[33%]

motion-opacity-loop-75/mirror

motion-opacity-loop-[0.875]/reset

```

#### Blur

```

motion-blur-

motion-blur--(sm|md|lg|xl|2xl|3xl)

motion-blur--[value]

motion-blur-in

motion-blur-out-lg

motion-blur-loop

motion-blur-in-[5px]

motion-blur-out-[10px]

motion-blur-loop-xl/mirror

motion-blur-loop-[15px]/reset

```

#### Text Color

```

motion-text-

motion-text--{color}

motion-text--[value]

motion-text-in

motion-text-out-red-500

motion-text-loop-blue-500

motion-text-in-[#ff0000]

motion-text-out-purple-500

motion-text-loop-blue-500/mirror

motion-text-loop-[#0000ff]/reset

```

#### Background Color

```

motion-bg-

motion-bg--{color}

motion-bg--[value]

motion-bg-in

motion-bg-out-red-500

motion-bg-loop-blue-500

motion-bg-in-[#ff0000]

motion-bg-out-purple-500

motion-bg-loop-blue-500/mirror

motion-bg-loop-[#0000ff]/reset

```

#### Grayscale

```

motion-grayscale-

motion-grayscale--(0|25|50|75|100)

motion-grayscale--[value]

motion-grayscale-in

motion-grayscale-out-50

motion-grayscale-loop

motion-grayscale-in-[0.42]

motion-grayscale-out-[33%]

motion-grayscale-loop-75/mirror

motion-grayscale-loop-[0.875]/reset

```

#### Preset Animations

##### Classics

```

motion-preset-slide-

motion-preset-slide--(sm|md|lg)

motion-preset-slide-

motion-preset-slide--(sm|md|lg)

motion-preset-focus

motion-preset-focus-(sm|md|lg)

motion-preset-blur-

motion-preset-blur--(sm|md|lg)

motion-preset-rebound

motion-preset-rebound-(right|left|up|down)

motion-preset-bounce

motion-preset-expand

motion-preset-shrink

motion-preset-pop

motion-preset-compress

motion-preset-shake

motion-preset-wiggle

```

##### Loops

```

motion-preset-pulse

motion-preset-pulse-(sm|md|lg)

motion-preset-wobble

motion-preset-wobble-(sm|md|lg)

motion-preset-seesaw

motion-preset-seesaw-(sm|md|lg)

motion-preset-oscillate

motion-preset-oscillate-(sm|md|lg)

motion-preset-stretch

motion-preset-stretch-(sm|md|lg)

motion-preset-float

motion-preset-float-(sm|md|lg)

motion-preset-spin

motion-preset-blink

```

##### Fun

```

motion-preset-typewriter-[]

motion-preset-confetti

motion-preset-flomoji-👉

motion-preset-flomoji-🚀

motion-preset-flomoji-👀

motion-preset-flomoji-👍

motion-preset-flomoji-[🎉]

motion-preset-flomoji-[🌟]

motion-preset-flomoji-[🎸]

motion-preset-flomoji-[Woah!]

```

### Modifiers

#### Duration

```

motion-duration

motion-duration-(75|100|150|200|300|500|700|1000|1500|2000)

motion-duration-(75|100|150|200|300|500|700|1000|1500|2000)/(scale|translate|rotate|blur|grayscale|opacity|background|text)

```

#### Delay

```

motion-delay

motion-delay-(75|100|150|200|300|500|700|1000)

motion-delay-(75|100|150|200|300|500|700|1000)/(scale|translate|rotate|blur|grayscale|opacity|background|text)

```

#### Easing

```

// Basic easings

motion-ease-(linear|in|out|in-out)

// Spring & bounce easings

motion-ease-(spring-smooth|spring-snappy|spring-bouncy|spring-bouncier|spring-bounciest|bounce)

// Additional cubic-bezier easings

motion-ease-(in-quad|in-cubic|in-quart|in-back)

motion-ease-(out-quad|out-cubic|out-quart|out-back)

motion-ease-(in-out-quad|in-out-cubic|in-out-quart|in-out-back)

// Per-property targeting

motion-ease-{any-of-above}/(scale|translate|rotate|blur|grayscale|opacity|background|text)

```

#### Loop

```

motion-loop

motion-loop-infinite

motion-loop-[number]

motion-loop-(infinite|number)/(scale|translate|rotate|blur|grayscale|opacity|background|text)

```

#### Mirror and Reset

- **Mirror**: Reverses the animation direction after completion.

  - Example: `motion-scale-loop-50/mirror`

- **Reset**: Resets the animation to its initial state after completion.

  - Example: `motion-scale-loop-50/reset`

### Combining Animations

```

motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 motion-blur-in-md motion-opacity-in-0

motion-opacity-in-0 motion-translate-y-in-100 motion-scale-in-150 motion-rotate-in-180 motion-grayscale-in-75

motion-scale-in-75 motion-rotate-in-180 motion-translate-x-in-100 motion-blur-in-lg motion-bg-in-blue-500

motion-translate-x-in-100 motion-translate-y-in-50 motion-scale-in-125 motion-rotate-in-45 motion-text-in-purple-500

motion-preset-pop motion-preset-slide-up motion-preset-focus motion-delay-100

motion-preset-shake motion-preset-blur-right motion-preset-stretch motion-delay-200

motion-preset-wiggle motion-preset-slide-down motion-preset-blink motion-delay-150

motion-preset-pop motion-translate-y-loop-50 motion-scale-in-150 motion-rotate-in-360 motion-blur-in-xl

motion-preset-compress motion-translate-x-loop-75 motion-scale-loop-125 motion-rotate-loop-180 motion-delay-100

motion-preset-stretch motion-scale-in-[250%] motion-rotate-in-[720deg] motion-blur-in-[15px] motion-grayscale-in-100

motion-preset-oscillate motion-translate-x-in-[150%] motion-translate-y-in-[150%] motion-scale-in-[175%] motion-rotate-in-[1080deg]

motion-preset-slide-up motion-preset-blur-up motion-scale-in-[300%] motion-rotate-loop-[360deg] motion-delay-150

```

#### Animation State

```

motion-paused

motion-running

```

### Smart Extras

These are not part of the original library, see "What's Different" below for more info:

```css

/* Short-hand pause */

.pause

/* Short-hand paly */

.play

/* Same as pause, but better name - meant to be used with JS to "remove this class" to trigger the animation */

.wait

/* Motion = 0, Completes the animations forcefully, this is technically different than pause */

.still

```

## What's different?

Not much. This should be near identical for 99% of purposes.

### prefers-reduced-motion

Currently, tailwindcss-motion manually applies the `@media screen and (prefers-reduced-motion: no-preference)` on [various keyframes](https://github.com/romboHQ/tailwindcss-motion/blob/main/src/keyframes.js) that have basically big translates. It's also applied on some of [their custom one-off](https://github.com/romboHQ/tailwindcss-motion/blob/main/src/presets.js) more fun animations (Flomoji, Typewriter).

Rather than doing that, this library will automatically add the following for simplicity to your CSS:

```css

 @media (prefers-reduced-motion: reduce) {

    *, ::before, ::after {

        --motion-duration: 0.01ms !important;

        --motion-delay: 0ms !important;

        animation-duration: 0.01ms !important;

        animation-delay: 0ms !important;

        transition-duration: 0.01ms !important;

        transition-delay: 0ms !important;

    }

}

```

### ::backdrop

Tailwind compiles `:root {}` and `::backdrop {}` separately for variables since browsers treat them as distinct contexts. Unfortunately, you can't even do something like this `:root, ::backdrop {}` as that does not work.

That's a lot of bytes to do twice... So we skip `::backdrop`. It's rarely used anyway by people.

### typewriter effect supports custom fonts

Unlike the original library, this version doesn't set `font-family: monospace;` for the typewriter effect. This allows for greater flexibility in font choices and the animation, however it may require minor adjustments if spacing issues occur with various custom fonts. You can just do this instead:

```

motion-preset-typewriter-[29] font-mono

```

### confetti doesn't set margin and block

The preset `motion-preset-confetti` normally applies `display: block` and `margin: 0;`. This makes a ton of sense but also can be annoying because it can mess the layout when applying these animations (which goal wise we ideally don't want layout to ever shift when applying an animation). You can instead do this if you want it back perfectly to original:

```

motion-preset-confetti block m-0

```

### Flomoji is back and our version supports JIT

For maximum port, I decided to add Flomoji back and with JIT support:

```

motion-preset-flomoji-👉

motion-preset-flomoji-🚀

motion-preset-flomoji-👀

motion-preset-flomoji-👍

motion-preset-flomoji-[🎉]

motion-preset-flomoji-[🌟]

motion-preset-flomoji-[🎸]

motion-preset-flomoji-[Woah!]

```

### Smart Classes

These are extra short-hands. Note that still and pause (or motion-pause) are different.

```css

.pause { animation-play-state: paused; }

.play { animation-play-state: running; }

/* You'll need to manually remove "wait" with JS to use this helper when you want the animation to start */

/* This is excellent for when triggering when in viewport */

/* Note: wait also applies to ::before and ::after pseudo-attributes */

.wait, .wait * { animation-play-state: paused; }

/* Note: still also applies to ::before and ::after pseudo-attributes */

.still, .still * {

    --motion-duration: 0.01ms !important;

    --motion-delay: 0ms !important;

    animation-duration: 0.01ms !important;

    animation-delay: 0ms !important;

    transition-duration: 0.01ms !important;

    transition-delay: 0ms !important;

}

```

## Contributing

- The folder tailwind is for the tailwind styles, `tailwindcss-motion-reference` is detached just for easy file comparison and is not used.

- To dev it up here... just run `npm run dev`

- To see the test file, just run `npm run serve`

- To build it all, just run `npm run build`

- For more, reference `package.json`. This may get more sophisticated later but does have a 1 vs the other mode.

## License

In honor of original library this is MIT.

## More

[Via x.com/@whatnicktweets](https://x.com/@whatnicktweets)

https://www.npmjs.com/package/unocss-preset-tailwindcss-motion
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/whatnickcodes/unocss-preset-tailwindcss-motion

Awesome Lists containing this project

README
