JEasings

Import

import JEASINGS from 'jeasings'

Description

A JavaScript module that can be used to animate properties over a time duration.

While JEasings is not written with React Three Fiber in mind, it is still possible to use it.

Example 1 : JEasing the OrbitControls Target

In this example below, you can double-click the monkey head, or plane, and it will smoothly move the OrbitControls target to where you clicked the mesh.

<>

Using JEasings in R3F

Install the dependency

npm install jeasings --save-dev

Import in your script,

import JEASINGS from 'jeasings'

Note that the JEASINGS object is created as a singleton, which means that if you also import it in other files, then it will also point to the first instance that was registered in memory.

Next, we need to continually call JEASINGS.Update(). So, creating a simple component, and calling it within a useFrame is sufficient.

function JEasings() {
  useFrame(() => {
    JEASINGS.update()
  })
}

And now add the simple component to your canvas.

<Canvas>
  // ...
  <JEasings />
  // ...
</Canvas>

All JEasings started throughout your application will be updated.

The JEASINGS object manages its own time properties, so we don't need to pass that value in.

Note that you also only need one JEASINGS.Update() being called within your whole application for it to manage all currently executing JEasings throughout.

In the example above, I am JEasing the target property of the OrbitControls. So in the Monkey, or Plane mesh, I have added a onDoubleClick event that will use the {point} object from the event to update the OrbitControls target.

I also need to pass the OrbitControls reference to the Monkey and Plane components when they are created, so that the onDoubleClick event can modify the target co-ordinates.

export default function App() {
  const ref = useRef()
  return (
    <>
        //...
        <OrbitControls ref={ref} />
        <Plane controls={ref} />  // Passing OrbitControls ref as a prop to the Plane
        //...
}

function Plane({ controls }) {
  return (
    <mesh
      // ...
      onDoubleClick={({ point }) => {
        new JEASINGS.JEasing(controls.current.target)
          .to(
            {
              x: point.x,
              y: point.y,
              z: point.z
            },
            500
          )
          .easing(JEASINGS.Cubic.Out)
          .start()
      }}>
      // ...
  )
}

Example 2 : JEasing the Component Position

This time, there will be two JEasings running simultaneously, and a third JEasing that starts after one of the other JEasings has completed.

This will result in the Monkey appearing to bounce to the point where you've double-clicked the Plane.

<>

In order for the onDoubleClick event of the Plane to modify the Monkey position, I needed to pass in the Monkeyreference to it.

export default function App() {
  const ref = useRef()
  return (
    <>
        //...
        <Monkey ref={ref} />
        <Plane monkey={ref} /> <!-- Passing the Monkey ref as a prop to the Plane -->
        //...
}

And also since the Monkey is a custom function component within my app, and you can't create refs directly to function components, I needed to create a forwardRef to the Monkey for it to work.

const Monkey = forwardRef(function Monkey({ position }, ref) {
  // ...
  return (
    <group ref={ref}>
    // ...
})

And now I can configure multiple JEasings to modify the Monkey when the Plane is double-clicked.

function Plane({ monkey }) {
  return (
    <mesh
      // ...
      onDoubleClick={({ point }) => {
        // slide
        new JEASINGS.JEasing(monkey.current.position)
          .to(
            {
              x: point.x,
              z: point.z
            },
            500
          )
          .start()

        // arc up through the air
        new JEASINGS.JEasing(monkey.current.position)
          .to(
            {
              y: point.y + 3
            },
            250
          )
          .easing(JEASINGS.Cubic.Out)
          .start()
          .onComplete(() => {
            // arc down through the air and finish with a small bounce
            new JEASINGS.JEasing(monkey.current.position)
              .to(
                {
                  y: point.y + 1
                },
                250
              )
              .easing(JEASINGS.Bounce.Out)
              .start()
          })
      }}>
      // ...
  )
}

The final little bounce when the Monkey lands is due to using JEASINGS.Bounce.Out.

See JEasing Curve Functions for more possibilities.

Useful Links

JEasings	github.com

Comments