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

// basic
<UiTransition config="slideX">
    <div v-if="show" />
</UiTransition>

// with arguments
<UiTransition config="slideX(0, 100)">
    <div v-if="show" />
</UiTransition>

// different entrance and exit animations
<UiTransition
  :config="{
    enter: 'slideX',
    leave: 'fade(0, 0.75)',
  }"
>
    <div v-if="show" />
</UiTransition>

Get started

$ npm i ui-transition

// 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 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 <UiTransition /> comes in 👨‍🏫. <UiTransition /> uses CSS Keyframes which utilizes 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.

// 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<string | number>;

type Step = (
  from: number | number[],
  to: number | number[]
) => number | number[];

type AnimPhase = "enter" | "leave";

interface DynamicObject<T> {
  [key: string]: T;
}

type DurationAndDelay = number | AnimPhaseObject<number> | undefined;

type AnimPhaseObject<T> = {
  [key in AnimPhase]?: T;
};

type Ease = string | AnimPhaseObject<string>;

type Spring = string | AnimPhaseObject<SpringRoot>;

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 <TransitionGroup /> rather than default <Transition />

Read more about Vue's <TransitionGroup /> here

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