jeasings

v0.0.16

Published

2 months ago

A JavaScript module for extrapolating numerical values over time

Downloads

523

0High
0Medium
0Low

seanwasere

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

CDN

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

NPM

npm install jeasings

import JEASINGS from 'jeasings'

Host Locally

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

Basic Example

Using the JEASINGS module to animate a HTML div position.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>JEASINGS Module</title>
    <meta name="description" content="Using the JEASINGS module to animate a Div position." />
    <style>
      body {
        overflow: hidden;
        margin: 0px;
        background-color: #0f0f0f;
      }

      #box {
        background-color: hotpink;
        position: absolute;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script type="module">
      import JEASINGS from 'https://esm.sh/jeasings'

      const position = { x: 0, y: 0 } // Starting position.

      new JEASINGS.JEasing(position) // Create a new JEasing that modifies the 'position' object.
        .to({ x: 500, y: 250 }, 1500) // Move to (500, 250) in one and a half seconds.
        .start() // Start the JEasing.

      function animate() {
        requestAnimationFrame(animate)

        JEASINGS.update() // Update JEASINGS in an animation loop.

        // Update Box position after JEASINGS were re-evaluated.
        box.style.left = position.x + 'px'
        box.style.top = position.y + 'px'
      }
      animate()
    </script>
  </body>
</html>

Edit on SBEDIT

Add a Starting Delay

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

Use a Curve Function

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.

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

JEasing `onUpdate` callback.

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.

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

JEasing `onComplete` callback.

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

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

JEasings as Variables

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

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

Chained JEasings

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.

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

JEasing Destructuring

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

E.g.,

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

Named Imports

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

E.g.,

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