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, // default false - to bake from and to
    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.play()

// fromToAnim.step(dt)

Curve example

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

//  default mode

const curveAnim = new QARL.Curve({
    target: cube3,
    loop: true,
    time: 10000,
    mode: QARL.modes.yoyo,
    easing: QARL.easings.inOutBack,
    smoothing: 10,
    // position.x
    points: [
        [-2],
        [ 2],
        [ 2],
        [-2],
        [-2],
        [ 2],
    ],

    // or position.x and position.y
    // points: [
    //     [-2, -2],
    //     [ 2, -2],
    //     [ 2,  0],
    //     [-2,  0],
    //     [-2,  2],
    //     [ 2,  2],
    // ],

    // or position.x, position.y and position.z
    // points: [
    //     [-2, -2,  0,],
    //     [ 2, -2,  0,],
    //     [ 2,  0,  1,],
    //     [-2,  0,  1,],
    //     [-2,  2,  0,],
    //     [ 2,  2,  0,],
    // ],
})

// or custome mode

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

// curveAnim.play()

// 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: cube3clone,
    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: cube3clone,
    loop: true,
    time: 3000,
    mode: QARL.modes.bounce,
    easing: QARL.easings.inOutSine,
    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) // true for async

GlobalManager and Loop example

import { GlobalManager, Loop } from 'qarl';

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshBasicMaterial({ color: 0xff6b6b })
);

const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(0.7),
  new THREE.MeshBasicMaterial({ color: 0x4ecdc4 })
);

const cubeAnimation = GlobalManager.create({
    target: cube,
    time: 2000,
    from: { rotation: { x: 0, y: 0, z: 0 } },
    to: { rotation: { x: Math.PI * 2, y: Math.PI * 2, z: Math.PI * 2 } },
    easing: 'outElastic',
    loop: true,
    mode: 'pingPong'
});

const sphereAnimation = GlobalManager.create({
    target: sphere,
    time: 3000,
    properties: ['position.x', 'position.y', 'position.z', 'scale.x', 'scale.y', 'scale.z'],
    points: [
        [0, 0, 0, 1, 1, 1],
        [1, 2, 0, 2, .5, 2],
        [-1, 2, 0, 1, 2, 1],
        [0, 0, 0, 1, 1, 1]
    ],
    smoothing: 20,
    easing: 'outBack',
    loop: true,
});

cubeAnimation.play();
sphereAnimation.play();

const gameLoop = Loop.start(GlobalManager.update);

// Loop.stop(gameLoop);