Animation Utils

A collection of animation utility functions and keyframes for styled-components.

Installation

npm install @realmjs/animation-utils --save

Usage

import { extractAnimation, flyIn, fadeIn, zoomIn } from 'animation-utils';

// Extract animation type and duration
const animation = 'flyIn 0.5s';
const [type, duration] = extractAnimation(animation);
console.log(type); // 'flyIn'
console.log(duration); // '0.5s'

// Use predefined animation functions
const flyInAnimation = flyIn({ direction: 'left' });
const fadeInAnimation = fadeIn();
const zoomInAnimation = zoomIn();

// Example usage in styled-components
const Container = styled.div`
  animation: ${flyInAnimation} 0.4s ease-in-out;
`;

API

extractAnimation(animation: string): [type: string, duration: string]

Extracts the animation type and duration from the given animation string.

• animation: A string representing the animation in the format "type duration".
• Returns an array containing the animation type and duration.

Animation Functions

The following animation functions are available for use:

stub()

A stub animation function that returns an empty string.

flyIn(options: { direction?: string }): Keyframes

Generates keyframes for a fly-in animation.

• options: An optional object with the following properties:
  • direction: The direction of the fly-in animation. Default is 'left'.
• Returns a Keyframes object for the fly-in animation.

fadeIn(): Keyframes

Generates keyframes for a fade-in animation.

• Returns a Keyframes object for the fade-in animation.

zoomIn(): Keyframes

Generates keyframes for a zoom-in animation.

• Returns a Keyframes object for the zoom-in animation.

Default Durations

Each animation function has a defaultDuration property that represents its default duration.

• stub.defaultDuration: '0'
• flyIn.defaultDuration: '0.4s'
• fadeIn.defaultDuration: '0.8s'
• zoomIn.defaultDuration: '0.6s'

License

This code is released under the MIT License.