Skip to content

urpflanze-org/animation

Repository files navigation

Synopsis

This package is used by the Urpflanze javascript library to create animations.

You can use it in browser or in Node.

The main purpose is to interpolate values based on time.

Donate

I am trying to create a tool for those who want to approach the world of programming or for programmers who want to approach the world of creative coding.

I have spent a lot of time and will spend more to support this project. I also have in mind a web editor (open-source) where you can use the features of this library in the browser.

You can see a preview here


Menu

Installation

You can install the library with the command:

npm i @urpflanze/animation --save

And import into your project

/**
 * Full importing
 */
import * as Animation from '@urpflanze/animation'

const anim = Animation.Simple({ from: 0, to: 100, duration: 1000 })
const value = anim([currentTime])

// Or

const animObj = Animation.createAnimation({ from: 0, to: 100, duration: 1000 })
animObj.update([currentTime])
animObj.value // current animation value

Otherwise you can use from the browser using a CDN

<!-- ES Modules -->
<script type="module">
	import * as Animation from 'https://esm.run/@urpflanze/animation'

	//...
</script>

<!-- UMD -->
<script src="https://cdn.jsdelivr.net/npm/@urpflanze/animation"></script>
<script>
	// Animation.[method]
</script>

Create Animation

const anim = Animation.Simple({
	from: 0,
	to: 100,
	duration: 1000,
	loop: 2,
})

// total animation duration 2000 (1000 * 2 loop)

console.log(anim(-10)) // 0 (not started)
console.log(anim(0)) // 0 (started)
console.log(anim(500)) // 50 (loop: 1)
console.log(anim(1500)) // 50 (loop: 2)
console.log(anim(2200)) // 100 (ended)

Animation parameters

Name Type default Description
from number | string | Array<number | string> - start value
to number | string | Array<number | string> - end value
duration number 1000 Animation duration in milliseconds
direction normal | reverse | alternate normal Direction of animation. Alternate goes from 'from' to 'to' and from 'to' to 'from'
loop number | boolean false Define a number of repetitions
interpolator TInterpolator Type of value interpolation
delay number 0 Delay of animation start
afterDelay number 0 Delay after animation end loop
round number decimal to be rounded
colorTransitionMode hue | rgb rgb color interpolation mode (from and to)

Interpolation functions

You can pass the interpolator property as a string or as an object to pass parameters:

const animElastic = Animation.Simple({
	from: 0,
	to: 100,
	duration: 1000,
	interpolator: 'elasticOut',
})

const animElasticWithParams = Animation.Simple({
	from: 0,
	to: 100,
	duration: 1000,
	interpolator: {
		type: 'elasticOut',
		params: {
			amplitude: 2,
		},
	},
})

Interpolation and Easings

Name Params
wave phase
cubicBezier x1, x2, y1, y2
linear
quadraticIn
quadraticOut
quadraticInOut
cubicIn
cubicOut
cubicInOut
quarticIn
quarticOut
quarticInOut
quinticIn
quinticOut
quinticInOut
sinusoidalIn
sinusoidalOut
sinusoidalInOut
exponentialIn
exponentialOut
exponentialInOut
circularIn
circularOut
circularInOut
bounceIn
bounceOut
bounceInOut
backIn overshoot
backOut overshoot
backInOut overshoot
elasticIn amplitude, period
elasticOut amplitude, period
elasticInOut amplitude, period

Utilities

For more complex animations you can use utility methods:

import { clock, clockOffset, Easings } from '@urpflanze/animation'

requestAnimationFrame(time => {
	// from 0 to 1000 and from 1000 to 0, total duration 2000ms (loop)
	const animationTime = clock(time, 1000, true, 'alternate')
	const value = Easings.bounceOut(animationTime, 100, 200, 1000)

	// or
	// const animationTimeOffset = clockOffset(time, 1000, true, 'alternate')
	// const value = Easings.bounceOut(animationTimeOffset, 100, 200)
})