Thoughts on Just Animate 3

example.js

// declare timeline with references
const t1 = just.timeline({
    // false to ignore global definitions for references and props
    globals: false,
    references: {
        entrance: "ease-out"
    },
    props: {
        x: {...} // property definitions
    }
});

// add a single keyframe
// use array to pass multiple
t1.at(200, {
    targets: ".class",
    easing: "ease-in",
    x: 200
});

// set value
// use array to pass multiple
t1.set(200, {
    targets: ".class",
    transformOrigin: "center center"
});

// declarative group animation with keyframes
// use array to pass multiple
t1.animate({
    targets: [".class", ".class2"],
    duration: 200,
    stagger: 150,
    easing: "@entrance",
    width: [{ offset: 0, value: 0 }, { offset: 1, value: 180 }]
});

// starting position
t1.animate(200, {
    targets: [".class", ".class2"],
    duration: 200,
    stagger: 150,
    easing: "@entrance",
    width: [{ offset: 0, value: 0 }, { offset: 1, value: 180 }]
});

// declarative sequencing with negative delay for overlap
// starts at the current cursor position
t1.sequence([
    {
        duration: 1000,
        delay: -150,
        targets: ".class",
        width: [{ offset: 0, value: 0 }, { offset: 1, value: 180 }]
    }
]);

// starting position of 200
t1.sequence(200, [
    {
        duration: 1000,
        delay: -150,
        targets: ".class",
        width: [{ offset: 0, value: 0 }, { offset: 1, value: 180 }]
    }
]);

// handling labels
t1.labels.myLabel = 200; // set label to 200ms
const value = t1.labels.myLabel; // get label
t1.labels.myLabel = undefined; // clear label

// event or label triggering (jQuery style)
t1.on("finish", () => {});
t1.off("finish", () => {});

// handle next named event or label
t1.once("finish").then();

// properties
t1.currentTime;
t1.duration;

// player controls
t1.play();
t1.play({ repeat: Infinity, alternate: true, destroy: false });
t1.pause();
t1.reverse();
t1.reverse();

t1.seek(200);
t1.seek("myLabel");

// returns calculated keyframes to declarative format
const internalModel = t1.getState();

// merge of existing state
t1.setState(internalModel);

// replaces whole contents of timeline with new keyframes
t1.replaceState(internalModel);

// register global references and properties for timelines 
just.registerReferences({
    customEasing: x => x ** 2
});
just.registerProperties({
    // x is a number
    x: "number",
    // linearGradient should use pattern matching
    linearGradient: "auto",
    // width is of type number, but has a unit of px appended to it
    width: {
        type: "number",
        unit: "px"
    },
    // some custom property
    customProp: {
        set(target, value) {
            target.anotherName = value;
        },
        get(target) {
            return target.anotherName;
        },
        mix(left, right) {
            // parse and stuff here

            // return interpolator
            return o => right + (right - left) * o;
        }
    }
});