Transition-magic NPM

Install

NPM:

npm install transition-magic

Other:

Download https://unpkg.com/transition-magic/dist/index.umd.js and link it in your html head:

<script src="index.umd.js"></script>

Usage

As module:

import { Transition } from 'transition-magic';

Or when linked in html head:

const { Transition } = transitionMagic;

Example:

Checkout the demo.

Quick start:

Create a transitionable object:

const animation = Transition(document.getElementById('my-elem'), 100);

Use the addKeyframe method to add keyframes. It takes a property definition object, which defines how a css property is transitioned as well as a relative starting and end point.

You can use one (or more) of the predefined property defintion creation functions:

animation
	.addKeyframe([rotate(30), translateX(100)], 0, 0.7)
	.addKeyframe([scale(1.2)], 0.3, 1);

Or define custom property definitions:

animation.addKeyframe(
	[
		// property defintion
		{
			propertyName: 'background-color',
			computedValue: (newValue) => `rgb(${newValue}, 150, 150)`,
			sourceValue: 0,
			targetValue: 255,
		},
	],
	// relative starting/end point (between 0 and 1)
	0,
	0.7
);

Now you can

Render the next / previous frame:

animation.next();
animation.previous();

Or set the progress manually:

animation.set(100);

Docs:

/**
 * Creates a transitional object
 * @param element
 * @param duration duration in frames
 */
function Transition(
	// can be an HTMLElement, array of HTMLElements or a css selector
	// see: https://github.com/CompactJS/uea#doc
	selector: UniversalElementSelector,
	duration: number
): TransitionAPI;

interface TransitionAPI {
	/**
	 *	Add transition keyframe with CSS properties
	 * @param cssProperties Definitions for transitioning CSS properties
	 * @param start keyframe starting point in percent (beween 0 and 1)
	 * @param end keyframe end point in percent (beween 0 and 1)
	 * @returns TransitionAPI for chaining
	 */
	addKeyframe(
		cssProperties: PropertyDefinition[],
		start: number,
		end: number
	): TransitionAPI;
	/**
	 * draw next frame
	 */
	next(): void;
	/**
	 * draw previous frame
	 */
	previous(): void;
	/**
	 * draw specific frame
	 * @param frame frame number
	 */
	set(frame: number): void;
}

/**
 * Defines how a CSS property is transitioned
 */
export type PropertyDefinition = {
	/**
	 * css property name
	 * @example opacity
	 */
	propertyName: keyof PropertiesHyphen<string>; // css properties, provided by csstype
	/**
	 * defines how a css property value is generated
	 */
	computedValue: (newValue: number) => string;
	/**
	 * starting css value
	 */
	sourceValue: number;
	/**
	 * target css value
	 */
	targetValue: number;
};

// TransitionDefinition templates
function rotate(from: number, to?: number): PropertyDefinition;
function scale(from: number, to?: number): PropertyDefinition;
function translateX(from: number, to?: number): PropertyDefinition;
function translateY(from: number, to?: number): PropertyDefinition;

Run tests

npm run test

Contact

👤 Timo Bechtel

🤝 Contributing

Contributions, issues and feature requests are welcome!

Check issues
Fork the Project
Create your Feature Branch (git checkout -b feat/AmazingFeature)
Test your changes npm run test
Commit your Changes (git commit -m 'feat: add amazingFeature')
Push to the Branch (git push origin feat/AmazingFeature)
Open a Pull Request

Commit messages

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.