Created
December 17, 2020 05:55
-
-
Save traviskirton/0e9a5ae7d38b4f71d53ee824b9a28eed to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@font-face { | |
font-family: 'TimeFont'; | |
src: url('../fonts/Roboto-Regular.ttf') format('truetype'); | |
} | |
.playback { | |
position: relative; | |
width: 425px; | |
height: 50px; | |
margin: 20px auto 0 auto; | |
background-color: transparent; | |
} | |
.slider { | |
width: 200px; | |
height: 24px; | |
margin: 0 auto; | |
} | |
.time { | |
font-family: 'TimeFont'; | |
font-size: 15px; | |
width: 75px; | |
height: 24px; | |
line-height: normal; | |
align-items: left; | |
justify-content: left; | |
display: inline-grid; | |
color: #8a8a8a; | |
} | |
.time { | |
float: left; | |
margin-top: 4px; | |
margin-left: 12px; | |
} | |
.controls { | |
margin-top: 15px; | |
height: 30px; | |
width: 100%; | |
} | |
.playPauseLoop { | |
width: 95px; | |
height: 30px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.playPauseContainer { | |
height: 30px; | |
width: 30px; | |
float: left; | |
} | |
.playPauseContainer.loop { | |
margin-right: 5px; | |
} | |
input[type=checkbox] { | |
display: none; | |
} | |
input[type=checkbox]:checked + .loopLabel { | |
opacity: 1; | |
} | |
.loopLabel { | |
background: url(../img/loop.svg) no-repeat; | |
background-size: contain; | |
content: ""; | |
height: 24px; | |
width: 22px; | |
display: inline-block; | |
padding: 0; | |
margin: 9px 0 0 0; | |
opacity: 0.33; | |
} | |
input[type=checkbox]:checked + .playPauseLabel { | |
background: url(../img/pause.svg); | |
background-size: contain; | |
} | |
.playPauseLabel { | |
background: url(../img/play.svg); | |
background-size: contain; | |
content: ""; | |
height: 30px; | |
width: 30px; | |
display: inline-block; | |
padding: 0; | |
} | |
input[type=range] { | |
position: relative; | |
display: block; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
width: 200px; | |
float: left; | |
cursor: default; | |
padding: 0; | |
height: 2px; | |
margin: 11px auto 0 auto; | |
background-color: #D8D8D8; | |
} | |
input[type=range]:focus { | |
outline: none; | |
} | |
input[type=range]::-webkit-slider-runnable-track { | |
height: 2px; | |
background: #d8d8d8; | |
border-radius: 1px; | |
cursor: default; | |
} | |
input[type=range]::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
height: 15px; | |
width: 15px; | |
margin: -6px 0 0 0; | |
overflow: visible; | |
background: url(../img/sliderThumb.svg) no-repeat; | |
} | |
/*------------------- MOZ -------------------*/ | |
/* Needs to be here, otherwise thumb styling doesn't work */ | |
input[type=range]::-moz-range-track {} | |
/* All the same stuff for Firefox */ | |
input[type=range]::-moz-range-thumb { | |
border-radius: 10px; | |
background-color: #FFF; | |
border-width: 2px; | |
border-style: solid; | |
border-color: #2974FF; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.flow-layer { | |
position: absolute; | |
overflow: visible; | |
box-sizing: border-box; | |
border-width: 0px; | |
} | |
.flow-bg { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
box-sizing: border-box; | |
border-width: 0px; | |
} | |
.flow-border { | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
box-sizing: border-box; | |
border-style: solid; | |
border-width: 0px; | |
} | |
#FlowSolo.flow-artboard { | |
width: 600px; | |
height: 150px; | |
overflow: visible; | |
position: relative; | |
padding: 0px; | |
margin: 0px auto; | |
background-color: #FFFFFF; | |
visibility: visible; | |
pointer-events: none; | |
} | |
#FlowSolo .pink { | |
width: 600px; | |
height: 150px; | |
left: -154px; | |
top: 75px; | |
transform: translate(-50%, -50%) rotate(0deg); | |
background-color: #00000000; | |
overflow: visible; | |
} | |
#FlowSolo .pink-svg { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
stroke: #FD0178; | |
fill: #FD0178; | |
stroke-miterlimit: 10; | |
stroke-width: 0px; | |
} | |
#FlowSolo .yellow { | |
width: 600px; | |
height: 150px; | |
left: -154px; | |
top: 75px; | |
transform: translate(-50%, -50%) rotate(0deg); | |
background-color: #00000000; | |
overflow: visible; | |
} | |
#FlowSolo .yellow-svg { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
stroke: #FD0178; | |
fill: #FFAE20; | |
stroke-miterlimit: 10; | |
stroke-width: 0px; | |
} | |
#FlowSolo .green { | |
width: 600px; | |
height: 150px; | |
left: -154px; | |
top: 75px; | |
transform: translate(-50%, -50%) rotate(0deg); | |
background-color: #00000000; | |
overflow: visible; | |
} | |
#FlowSolo .green-svg { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
stroke: #FD0178; | |
fill: #50E3C2; | |
stroke-miterlimit: 10; | |
stroke-width: 0px; | |
} | |
#FlowSolo .white { | |
width: 600px; | |
height: 150px; | |
left: -154px; | |
top: 75px; | |
transform: translate(-50%, -50%) rotate(0deg); | |
background-color: #00000000; | |
overflow: visible; | |
} | |
#FlowSolo .white-svg { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
stroke: #FD0178; | |
fill: #FFFFFF; | |
stroke-miterlimit: 10; | |
stroke-width: 0px; | |
} | |
#FlowSolo .wordmarkcutout { | |
width: 600px; | |
height: 150px; | |
left: 300px; | |
top: 75px; | |
transform: translate(-50%, -50%) rotate(0deg); | |
background-color: #00000000; | |
overflow: visible; | |
} | |
#FlowSolo .wordmarkcutout-svg { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
fill: #0000FF; | |
stroke-miterlimit: 10; | |
stroke-width: 0px; | |
} | |
path { | |
fill-rule: evenodd; | |
} | |
svg { | |
overflow: visible; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment