Try Flow For Yourself
The timeline code for the Design Stripe animation is nearly 1000 lines long! Despite the length, using the Web Animations API, playback of this animation is fast and performant in all modern browsers.
If you want to learn how we created this animation, you can follow along with a few short Flowcasts starting with FC 41: Designstripe Motion Graphics Part 1.
This timeline is 6.5 seconds long, contains 57 property animations and includes a handful of SVG animations.
It’s possible to write this all by hand, but … come on.
class DesignStripeTimeline {
/**
* @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 6500 }
loadFillImages() {
let pattern;
}
loadSVGAnimations() {
this.loadSVGShapeAnimations()
this.loadSVGShapeMaskAnimations()
}
loadSVGShapeAnimations() {
// Path Animations
let path;
path = this.rootElement.getElementById("path_43-path")
path.d = "M0,20.92c0,11.54,9.39,20.92,20.92,20.92 11.54,0,20.92,-9.38,20.92,-20.92 0,-11.53,-9.38,-20.92,-20.92,-20.92 -11.64,0,-20.92,9.39,-20.92,20.92 0,0,0,0,0,0zM0,20.92"
path.innerHTML = `
<animate
attributeName="d"
values="M0,20.92c0,11.54,9.39,20.92,20.92,20.92 11.54,0,20.92,-9.38,20.92,-20.92 0,-11.53,-9.38,-20.92,-20.92,-20.92 -11.64,0,-20.92,9.39,-20.92,20.92 0,0,0,0,0,0zM0,20.92;M0,20.92c0,11.54,9.39,20.92,20.92,20.92 11.54,0,20.92,-9.38,20.92,-20.92 0,-11.53,-9.38,-20.92,-20.92,-20.92 -11.64,0,-20.92,9.39,-20.92,20.92 0,0,0,0,0,0zM0,20.92;M0,27.4c0,15.115,12.299,27.4,27.4,27.4 15.115,0,27.4,-12.285,27.4,-27.4 0,-15.101,-12.285,-27.4,-27.4,-27.4 -15.246,0,-27.4,12.299,-27.4,27.4 0,0,0,0,0,0zM0,27.4;M0,20.92c0,11.54,9.39,20.92,20.92,20.92 11.54,0,20.92,-9.38,20.92,-20.92 0,-11.53,-9.38,-20.92,-20.92,-20.92 -11.64,0,-20.92,9.39,-20.92,20.92 0,0,0,0,0,0zM0,20.92;M0,20.92c0,11.54,9.39,20.92,20.92,20.92 11.54,0,20.92,-9.38,20.92,-20.92 0,-11.53,-9.38,-20.92,-20.92,-20.92 -11.64,0,-20.92,9.39,-20.92,20.92 0,0,0,0,0,0zM0,20.92"
dur="6.5s"
fill="freeze"
calcMode="spline"
keyTimes="0;0.975385;0.984615;0.995385;1"
keySplines="0 0 1 1;0.215 0.61 0.355 1;0.55 0.055 0.675 0.19;0.42 0 0.58 1"
/>
`
path = this.rootElement.getElementById("background_1-path")
path.d = "M10.504,8.6c0,0,-9.418,0,-9.418,0 -0.598,0,-1.086,-0.488,-1.086,-1.085 0,0,0,-6.429,0,-6.429 0,-0.598,0.488,-1.085,1.086,-1.085 0,0,9.418,0,9.418,0 0.598,0,1.086,0.488,1.086,1.085 0,0,0,6.429,0,6.429 0,0.598,-0.487,1.085,-1.086,1.085 0,0,0,0,0,0zM10.504,8.6"
path.innerHTML = `
<animate
attributeName="d"
values="M10.504,8.6c0,0,-9.418,0,-9.418,0 -0.598,0,-1.086,-0.488,-1.086,-1.085 0,0,0,-6.429,0,-6.429 0,-0.598,0.488,-1.085,1.086,-1.085 0,0,9.418,0,9.418,0 0.598,0,1.086,0.488,1.086,1.085 0,0,0,6.429,0,6.429 0,0.598,-0.487,1.085,-1.086,1.085 0,0,0,0,0,0zM10.504,8.6;M10.504,8.6c0,0,-9.418,0,-9.418,0 -0.598,0,-1.086,-0.488,-1.086,-1.085 0,0,0,-6.429,0,-6.429 0,-0.598,0.488,-1.085,1.086,-1.085 0,0,9.418,0,9.418,0 0.598,0,1.086,0.488,1.086,1.085 0,0,0,6.429,0,6.429 0,0.598,-0.487,1.085,-1.086,1.085 0,0,0,0,0,0zM10.504,8.6;M314,257.2c0,0,-281.54,0,-281.54,0 -17.88,0,-32.46,-14.58,-32.46,-32.46 0,0,0,-192.28,0,-192.28 0,-17.88,14.58,-32.46,32.46,-32.46 0,0,281.54,0,281.54,0 17.89,0,32.46,14.58,32.46,32.46 0,0,0,192.28,0,192.28 0,17.88,-14.57,32.46,-32.46,32.46 0,0,0,0,0,0zM314,257.2;M314,257.2c0,0,-281.54,0,-281.54,0 -17.88,0,-32.46,-14.58,-32.46,-32.46 0,0,0,-192.28,0,-192.28 0,-17.88,14.58,-32.46,32.46,-32.46 0,0,281.54,0,281.54,0 17.89,0,32.46,14.58,32.46,32.46 0,0,0,192.28,0,192.28 0,17.88,-14.57,32.46,-32.46,32.46 0,0,0,0,0,0zM314,257.2"
dur="6.5s"
fill="freeze"
calcMode="spline"
keyTimes="0;0.424615;0.503077;1"
keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1"
/>
`
path = this.rootElement.getElementById("path_21-path")
path.d = "M361.755,723.51c199.733,0,361.705,-162.022,361.705,-361.755 0,-199.733,-161.972,-361.755,-361.705,-361.755 -199.733,0,-361.755,162.022,-361.755,361.755 0,199.733,162.022,361.755,361.755,361.755 0,0,0,0,0,0zM361.755,723.51"
path.innerHTML = `
<animate
attributeName="d"
values="M361.755,723.51c199.733,0,361.705,-162.022,361.705,-361.755 0,-199.733,-161.972,-361.755,-361.705,-361.755 -199.733,0,-361.755,162.022,-361.755,361.755 0,199.733,162.022,361.755,361.755,361.755 0,0,0,0,0,0zM361.755,723.51;M361.755,723.51c199.733,0,361.705,-162.022,361.705,-361.755 0,-199.733,-161.972,-361.755,-361.705,-361.755 -199.733,0,-361.755,162.022,-361.755,361.755 0,199.733,162.022,361.755,361.755,361.755 0,0,0,0,0,0zM361.755,723.51;M71.85,143.7c39.67,0,71.84,-32.18,71.84,-71.85 0,-39.67,-32.17,-71.85,-71.84,-71.85 -39.67,0,-71.85,32.18,-71.85,71.85 0,39.67,32.18,71.85,71.85,71.85 0,0,0,0,0,0zM71.85,143.7;M71.85,143.7c39.67,0,71.84,-32.18,71.84,-71.85 0,-39.67,-32.17,-71.85,-71.84,-71.85 -39.67,0,-71.85,32.18,-71.85,71.85 0,39.67,32.18,71.85,71.85,71.85 0,0,0,0,0,0zM71.85,143.7"
dur="6.5s"
fill="freeze"
calcMode="spline"
keyTimes="0;0.506154;0.583077;1"
keySplines="0 0 1 1;0.165 0.84 0.44 1;0.42 0 0.58 1"
/>
`
path = this.rootElement.getElementById("heart-path")
path.d = "M3.088,0.959c-0.023,0.046,-0.067,0.046,-0.09,0 -1.004,-2.12,-3.904,-0.342,-2.717,1.642 0.274,0.433,2.328,2.143,2.465,2.279 0.183,0.16,0.411,0.16,0.57,0 0.069,-0.068,2.032,-1.755,2.328,-2.075 1.46,-1.551,-1.186,-4.127,-2.555,-1.778 0,0,0,-0.068,0,-0.068zM3.088,0.959"
path.innerHTML = `
<animate
attributeName="d"
values="M3.088,0.959c-0.023,0.046,-0.067,0.046,-0.09,0 -1.004,-2.12,-3.904,-0.342,-2.717,1.642 0.274,0.433,2.328,2.143,2.465,2.279 0.183,0.16,0.411,0.16,0.57,0 0.069,-0.068,2.032,-1.755,2.328,-2.075 1.46,-1.551,-1.186,-4.127,-2.555,-1.778 0,0,0,-0.068,0,-0.068zM3.088,0.959;M3.088,0.959c-0.023,0.046,-0.067,0.046,-0.09,0 -1.004,-2.12,-3.904,-0.342,-2.717,1.642 0.274,0.433,2.328,2.143,2.465,2.279 0.183,0.16,0.411,0.16,0.57,0 0.069,-0.068,2.032,-1.755,2.328,-2.075 1.46,-1.551,-1.186,-4.127,-2.555,-1.778 0,0,0,-0.068,0,-0.068zM3.088,0.959;M41.907,13.025c-0.31,0.62,-0.911,0.62,-1.221,0 -13.631,-28.799,-52.982,-4.65,-36.881,22.299 3.72,5.88,31.591,29.109,33.451,30.959 2.48,2.17,5.58,2.17,7.74,0 0.93,-0.92,27.571,-23.839,31.591,-28.179 19.821,-21.059,-16.101,-56.052,-34.681,-24.153 0,0,0,-0.926,0,-0.926zM41.907,13.025;M41.907,13.025c-0.31,0.62,-0.911,0.62,-1.221,0 -13.631,-28.799,-52.982,-4.65,-36.881,22.299 3.72,5.88,31.591,29.109,33.451,30.959 2.48,2.17,5.58,2.17,7.74,0 0.93,-0.92,27.571,-23.839,31.591,-28.179 19.821,-21.059,-16.101,-56.052,-34.681,-24.153 0,0,0,-0.926,0,-0.926zM41.907,13.025"
dur="6.5s"
fill="freeze"
calcMode="spline"
keyTimes="0;0.544615;0.621538;1"
keySplines="0 0 1 1;0.215 0.61 0.355 1;0.42 0 0.58 1"
/>
`
path = this.rootElement.getElementById("path_3-path")
path.d = "M42.02,84.02c23.2,0,42.01,-18.81,42.01,-42.01 0,-23.2,-18.81,-42.01,-42.01,-42.01 -23.2,0,-42.02,18.81,-42.02,42.01 0,23.2,18.82,42.01,42.02,42.01 0,0,0,0,0,0zM42.02,84.02"
path.innerHTML = `
<animate
attributeName="d"
values="M42.02,84.02c23.2,0,42.01,-18.81,42.01,-42.01 0,-23.2,-18.81,-42.01,-42.01,-42.01 -23.2,0,-42.02,18.81,-42.02,42.01 0,23.2,18.82,42.01,42.02,42.01 0,0,0,0,0,0zM42.02,84.02;M42.02,84.02c23.2,0,42.01,-18.81,42.01,-42.01 0,-23.2,-18.81,-42.01,-42.01,-42.01 -23.2,0,-42.02,18.81,-42.02,42.01 0,23.2,18.82,42.01,42.02,42.01 0,0,0,0,0,0zM42.02,84.02;M30.004,59.99c16.566,0,29.996,-13.43,29.996,-29.995 0,-16.565,-13.431,-29.995,-29.996,-29.995 -16.566,0,-30.004,13.43,-30.004,29.995 0,16.565,13.438,29.995,30.004,29.995 0,0,0,0,0,0zM30.004,59.99;M42.02,84.02c23.2,0,42.01,-18.81,42.01,-42.01 0,-23.2,-18.81,-42.01,-42.01,-42.01 -23.2,0,-42.02,18.81,-42.02,42.01 0,23.2,18.82,42.01,42.02,42.01 0,0,0,0,0,0zM42.02,84.02;M42.02,84.02c23.2,0,42.01,-18.81,42.01,-42.01 0,-23.2,-18.81,-42.01,-42.01,-42.01 -23.2,0,-42.02,18.81,-42.02,42.01 0,23.2,18.82,42.01,42.02,42.01 0,0,0,0,0,0zM42.02,84.02"
dur="6.5s"
fill="freeze"
calcMode="spline"
keyTimes="0;0.0615385;0.0846154;0.107692;1"
keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1"
/>
`
// 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} .cloudbluetiny-svg`),
this.rootElement.querySelector(`${this.elementID} .cloudbluesmall-svg`),
this.rootElement.querySelector(`${this.elementID} .cloudbluebig-svg`),
this.rootElement.querySelector(`${this.elementID} .path-svg`),
this.rootElement.querySelector(`${this.elementID} .path_1-svg`),
this.rootElement.querySelector(`${this.elementID} .path_2-svg`),
this.rootElement.querySelector(`${this.elementID} .path_3-svg`),
this.rootElement.querySelector(`${this.elementID} .background-svg`),
this.rootElement.querySelector(`${this.elementID} .path_4-svg`),
this.rootElement.querySelector(`${this.elementID} .path_5-svg`),
this.rootElement.querySelector(`${this.elementID} .path_6-svg`),
this.rootElement.querySelector(`${this.elementID} .path_7-svg`),
this.rootElement.querySelector(`${this.elementID} .path_8-svg`),
this.rootElement.querySelector(`${this.elementID} .path_9-svg`),
this.rootElement.querySelector(`${this.elementID} .path_10-svg`),
this.rootElement.querySelector(`${this.elementID} .path_11-svg`),
this.rootElement.querySelector(`${this.elementID} .homeicon-svg`),
this.rootElement.querySelector(`${this.elementID} .path_12-svg`),
this.rootElement.querySelector(`${this.elementID} .path_13-svg`),
this.rootElement.querySelector(`${this.elementID} .path_14-svg`),
this.rootElement.querySelector(`${this.elementID} .path_15-svg`),
this.rootElement.querySelector(`${this.elementID} .path_16-svg`),
this.rootElement.querySelector(`${this.elementID} .path_17-svg`),
this.rootElement.querySelector(`${this.elementID} .path_18-svg`),
this.rootElement.querySelector(`${this.elementID} .path_19-svg`),
this.rootElement.querySelector(`${this.elementID} .path_20-svg`),
this.rootElement.querySelector(`${this.elementID} .tag-svg`),
this.rootElement.querySelector(`${this.elementID} .background_1-svg`),
this.rootElement.querySelector(`${this.elementID} .path_21-svg`),
this.rootElement.querySelector(`${this.elementID} .heart-svg`),
this.rootElement.querySelector(`${this.elementID} .line-svg`),
this.rootElement.querySelector(`${this.elementID} .dot1-svg`),
this.rootElement.querySelector(`${this.elementID} .dot2-svg`),
this.rootElement.querySelector(`${this.elementID} .dot3-svg`),
this.rootElement.querySelector(`${this.elementID} .cloudgreen-svg`),
this.rootElement.querySelector(`${this.elementID} .path_22-svg`),
this.rootElement.querySelector(`${this.elementID} .path_23-svg`),
this.rootElement.querySelector(`${this.elementID} .path_24-svg`),
this.rootElement.querySelector(`${this.elementID} .path_25-svg`),
this.rootElement.querySelector(`${this.elementID} .path_26-svg`),
this.rootElement.querySelector(`${this.elementID} .path_27-svg`),
this.rootElement.querySelector(`${this.elementID} .path_28-svg`),
this.rootElement.querySelector(`${this.elementID} .path_29-svg`),
this.rootElement.querySelector(`${this.elementID} .path_30-svg`),
this.rootElement.querySelector(`${this.elementID} .path_31-svg`),
this.rootElement.querySelector(`${this.elementID} .path_32-svg`),
this.rootElement.querySelector(`${this.elementID} .path_33-svg`),
this.rootElement.querySelector(`${this.elementID} .path_34-svg`),
this.rootElement.querySelector(`${this.elementID} .path_35-svg`),
this.rootElement.querySelector(`${this.elementID} .path_36-svg`),
this.rootElement.querySelector(`${this.elementID} .path_37-svg`),
this.rootElement.querySelector(`${this.elementID} .path_38-svg`),
this.rootElement.querySelector(`${this.elementID} .path_39-svg`),
this.rootElement.querySelector(`${this.elementID} .path_40-svg`),
this.rootElement.querySelector(`${this.elementID} .path_41-svg`),
this.rootElement.querySelector(`${this.elementID} .path_42-svg`),
this.rootElement.querySelector(`${this.elementID} .path_43-svg`),
]
}
cloudbluetiny_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cloudbluetiny`);
return element.animate({
left: ['806px', '806px', '916.13px', '867.82px', '867.82px'],
easing: ["linear", "cubic-bezier(0.165, 0.84, 0.44, 1)", "cubic-bezier(0.895, 0.03, 0.685, 0.22)", "ease-in-out"],
offset: [0, 0.523077, 0.570769, 0.627692, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
cloudbluetiny_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cloudbluetiny`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "linear", "ease-in-out"],
offset: [0, 0.521538, 0.523077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
cloudbluesmall_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cloudbluesmall`);
return element.animate({
left: ['650px', '650px', '521.56px', '521.56px'],
easing: ["linear", "cubic-bezier(0.645, 0.045, 0.355, 1)", "ease-in-out"],
offset: [0, 0.523077, 0.692308, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
cloudbluesmall_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cloudbluesmall`);
return element.animate({
transform: ['translate(-0%, -0%) rotate(-20deg)', 'translate(-0%, -0%) rotate(-20deg)', 'translate(-0%, -0%) rotate(0deg)', 'translate(-0%, -0%) rotate(0deg)'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.570769, 0.692308, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
cloudbluesmall_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cloudbluesmall`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "linear", "ease-in-out"],
offset: [0, 0.521538, 0.523077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
big_blue_cloud_group_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .big_blue_cloud_group`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "linear", "ease-in-out"],
offset: [0, 0.521538, 0.523077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
cloudbluebig_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cloudbluebig`);
return element.animate({
left: ['-595.01px', '-595.01px', '-103.01px', '-103.01px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.536923, 0.661538, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
cellphone_group_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cellphone_group`);
return element.animate({
top: ['1613px', '608.14px', '608.14px'],
easing: ["cubic-bezier(0.165, 0.84, 0.44, 1)", "ease-in-out"],
offset: [0, 0.0615385, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_3_widthTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_3`);
return element.animate({
width: ['84.03px', '84.03px', '60px', '84.03px', '84.03px'],
easing: ["linear", "ease-in-out", "ease-in-out", "ease-in-out"],
offset: [0, 0.0615385, 0.0846154, 0.107692, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_3_heightTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_3`);
return element.animate({
height: ['84.02px', '84.02px', '59.99px', '84.02px', '84.02px'],
easing: ["linear", "ease-in-out", "ease-in-out", "ease-in-out"],
offset: [0, 0.0615385, 0.0846154, 0.107692, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
background_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .background`);
return element.animate({
top: ['122px', '122px', '0px', '0px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.107692, 0.146154, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
hearticon_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .hearticon`);
return element.animate({
top: ['283px', '283px', '61.31px', '61.31px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.146154, 0.169231, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
money_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .money`);
return element.animate({
top: ['283px', '283px', '61.31px', '61.31px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.133846, 0.169231, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
browsericon_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .browsericon`);
return element.animate({
top: ['283px', '283px', '61.31px', '61.31px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.12, 0.169231, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
needle_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .needle`);
return element.animate({
transform: ['translate(-50%, -50%) rotate(180deg)', 'translate(-50%, -50%) rotate(180deg)', 'translate(-50%, -50%) rotate(0deg)', 'translate(-50%, -50%) rotate(0deg)'],
easing: ["linear", "cubic-bezier(0.68, -0.55, 0.265, 1.55)", "ease-in-out"],
offset: [0, 0.169231, 0.230769, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
homeicon_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .homeicon`);
return element.animate({
top: ['247px', '247px', '24.72px', '24.72px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.107692, 0.169231, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
thumbup_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .thumbup`);
return element.animate({
top: ['-13px', '-13px', '36.35px', '36.35px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.387692, 0.424615, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
thumbup_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .thumbup`);
return element.animate({
transform: ['translate(-70%, -15%) rotate(-180deg)', 'translate(-70%, -15%) rotate(-180deg)', 'translate(-70%, -15%) rotate(14.21deg)', 'translate(-70%, -15%) rotate(0deg)', 'translate(-70%, -15%) rotate(0deg)'],
easing: ["linear", "ease-out", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.387692, 0.433846, 0.475385, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
speechbubble_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .speechbubble`);
return element.animate({
left: ['184.15px', '184.15px', '254.15px', '254.15px'],
easing: ["linear", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.301538, 0.378462, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
speechbubble_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .speechbubble`);
return element.animate({
transform: ['translate(-50%, -150%) rotate(110deg)', 'translate(-50%, -150%) rotate(110deg)', 'translate(-50%, -150%) rotate(0deg)', 'translate(-50%, -150%) rotate(0deg)'],
easing: ["linear", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.301538, 0.378462, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_18_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_18`);
return element.animate({
left: ['20.52px', '20.52px', '10.52px', '20.52px', '20.52px'],
easing: ["linear", "ease-out", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.34, 0.355385, 0.378462, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_19_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_19`);
return element.animate({
left: ['49.48px', '49.48px', '29.48px', '49.48px', '49.48px'],
easing: ["linear", "ease-out", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.34, 0.361538, 0.383077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_20_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_20`);
return element.animate({
left: ['78.45px', '78.45px', '48.45px', '78.45px', '78.45px'],
easing: ["linear", "ease-out", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.34, 0.366154, 0.387692, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
tag_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .tag`);
return element.animate({
top: ['-70.75px', '-70.75px', '-46.36px', '-46.36px'],
easing: ["linear", "cubic-bezier(0.6, -0.28, 0.735, 0.045)", "ease-in-out"],
offset: [0, 0.230769, 0.307692, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
tag_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .tag`);
return element.animate({
transform: ['translate(-50%, -0%) rotate(-90deg)', 'translate(-50%, -0%) rotate(-90deg)', 'translate(-50%, -0%) rotate(0deg)', 'translate(-50%, -0%) rotate(0deg)'],
easing: ["linear", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.230769, 0.321538, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
background_1_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .background_1`);
return element.animate({
left: ['167.43px', '167.43px', '0px', '0px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.424615, 0.503077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
background_1_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .background_1`);
return element.animate({
top: ['124.3px', '124.3px', '0px', '0px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.424615, 0.503077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
background_1_widthTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .background_1`);
return element.animate({
width: ['11.59px', '11.59px', '346.46px', '346.46px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.424615, 0.503077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
background_1_heightTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .background_1`);
return element.animate({
height: ['8.6px', '8.6px', '257.2px', '257.2px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.424615, 0.503077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
background_1_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .background_1`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "cubic-bezier(0.165, 0.84, 0.44, 1)", "ease-in-out"],
offset: [0, 0.424615, 0.463077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
background_1_fillTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .background_1-svg`);
return element.animate({
fill: ['#FD0178', '#FD0178', '#FD0178', '#FFAE20', '#FFAE20'],
easing: ["linear", "linear", "linear", "ease-in-out"],
offset: [0, 0.424615, 0.506154, 0.507692, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
heartgroup_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .heartgroup`);
return element.animate({
opacity: [0, 0, 0, 1, 1],
easing: ["linear", "linear", "linear", "ease-in-out"],
offset: [0, 0.424615, 0.504615, 0.506154, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_21_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_21`);
return element.animate({
left: ['-184.45px', '-184.45px', '105.44px', '105.44px'],
easing: ["linear", "cubic-bezier(0.165, 0.84, 0.44, 1)", "ease-in-out"],
offset: [0, 0.506154, 0.583077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_21_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_21`);
return element.animate({
top: ['-201.87px', '-201.87px', '88.04px', '88.04px'],
easing: ["linear", "cubic-bezier(0.165, 0.84, 0.44, 1)", "ease-in-out"],
offset: [0, 0.506154, 0.583077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_21_widthTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_21`);
return element.animate({
width: ['723.46px', '723.46px', '143.69px', '143.69px'],
easing: ["linear", "cubic-bezier(0.165, 0.84, 0.44, 1)", "ease-in-out"],
offset: [0, 0.506154, 0.583077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_21_heightTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_21`);
return element.animate({
height: ['723.51px', '723.51px', '143.7px', '143.7px'],
easing: ["linear", "cubic-bezier(0.165, 0.84, 0.44, 1)", "ease-in-out"],
offset: [0, 0.506154, 0.583077, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
heart_widthTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .heart`);
return element.animate({
width: ['6.07px', '6.07px', '82.38px', '82.38px'],
easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "ease-in-out"],
offset: [0, 0.544615, 0.621538, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
heart_heightTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .heart`);
return element.animate({
height: ['5px', '5px', '67.91px', '67.91px'],
easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "ease-in-out"],
offset: [0, 0.544615, 0.621538, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
heart_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .heart`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "cubic-bezier(0.165, 0.84, 0.44, 1)", "ease-in-out"],
offset: [0, 0.544615, 0.6, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
line_strokedashoffsetTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .line-svg`);
return element.animate({
strokeDashoffset: [-0, -0, -1, -1],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.650769, 0.689231, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
dot1_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .dot1`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.583077, 0.621538, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
dot2_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .dot2`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.606154, 0.644615, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
dot3_opacityTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .dot3`);
return element.animate({
opacity: [0, 0, 1, 1],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.627692, 0.666154, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
green_cloud_group_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .green_cloud_group`);
return element.animate({
left: ['1295.99px', '1295.99px', '1140.99px', '1140.99px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.713846, 0.82, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
cloudgreen_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .cloudgreen`);
return element.animate({
left: ['371px', '371px', '46px', '46px'],
easing: ["linear", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.664615, 0.82, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
thumbdowngroup_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .thumbdowngroup`);
return element.animate({
transform: ['translate(-0%, -50%) rotate(-50deg)', 'translate(-0%, -50%) rotate(-50deg)', 'translate(-0%, -50%) rotate(0deg)', 'translate(-0%, -50%) rotate(0deg)'],
easing: ["linear", "cubic-bezier(0.175, 0.885, 0.32, 1.275)", "ease-in-out"],
offset: [0, 0.541538, 0.872308, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
thumbdown_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .thumbdown`);
return element.animate({
transform: ['translate(-50%, -50%) rotate(-720deg)', 'translate(-50%, -50%) rotate(-720deg)', 'translate(-50%, -50%) rotate(0deg)', 'translate(-50%, -50%) rotate(0deg)'],
easing: ["linear", "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "ease-in-out"],
offset: [0, 0.541538, 0.818462, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
globe_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .globe`);
return element.animate({
left: ['-185px', '-185px', '452.42px', '452.42px'],
easing: ["linear", "ease-out", "ease-in-out"],
offset: [0, 0.681538, 0.813846, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
globe_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .globe`);
return element.animate({
top: ['77px', '77px', '619.32px', '619.32px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.704615, 0.813846, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
globe_transformTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .globe`);
return element.animate({
transform: ['translate(-50%, -50%) rotate(0deg)', 'translate(-50%, -50%) rotate(0deg)', 'translate(-50%, -50%) rotate(720deg)', 'translate(-50%, -50%) rotate(720deg)'],
easing: ["linear", "cubic-bezier(0.25, 0.46, 0.45, 0.94)", "ease-in-out"],
offset: [0, 0.681538, 0.813846, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
hand_copy_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .hand_copy`);
return element.animate({
top: ['1372px', '1372px', '821.13px', '855.99px', '855.99px'],
easing: ["linear", "cubic-bezier(0.55, 0.055, 0.675, 0.19)", "cubic-bezier(0.68, -0.55, 0.265, 1.55)", "ease-in-out"],
offset: [0, 0.66, 0.766154, 0.813846, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
eyegroup_copy_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .eyegroup_copy`);
return element.animate({
left: ['487px', '487px', '529px', '529px'],
easing: ["linear", "ease-in-out", "ease-in-out"],
offset: [0, 0.9, 0.975385, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
eye_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .eye`);
return element.animate({
left: ['339px', '339px', '244px', '244px', '141px', '141px'],
easing: ["linear", "ease-in-out", "ease-in-out", "ease-in-out", "ease-in-out"],
offset: [0, 0.718462, 0.78, 0.841538, 0.88, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_43_leftTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_43`);
return element.animate({
left: ['76.08px', '76.08px', '54px', '54px', '98px', '98px', '76.08px', '69.6px', '76.08px', '76.08px'],
easing: ["linear", "ease-in-out", "ease-in-out", "ease-in-out", "ease-in-out", "ease-in-out", "cubic-bezier(0.215, 0.61, 0.355, 1)", "cubic-bezier(0.55, 0.055, 0.675, 0.19)", "ease-in-out"],
offset: [0, 0.78, 0.818462, 0.88, 0.918462, 0.936923, 0.975385, 0.984615, 0.995385, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_43_topTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_43`);
return element.animate({
top: ['37px', '37px', '30.52px', '37px', '37px'],
easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "cubic-bezier(0.55, 0.055, 0.675, 0.19)", "ease-in-out"],
offset: [0, 0.975385, 0.984615, 0.995385, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_43_widthTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_43`);
return element.animate({
width: ['41.84px', '41.84px', '54.8px', '41.84px', '41.84px'],
easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "cubic-bezier(0.55, 0.055, 0.675, 0.19)", "ease-in-out"],
offset: [0, 0.975385, 0.984615, 0.995385, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
path_43_heightTrack() {
const element = this.rootElement.querySelector(`${this.elementID} .path_43`);
return element.animate({
height: ['41.84px', '41.84px', '54.8px', '41.84px', '41.84px'],
easing: ["linear", "cubic-bezier(0.215, 0.61, 0.355, 1)", "cubic-bezier(0.55, 0.055, 0.675, 0.19)", "ease-in-out"],
offset: [0, 0.975385, 0.984615, 0.995385, 1],
},
{
duration: this.duration,
composite: DesignStripeTimeline.composite.REPLACE,
fill: DesignStripeTimeline.fill.FORWARDS
}
)
}
/**
* Creates and returns all animations for this timeline.
*/
createAllAnimations() {
return [
this.cloudbluetiny_leftTrack(),
this.cloudbluetiny_opacityTrack(),
this.cloudbluesmall_leftTrack(),
this.cloudbluesmall_transformTrack(),
this.cloudbluesmall_opacityTrack(),
this.big_blue_cloud_group_opacityTrack(),
this.cloudbluebig_leftTrack(),
this.cellphone_group_topTrack(),
this.path_3_widthTrack(),
this.path_3_heightTrack(),
this.background_topTrack(),
this.hearticon_topTrack(),
this.money_topTrack(),
this.browsericon_topTrack(),
this.needle_transformTrack(),
this.homeicon_topTrack(),
this.thumbup_topTrack(),
this.thumbup_transformTrack(),
this.speechbubble_leftTrack(),
this.speechbubble_transformTrack(),
this.path_18_leftTrack(),
this.path_19_leftTrack(),
this.path_20_leftTrack(),
this.tag_topTrack(),
this.tag_transformTrack(),
this.background_1_leftTrack(),
this.background_1_topTrack(),
this.background_1_widthTrack(),
this.background_1_heightTrack(),
this.background_1_opacityTrack(),
this.background_1_fillTrack(),
this.heartgroup_opacityTrack(),
this.path_21_leftTrack(),
this.path_21_topTrack(),
this.path_21_widthTrack(),
this.path_21_heightTrack(),
this.heart_widthTrack(),
this.heart_heightTrack(),
this.heart_opacityTrack(),
this.line_strokedashoffsetTrack(),
this.dot1_opacityTrack(),
this.dot2_opacityTrack(),
this.dot3_opacityTrack(),
this.green_cloud_group_leftTrack(),
this.cloudgreen_leftTrack(),
this.thumbdowngroup_transformTrack(),
this.thumbdown_transformTrack(),
this.globe_leftTrack(),
this.globe_topTrack(),
this.globe_transformTrack(),
this.hand_copy_topTrack(),
this.eyegroup_copy_leftTrack(),
this.eye_leftTrack(),
this.path_43_leftTrack(),
this.path_43_topTrack(),
this.path_43_widthTrack(),
this.path_43_heightTrack(),
].flat()
}
}
// https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite
DesignStripeTimeline.composite = {
ADD: 'add',
REPLACE: 'replace',
ACCUMULATE: 'accumulate',
}
// https://developer.mozilla.org/en-US/docs/Web/API/EffectTiming/fill
DesignStripeTimeline.fill = {
NONE: 'none',
FORWARDS: 'forwards',
BACKWARDS: 'backwards',
BOTH: 'both',
AUTO: 'auto',
}
Object.freeze(DesignStripeTimeline)
Love UI Animation? Sign up to receive the latest news, articles, tutorials and resources.
We're diligent and don't spam.MovingUI is a publication sponsered by FLOW focues on UI animation for IOS and the web...
Learn the best ways to use motion to help sell your work and step-up your portfolio.
Read on Medium
result(s) found for “”.
