FlowSoloTimeline.js

/**
* Class representing the FlowSoloTimeline timeline.
*
* Made with Flow
*/

class FlowSoloTimeline {
    /**
    * @constructor
    *
    * @param {HTMLElement} rootElement
    *   Root Element of the DOM containing the elements that will be animated in this timeline.
    *
    * @param {String} resourcesPath
    *   The path pointing to the root of the Timeline folder.
    */
    constructor(rootElement, elementID, resourcesPath) {
        this.rootElement = rootElement;
        this.elementID = elementID;
        this.resourcesPath = resourcesPath;
        this.imagesFolderPath = resourcesPath + "/img";
        this.loadFillImages();
    }

    /**
    * Returns the timeline's duration in milliseconds.
    */
    get duration() { return 4000 }

	loadFillImages() {
        let pattern;
	}
  
    loadSVGAnimations() {
        this.loadSVGShapeAnimations()
        this.loadSVGShapeMaskAnimations()
    }

    loadSVGShapeAnimations() {
        // Path Animations
        let path;
        // Gradient Animations
        let defs;
    } 

    loadSVGShapeMaskAnimations() {    } 

    /**
    * @return
    * Returns the list of svg shapes that are animated in this timeline.
    */
    get allShapes() {
        return [
            this.rootElement.querySelector(`${this.elementID} .pink-svg`),
            this.rootElement.querySelector(`${this.elementID} .yellow-svg`),
            this.rootElement.querySelector(`${this.elementID} .green-svg`),
            this.rootElement.querySelector(`${this.elementID} .white-svg`),
            this.rootElement.querySelector(`${this.elementID} .wordmarkcutout-svg`),
        ]
    }

    artboardAnimation() {
        // Workaround for Safari bug
        return this.rootElement.querySelector(`${this.elementID}.flow-artboard`).animate({
        backgroundPosition: ['0px', '1px'],
        }, {
            delay: 0,
            duration: 4000,
        });
    }
    pink_leftTrack() {
        const element = this.rootElement.querySelector(`${this.elementID} .pink`);
        return element.animate({
            left: ['-154px', '278px', '278px'],
            easing: ["cubic-bezier(0.215, 0.61, 0.355, 1)", "ease-in-out"],
            offset: [0, 0.25, 1],
          },
          {
            duration: this.duration,
            composite: FlowSoloTimeline.composite.REPLACE,
            fill: FlowSoloTimeline.fill.FORWARDS
          }
        )
    }yellow_leftTrack() {
        const element = this.rootElement.querySelector(`${this.elementID} .yellow`);
        return element.animate({
            left: ['-154px', '-154px', '278px', '278px'],
            easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "ease-in-out"],
            offset: [0, 0.25, 0.5, 1],
          },
          {
            duration: this.duration,
            composite: FlowSoloTimeline.composite.REPLACE,
            fill: FlowSoloTimeline.fill.FORWARDS
          }
        )
    }green_leftTrack() {
        const element = this.rootElement.querySelector(`${this.elementID} .green`);
        return element.animate({
            left: ['-154px', '-154px', '278px', '278px'],
            easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "ease-in-out"],
            offset: [0, 0.5, 0.75, 1],
          },
          {
            duration: this.duration,
            composite: FlowSoloTimeline.composite.REPLACE,
            fill: FlowSoloTimeline.fill.FORWARDS
          }
        )
    }white_leftTrack() {
        const element = this.rootElement.querySelector(`${this.elementID} .white`);
        return element.animate({
            left: ['-154px', '-154px', '278px'],
            easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)"],
            offset: [0, 0.75, 1],
          },
          {
            duration: this.duration,
            composite: FlowSoloTimeline.composite.REPLACE,
            fill: FlowSoloTimeline.fill.FORWARDS
          }
        )
    }
        /**
        * Creates and returns all animations for this timeline.
        */
        createAllAnimations() {
            return [
                this.artboardAnimation(),
                this.pink_leftTrack(),
                this.yellow_leftTrack(),
                this.green_leftTrack(),
                this.white_leftTrack(),
            ].flat()
        }
}

// https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite
    FlowSoloTimeline.composite = {
        ADD: 'add',
        REPLACE: 'replace',
        ACCUMULATE: 'accumulate',
    }

// https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill
    FlowSoloTimeline.fill = {
        NONE: 'none',
        FORWARDS: 'forwards',
        BACKWARDS: 'backwards',
        BOTH: 'both',
        AUTO: 'auto',
    }

Object.freeze(FlowSoloTimeline)