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

• Synopsis
• Donate
• Menu
• Installation
• Create Animation
  • Animation parameters
• Interpolation functions
  • Interpolation and Easings
• Utilities

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)
})