QARL (Quantum Animation Remixable Library) 😎

Description generated by GPT while we were busy doing more important things.

QARL is an animation library for game engine.

⚠️ Attention! ⚠️

New project! 💡 It surely has some bugs, unfinished features, and odd solutions, but a lot of heart and effort went into it. Thanks for stopping by—hope it will be enjoyed! 🙏✨

Why QARL? 🏎️💨

Looking for performance? QARL's FromTo animation computes so fast, it feels like it bends space-time! 💫 No more waiting for slow calculations—just smooth, seamless transitions that keep up with the pace of your game.

Installation

Install the library via npm:

npm install qarl

FromTo example

const cube3 = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshBasicMaterial({ color: 0x00ffff })
)

const fromToAnim = new QARL.FromTo({
    target: cube3,
    dynamic: true,
    loop: true,
    time: 3000,
    mode: QARL.modes.pingPong, // bounce, yoyo, pingPong
    easing: QARL.easings.outQuad,
    from: { rotation: { x: 1, y: 2 }, position: { x: 2, z: 2 }, scale: { x: .01, y: 1, z: 1 } },
    to: { rotation: { x: 3, y: -5 }, position: { x: -2, z: -2 }, scale: { x: 3, y: .5, z: .5 } },
})

// fromToAnim.step(dt)

Curve example

const cube3 = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshBasicMaterial({ color: 0xff00ff })
)

const curveAnim = new QARL.Curve({
    target: cube3,
    loop: true,
    time: 10000,
    mode: QARL.modes.yoyo,
    easing: QARL.easings.inOutBack,
    smoothing: 10,
    properties: ['position.x', 'position.y', 'position.z', 'scale.x', 'scale.y', 'scale.z'],
    points: [
        [-2, -2, 0, .1, .5, .5],
        [ 2, -2, 0, .5, .2, .2],
        [ 2,  0, 1, .1, .5, .5],
        [-2,  0, 1, .5, .2, .2],
        [-2,  2, 0, .1, .5, .5],
        [ 2,  2, 0, .5, .2, .2],
    ],
})

// curveAnim.step(dt)

Manager example

const qarlManager = new QARL.Manager()

const cube3 = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshBasicMaterial({ color: 0xff00ff })
)

const qarl1 = qarlManager.create({
    target: cube3,
    loop: true,
    time: 10000,
    mode: QARL.modes.yoyo,
    easing: QARL.easings.inOutBack,
    smoothing: 10,
    // properties: ['position.x', 'position.y', 'position.z'], // default properties
    points: [
        [-2, -2, 0],
        [ 2, -2, 0],
        [ 2,  0, 1],
        [-2,  0, 1],
        [-2,  2, 0],
        [ 2,  2, 0],
    ],
})

// or

const cube3clone = cube3.clone()

const qarl2 = qarlManager.create({
    target: cube3,
    dynamic: true,
    loop: true,
    time: 3000,
    mode: QARL.modes.pingPong, // bounce, yoyo, pingPong
    easing: QARL.easings.outQuad,
    from: { rotation: { x: 1, y: 2 }, position: { x: 2, z: 2 }, scale: { x: .01, y: 1, z: 1 } },
    to: { rotation: { x: 3, y: -5 }, position: { x: -2, z: -2 }, scale: { x: 3, y: .5, z: .5 } },
})

// qarlManager.update(dt)

Play Animation Instantly example

const cube3 = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshBasicMaterial({ color: 0xff00ff })
)

QARL.play({
    target: cube3,
    loop: true,
    time: 10000,
    mode: QARL.modes.yoyo,
    easing: QARL.easings.inOutBack,
    smoothing: 10,
    // properties: ['position.x', 'position.y', 'position.z'], // default properties
    points: [
        [-2, -2, 0],
        [ 2, -2, 0],
        [ 2,  0, 1],
        [-2,  0, 1],
        [-2,  2, 0],
        [ 2,  2, 0],
    ],
})

// or

const cube3clone = cube3.clone()

QARL.play({
    target: cube3,
    dynamic: true,
    loop: true,
    time: 3000,
    mode: QARL.modes.pingPong, // bounce, yoyo, pingPong
    easing: QARL.easings.outQuad,
    from: { rotation: { x: 1, y: 2 }, position: { x: 2, z: 2 }, scale: { x: .01, y: 1, z: 1 } },
    to: { rotation: { x: 3, y: -5 }, position: { x: -2, z: -2 }, scale: { x: 3, y: .5, z: .5 } },
})

// async

await QARL.play({ /*... config ...*/ }, true)