https://github.com/c4benni/ui-transition
An advanced, performant Vue Transition experience with springs
https://github.com/c4benni/ui-transition
animation animation-css spring transition typescript vue vue3 vuejs
Last synced: about 1 month ago
JSON representation
An advanced, performant Vue Transition experience with springs
- Host: GitHub
- URL: https://github.com/c4benni/ui-transition
- Owner: c4benni
- Created: 2022-01-25T22:23:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-11T18:06:53.000Z (about 4 years ago)
- Last Synced: 2025-10-05T19:21:58.554Z (9 months ago)
- Topics: animation, animation-css, spring, transition, typescript, vue, vue3, vuejs
- Language: TypeScript
- Homepage: https://github.com/c4benni/ui-transition#readme
- Size: 556 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UiTransition
#### *Create dynamic CSS spring animations*
## Intro
UiTransition is a Vue JS **_component_** that tries to provide an easy way to use **_spring animations_** for enter and leave states of DOM nodes. Although there is an API available to get an array of spring values, _this package was created to be used as a component, not a fully fledged animation library._
## Quick peek
_config can be customized to your taste_
```vue
// basic
// with arguments
// different entrance and exit animations
```
## Get started
```bash
$ npm i ui-transition
```
```ts
// import App, and createApp
import UiTransition from "ui-transition";
const app = createApp(App);
// basic
app.use(UiTransition);
// with your configurations
app.use(UiTransition, {
// set default values,
// build animations,
// set spring presets,
// or leave it blank...
// spring presets, and animations
// can be created on the fly.
});
```
## The why...
I'm a big fan of smooth transitioning with a natural feel for DOM nodes. This library was created to simplify that process of using a spring animation that will run at ~60FPS. **_Even on low power mode._**
To be honest, [`raf`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) won't achive that kind of performance, even when animating composite properties (transform, opacity). If you need to make a bulky request, be ready for some janky animations.
This is where `` comes in 👨🏫. `` uses `CSS Keyframes` which utilizes [off main thread animation](https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance#off_main_thread_animation) so you can be sure to do CPU draining tasks with your DOM node on the main thread, without having it interupted with calculations on every frame to create _spring animations_, ensuring a butter smooth animation with a natural feel.
## Props
- ### `config`
This is where all the magic happens. A dynamic prop that accepts different types. If `false` is passed here, no animation will be used.
##### `propType`
`string | boolean | BuildAnim`
types
Custom types assosiated with the `config` prop. The `BuildAnim` type above is explained below.
```ts
// This is the BuildAnim type
interface BuildAnim extends Anim {
enter?: Anim;
leave?: Anim;
}
interface Anim {
frame: Frame;
extends?: string;
duration?: DurationAndDelay;
delay?: DurationAndDelay;
ease?: Ease;
spring?: Spring;
}
type Frame = (step: Step, phase: AnimPhase) => DynamicObject;
type Step = (
from: number | number[],
to: number | number[]
) => number | number[];
type AnimPhase = "enter" | "leave";
interface DynamicObject {
[key: string]: T;
}
type DurationAndDelay = number | AnimPhaseObject | undefined;
type AnimPhaseObject = {
[key in AnimPhase]?: T;
};
type Ease = string | AnimPhaseObject;
type Spring = string | AnimPhaseObject;
type SpringRoot = string | SpringObject;
type SpringObject = {
tension?: number;
friction?: number;
mass?: number;
precision?: number;
velocity?: number;
stopAttempt?: number;
};
```
##### `default`
`'fade'`
- ### `delay`
Set animation delay.
##### `propType`
`number` | `{enter?: number; leave?: number}`
- ### `duration`
Control how long your spring animations should last!
> Leave `undefined` for the default spring feel
##### `propType`
`number` | `{enter?: number; leave?: number}`
- ### `ease`
Control the easing curve of your spring animation! Use css easings like `ease-out`, or a cubic bezier function to add more dynamics to your animations!
> Use `'linear'` for the default spring feel
##### `propType`
`string` | `{enter?: string; leave?: string}`
##### `default`
`'linear'`
- ### `group`
Used to set the underlying component to `` rather than default ``
> Read more about Vue's `` [here](https://vuejs.org/api/built-in-components.html#transitiongroup)
##### `propType`
`boolean`
- ### `retainFinalStyle`
Useful when you need an element to stay in its final animation position. Default behavior is to remove all animation styles applied.
##### `propType`
`boolean`