JEASINGS

A JavaScript module for extrapolating numerical values over time.

> [!NOTE]
> JEASINGS API based on Tween.js release 1 : https://github.com/sole/tween.js/blob/r1/src/Tween.js
>
> See Tween.js r1 License at https://github.com/sole/tween.js/blob/r1/LICENSE

Usage

$3

``javascript
import JEASINGS from 'https://esm.sh/jeasings'
`

$3

`bash
npm install jeasings
`

`javascript
import JEASINGS from 'jeasings'
`

$3

`javascript
import JEASINGS from '/path/to/JEasings.js'
`

Basic Example

Using the JEASINGS module to animate a HTML div position.

`html

`

Edit on SBEDIT

$3

`javascript
new JEASINGS.JEasing(position)
.to({ x: 500, y: 250 }, 1500)
.delay(500) // Optional. Delay half a second before starting the JEasing.
.start()
`

Edit on SBEDIT

$3

The default JEasing will run and finish at a constant speed. We can modify the speed as it progresses through the duration by setting the easing option.

`javascript
new JEASINGS.JEasing(position)
.to({ x: 500, y: 250 }, 1500)
.delay(500)
.easing(JEASINGS.Quadratic.InOut) // Optional. Use can use a curve function to change the speed over time.
.start()
`

Edit on SBEDIT

See more JEasing Curve Functions

$3

We can run some code everytime a JEasing is re-evaluated. Example, we could update the Boxes position in the onUpdate callback instead of in the animation loop.

`javascript
new JEASINGS.JEasing(position)
.to({ x: 500, y: 250 }, 1500)
.delay(500)
.easing(JEASINGS.Quadratic.InOut)
.onUpdate(() => {
// Optional. Every time the JEasing is updated, do something such as re-position the box.
box.style.left = position.x + 'px'
box.style.top = position.y + 'px'
})
.start()

function animate() {
requestAnimationFrame(animate)

JEASINGS.update()

// box.style.left = position.x + 'px'
// box.style.top = position.y + 'px'
}
animate()
`

Edit on SBEDIT

$3

When a JEasing completes, we can run another script. E.g, start a new JEasing.

`javascript
new JEASINGS.JEasing(position)
.to({ x: 500, y: 250 }, 1500)
.delay(500)
.easing(JEASINGS.Quadratic.InOut)
.onUpdate(() => {
box.style.left = position.x + 'px'
box.style.top = position.y + 'px'
})
.onComplete(() => {
// In the onComplete callback we can run any script.
new JEASINGS.JEasing(position)
.to({ x: 0, y: 0 }, 1500)
.easing(JEASINGS.Bounce.Out)
.onUpdate(() => {
box.style.left = position.x + 'px'
box.style.top = position.y + 'px'
})
.start()
})
.start()
`

Edit on SBEDIT

$3

You can create JEasings as variables first, and then start them later as needed.

`javascript
const part1 = new JEASINGS.JEasing(position)
.to({ x: 500, y: 250 }, 1500)
.delay(500)
.easing(JEASINGS.Quadratic.InOut)
.onComplete(() => {
part2.start() // When completed, start the part2 JEasing
})
//.start()

const part2 = new JEASINGS.JEasing(position)
.to({ x: 0, y: 0 }, 1500)
.easing(JEASINGS.Bounce.Out)
.onComplete(() => {
part1.start() // Go back to the part1 JEasing
})
//.start()

part1.start() // Start the JEasing chain execution.

function animate() {
requestAnimationFrame(animate)

JEASINGS.update()

box.style.left = position.x + 'px'
box.style.top = position.y + 'px'
}
animate()
`

Edit on SBEDIT

$3

Another way of chaining JEasings is to use the chain() method. Create several JEasings as varibles, and then use the chain keyword to sequence them. Then start one of them to begin the chain sequence.

`javascript
const slideRight = new JEASINGS.JEasing(position).to({ x: 500, y: 0 }, 1000)

const slideDown = new JEASINGS.JEasing(position).to({ x: 500, y: 200 }, 1000)

const slideLeft = new JEASINGS.JEasing(position).to({ x: 0, y: 200 }, 1000)

const slideUp = new JEASINGS.JEasing(position).to({ x: 0, y: 0 }, 1000)

slideRight.chain(slideDown)
slideDown.chain(slideLeft)
slideLeft.chain(slideUp)
slideUp.chain(slideRight)

slideRight.start() // Start the JEasing chain.
`

Edit on SBEDIT

$3

Instead of creating new JEasings using the syntax new JEASINGS.Jeasing(...), you can destructure parts of the library into single variables.

E.g.,

`javascript
import JEASINGS from '/jeasings/JEasings.js'

const { JEasing, Bounce } = JEASINGS // Destructure only what you need.

const position = { x: 0, y: 0 }

const slideRight = new JEasing(position).to({ x: 500, y: 0 }, 1000).easing(Bounce.Out)
`

Edit on SBEDIT

$3

Instead of destructuring the JEASINGS imports, you can also used named imports for only what you need.

E.g.,

`javascript
import JEASINGS, { JEasing, Bounce } from '/jeasings/JEasings.js'

const position = { x: 0, y: 0 }

const slideRight = new JEasing(position).to({ x: 500, y: 0 }, 1000).easing(Bounce.Out)
`

Edit on SBEDIT

JEasing Curve Functions

E.g., .easing(JEASINGS.Quadratic.InOut)`

!JEasing Curve Functions

More Examples

Jeasings Easings

JEasing Chain

JEasing OrbitControls

Kick Boxing

House (CDN Example)

JEasing Latitude Longitude

JEasing OrbitControls Target in R3F

MapControls with Select Object to Zoom in

Rubiks Cube

Raycast to a Displacement Map

Three.js css3d - periodic table using JEASINGS

Three.js css3d - sprites using JEasings

Three.js webgl - collada - kinematics using JEasings