stripe-gradient
Advanced tools
Comparing version 1.0.1-canary.1 to 1.0.1-canary.2
@@ -279,3 +279,3 @@ function $parcel$export(e, n, v, s) { | ||
//Sets initial properties | ||
function $4559ecf940edc78d$export$f1e1789686576879(object, propertyName, val) { | ||
function $4559ecf940edc78d$export$aba8e698f38090e0(object, propertyName, val) { | ||
return propertyName in object ? Object.defineProperty(object, propertyName, { | ||
@@ -305,3 +305,3 @@ value: val, | ||
constructor(...t){ | ||
(0, $4559ecf940edc78d$export$f1e1789686576879)(this, "el", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "cssVarRetries", 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "maxCssVarRetries", 200), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "angle", 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isLoadedClass", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isScrolling", !1), /*e(this, "isStatic", o.disableAmbientAnimations()),*/ (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "scrollingTimeout", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "scrollingRefreshDelay", 200), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isIntersecting", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "shaderFiles", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "vertexShader", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "sectionColors", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "computedCanvasStyle", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "conf", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "uniforms", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "t", 1253106), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "last", 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "width", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "minWidth", 1111), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "height", 600), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "xSegCount", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "ySegCount", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "mesh", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "material", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "geometry", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "minigl", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "scrollObserver", void 0), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "amp", 320), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "seed", 5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "freqX", 14e-5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "freqY", 29e-5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "freqDelta", 1e-5), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "activeColors", [ | ||
(0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "el", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "cssVarRetries", 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "maxCssVarRetries", 200), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "angle", 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isLoadedClass", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isScrolling", !1), /*setInitialProperty(this, "isStatic", o.disableAmbientAnimations()),*/ (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "scrollingTimeout", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "scrollingRefreshDelay", 200), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isIntersecting", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "shaderFiles", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "vertexShader", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "sectionColors", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "computedCanvasStyle", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "conf", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "uniforms", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "t", 1253106), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "last", 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "width", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "minWidth", 1111), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "height", 600), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "xSegCount", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "ySegCount", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "mesh", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "material", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "geometry", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "minigl", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "scrollObserver", void 0), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "amp", 320), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "seed", 5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "freqX", 14e-5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "freqY", 29e-5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "freqDelta", 1e-5), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "activeColors", [ | ||
1, | ||
@@ -311,13 +311,13 @@ 1, | ||
1 | ||
]), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isMetaKey", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isGradientLegendVisible", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "isMouseDown", !1), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleScroll", ()=>{ | ||
clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.pause()); | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleScrollEnd", ()=>{ | ||
]), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isMetaKey", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isGradientLegendVisible", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "isMouseDown", !1), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleScroll", ()=>{ | ||
clearTimeout(this.scrollingTimeout), this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay), this.isGradientLegendVisible && this.hideGradientLegend(), this.conf.playing && (this.isScrolling = !0, this.paussetInitialProperty()); | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleScrollEnd", ()=>{ | ||
this.isScrolling = !1, this.isIntersecting && this.play(); | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "resize", ()=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "resize", ()=>{ | ||
this.width = window.innerWidth, this.minigl.setSize(this.width, this.height), this.minigl.setOrthographicCamera(), this.xSegCount = Math.ceil(this.width * this.conf.density[0]), this.ySegCount = Math.ceil(this.height * this.conf.density[1]), this.mesh.geometry.setTopology(this.xSegCount, this.ySegCount), this.mesh.geometry.setSize(this.width, this.height), this.mesh.material.uniforms.u_shadow_power.value = this.width < 600 ? 5 : 6; | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleMouseDown", (e)=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleMouseDown", (e)=>{ | ||
this.isGradientLegendVisible && (this.isMetaKey = e.metaKey, this.isMouseDown = !0, !1 === this.conf.playing && requestAnimationFrame(this.animate)); | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "handleMouseUp", ()=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "handleMouseUp", ()=>{ | ||
this.isMouseDown = !1; | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "animate", (e)=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "animate", (e)=>{ | ||
if (!this.shouldSkipFrame(e) || this.isMouseDown) { | ||
@@ -332,11 +332,11 @@ if (this.t += Math.min(e - this.last, 1e3 / 15), this.last = e, this.isMouseDown) { | ||
(this.conf.playing || this.isMouseDown) && requestAnimationFrame(this.animate); | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "addIsLoadedClass", ()=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "addIsLoadedClass", ()=>{ | ||
/*this.isIntersecting && */ !this.isLoadedClass && (this.isLoadedClass = !0, this.el.classList.add("isLoaded"), setTimeout(()=>{ | ||
this.el.parentElement.classList.add("isLoaded"); | ||
}, 3e3)); | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "pause", ()=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "pause", ()=>{ | ||
this.conf.playing = false; | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "play", ()=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "play", ()=>{ | ||
requestAnimationFrame(this.animate), this.conf.playing = true; | ||
}), (0, $4559ecf940edc78d$export$f1e1789686576879)(this, "initGradient", (selector)=>{ | ||
}), (0, $4559ecf940edc78d$export$aba8e698f38090e0)(this, "initGradient", (selector)=>{ | ||
this.el = document.querySelector(selector); | ||
@@ -343,0 +343,0 @@ this.connect(); |
{ | ||
"name": "stripe-gradient", | ||
"version": "1.0.1-canary.1", | ||
"version": "1.0.1-canary.2", | ||
"author": "Kyle Hasty <contact@kylehasty.com>", | ||
@@ -19,2 +19,3 @@ "description": "Stripe WebGl Gradient Animation", | ||
"scripts": { | ||
"dev": "parcel example/index.html", | ||
"watch": "parcel watch", | ||
@@ -21,0 +22,0 @@ "build": "parcel build", |
@@ -37,1 +37,8 @@ # Stripe WebGl Gradient Animation | ||
``` | ||
## Local Dev | ||
```sh | ||
yarn install | ||
yarn dev | ||
``` |
import MiniGl from './MiniGl' | ||
import { normalizeColor, e } from './utils' | ||
import { normalizeColor, setInitialProperty } from './utils' | ||
@@ -21,48 +21,48 @@ /* | ||
constructor(...t) { | ||
e(this, 'el', void 0), | ||
e(this, 'cssVarRetries', 0), | ||
e(this, 'maxCssVarRetries', 200), | ||
e(this, 'angle', 0), | ||
e(this, 'isLoadedClass', !1), | ||
e(this, 'isScrolling', !1), | ||
/*e(this, "isStatic", o.disableAmbientAnimations()),*/ e(this, 'scrollingTimeout', void 0), | ||
e(this, 'scrollingRefreshDelay', 200), | ||
e(this, 'isIntersecting', !1), | ||
e(this, 'shaderFiles', void 0), | ||
e(this, 'vertexShader', void 0), | ||
e(this, 'sectionColors', void 0), | ||
e(this, 'computedCanvasStyle', void 0), | ||
e(this, 'conf', void 0), | ||
e(this, 'uniforms', void 0), | ||
e(this, 't', 1253106), | ||
e(this, 'last', 0), | ||
e(this, 'width', void 0), | ||
e(this, 'minWidth', 1111), | ||
e(this, 'height', 600), | ||
e(this, 'xSegCount', void 0), | ||
e(this, 'ySegCount', void 0), | ||
e(this, 'mesh', void 0), | ||
e(this, 'material', void 0), | ||
e(this, 'geometry', void 0), | ||
e(this, 'minigl', void 0), | ||
e(this, 'scrollObserver', void 0), | ||
e(this, 'amp', 320), | ||
e(this, 'seed', 5), | ||
e(this, 'freqX', 14e-5), | ||
e(this, 'freqY', 29e-5), | ||
e(this, 'freqDelta', 1e-5), | ||
e(this, 'activeColors', [1, 1, 1, 1]), | ||
e(this, 'isMetaKey', !1), | ||
e(this, 'isGradientLegendVisible', !1), | ||
e(this, 'isMouseDown', !1), | ||
e(this, 'handleScroll', () => { | ||
setInitialProperty(this, 'el', void 0), | ||
setInitialProperty(this, 'cssVarRetries', 0), | ||
setInitialProperty(this, 'maxCssVarRetries', 200), | ||
setInitialProperty(this, 'angle', 0), | ||
setInitialProperty(this, 'isLoadedClass', !1), | ||
setInitialProperty(this, 'isScrolling', !1), | ||
/*setInitialProperty(this, "isStatic", o.disableAmbientAnimations()),*/ setInitialProperty(this, 'scrollingTimeout', void 0), | ||
setInitialProperty(this, 'scrollingRefreshDelay', 200), | ||
setInitialProperty(this, 'isIntersecting', !1), | ||
setInitialProperty(this, 'shaderFiles', void 0), | ||
setInitialProperty(this, 'vertexShader', void 0), | ||
setInitialProperty(this, 'sectionColors', void 0), | ||
setInitialProperty(this, 'computedCanvasStyle', void 0), | ||
setInitialProperty(this, 'conf', void 0), | ||
setInitialProperty(this, 'uniforms', void 0), | ||
setInitialProperty(this, 't', 1253106), | ||
setInitialProperty(this, 'last', 0), | ||
setInitialProperty(this, 'width', void 0), | ||
setInitialProperty(this, 'minWidth', 1111), | ||
setInitialProperty(this, 'height', 600), | ||
setInitialProperty(this, 'xSegCount', void 0), | ||
setInitialProperty(this, 'ySegCount', void 0), | ||
setInitialProperty(this, 'mesh', void 0), | ||
setInitialProperty(this, 'material', void 0), | ||
setInitialProperty(this, 'geometry', void 0), | ||
setInitialProperty(this, 'minigl', void 0), | ||
setInitialProperty(this, 'scrollObserver', void 0), | ||
setInitialProperty(this, 'amp', 320), | ||
setInitialProperty(this, 'seed', 5), | ||
setInitialProperty(this, 'freqX', 14e-5), | ||
setInitialProperty(this, 'freqY', 29e-5), | ||
setInitialProperty(this, 'freqDelta', 1e-5), | ||
setInitialProperty(this, 'activeColors', [1, 1, 1, 1]), | ||
setInitialProperty(this, 'isMetaKey', !1), | ||
setInitialProperty(this, 'isGradientLegendVisible', !1), | ||
setInitialProperty(this, 'isMouseDown', !1), | ||
setInitialProperty(this, 'handleScroll', () => { | ||
clearTimeout(this.scrollingTimeout), | ||
(this.scrollingTimeout = setTimeout(this.handleScrollEnd, this.scrollingRefreshDelay)), | ||
this.isGradientLegendVisible && this.hideGradientLegend(), | ||
this.conf.playing && ((this.isScrolling = !0), this.pause()) | ||
this.conf.playing && ((this.isScrolling = !0), this.paussetInitialProperty()) | ||
}), | ||
e(this, 'handleScrollEnd', () => { | ||
setInitialProperty(this, 'handleScrollEnd', () => { | ||
;(this.isScrolling = !1), this.isIntersecting && this.play() | ||
}), | ||
e(this, 'resize', () => { | ||
setInitialProperty(this, 'resize', () => { | ||
;(this.width = window.innerWidth), | ||
@@ -77,10 +77,10 @@ this.minigl.setSize(this.width, this.height), | ||
}), | ||
e(this, 'handleMouseDown', (e) => { | ||
setInitialProperty(this, 'handleMouseDown', (e) => { | ||
this.isGradientLegendVisible && | ||
((this.isMetaKey = e.metaKey), (this.isMouseDown = !0), !1 === this.conf.playing && requestAnimationFrame(this.animate)) | ||
}), | ||
e(this, 'handleMouseUp', () => { | ||
setInitialProperty(this, 'handleMouseUp', () => { | ||
this.isMouseDown = !1 | ||
}), | ||
e(this, 'animate', (e) => { | ||
setInitialProperty(this, 'animate', (e) => { | ||
if (!this.shouldSkipFrame(e) || this.isMouseDown) { | ||
@@ -100,3 +100,3 @@ if (((this.t += Math.min(e - this.last, 1e3 / 15)), (this.last = e), this.isMouseDown)) { | ||
}), | ||
e(this, 'addIsLoadedClass', () => { | ||
setInitialProperty(this, 'addIsLoadedClass', () => { | ||
/*this.isIntersecting && */ !this.isLoadedClass && | ||
@@ -109,9 +109,9 @@ ((this.isLoadedClass = !0), | ||
}), | ||
e(this, 'pause', () => { | ||
setInitialProperty(this, 'pause', () => { | ||
this.conf.playing = false | ||
}), | ||
e(this, 'play', () => { | ||
setInitialProperty(this, 'play', () => { | ||
requestAnimationFrame(this.animate), (this.conf.playing = true) | ||
}), | ||
e(this, 'initGradient', (selector) => { | ||
setInitialProperty(this, 'initGradient', (selector) => { | ||
this.el = document.querySelector(selector) | ||
@@ -118,0 +118,0 @@ this.connect() |
@@ -14,3 +14,3 @@ //Converting colors to proper format | ||
//Sets initial properties | ||
function e(object, propertyName, val) { | ||
function setInitialProperty(object, propertyName, val) { | ||
return ( | ||
@@ -29,2 +29,2 @@ propertyName in object | ||
export { normalizeColor, e } | ||
export { normalizeColor, setInitialProperty } |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
85474
13
1355
44