mirror of
https://github.com/alexfoxy/lax.js.git
synced 2026-04-24 03:01:10 -04:00
Compare commits
19 Commits
master
...
dependabot
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f0723a461a | ||
|
|
3f3284b3a5 | ||
|
|
81a2232ba8 | ||
|
|
4e5185ddde | ||
|
|
7a7a1a8260 | ||
|
|
4468069d8f | ||
|
|
dc69c3226f | ||
|
|
94f9cf896f | ||
|
|
c950ec4ce4 | ||
|
|
72f5c19808 | ||
|
|
c9e213c766 | ||
|
|
a67afd4671 | ||
|
|
4a484c91d8 | ||
|
|
4d778193d9 | ||
|
|
75f8c2df7f | ||
|
|
7aa04ec24c | ||
|
|
c3007562a8 | ||
|
|
5abe2aaed5 | ||
|
|
1a65068e7e |
18
README.md
18
README.md
@@ -110,7 +110,7 @@ The easiest way to get started is to use presets via html classes. For example:
|
||||
<div class="lax lax_preset_fadeIn:50:100 lax_preset_spin"></div>
|
||||
```
|
||||
|
||||
Multiple presets can be chained together and they can be customised to suit your needs. Use the [preset explorer](https://alexfox.dev/lax.js/preset-explorer) to explore effects and see a simple example [here](https://alexfox.dev/lax.js/html-inline).
|
||||
Multiple presets can be chained together and they can be customised to suit your needs. Use the [preset explorer](https://alexfox.dev/lax.js/preset-explorer) to explore effects and see a simple example [here](https://alexfox.dev/lax.js/examples/html-inline).
|
||||
|
||||
## DOM behavior and usage with Frameworks
|
||||
|
||||
@@ -177,6 +177,20 @@ Add static CSS to each element, for example:
|
||||
}
|
||||
```
|
||||
|
||||
#### `elements: Array<DOM nodes>`
|
||||
|
||||
Pass references to raw DOM elements to allow for more flexible selection patterns. In this case, a unique `selector` must still be passed as the first argument, however it does _not_ need to be a valid DOM selector.
|
||||
|
||||
This allows the library to tag the elements for removal later. Example:
|
||||
|
||||
```js
|
||||
const myDomElements = $('.selector')
|
||||
|
||||
{
|
||||
elements: myDomElements
|
||||
}
|
||||
```
|
||||
|
||||
#### `onUpdate: (driverValues: Object, domElement: DomElement) => void`
|
||||
A method called every frame with the current driverValues and domElement. This could be used to toggle classes on an element or set innerHTML. See it in action [here](https://alexfox.dev/lax.js/examples/on-update).
|
||||
|
||||
@@ -247,7 +261,7 @@ Within the maps you can use strings for simple formulas as well as use special v
|
||||
|
||||
See a list of available values [here](#special-values).
|
||||
|
||||
You can also use mobile breakpoints within animation maps for more flexibility.
|
||||
You can also use mobile breakpoints within driver value maps and animation maps for more flexibility.
|
||||
|
||||
```javascript
|
||||
scrollY: {
|
||||
|
||||
38
src/lax.js
38
src/lax.js
@@ -205,33 +205,33 @@
|
||||
easeOutQuint: t => 1 + (--t) * t * t * t * t,
|
||||
easeInOutQuint: t => t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t,
|
||||
easeOutBounce: t => {
|
||||
const n1 = 7.5625;
|
||||
const d1 = 2.75;
|
||||
const n1 = 7.5625
|
||||
const d1 = 2.75
|
||||
|
||||
if (t < 1 / d1) {
|
||||
return n1 * t * t;
|
||||
return n1 * t * t
|
||||
} else if (t < 2 / d1) {
|
||||
return n1 * (t -= 1.5 / d1) * t + 0.75;
|
||||
return n1 * (t -= 1.5 / d1) * t + 0.75
|
||||
} else if (t < 2.5 / d1) {
|
||||
return n1 * (t -= 2.25 / d1) * t + 0.9375;
|
||||
return n1 * (t -= 2.25 / d1) * t + 0.9375
|
||||
} else {
|
||||
return n1 * (t -= 2.625 / d1) * t + 0.984375;
|
||||
return n1 * (t -= 2.625 / d1) * t + 0.984375
|
||||
}
|
||||
},
|
||||
easeInBounce: t => {
|
||||
return 1 - easings.easeOutBounce(1 - t);
|
||||
return 1 - easings.easeOutBounce(1 - t)
|
||||
},
|
||||
easeOutBack: t => {
|
||||
const c1 = 1.70158;
|
||||
const c3 = c1 + 1;
|
||||
const c1 = 1.70158
|
||||
const c3 = c1 + 1
|
||||
|
||||
return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
|
||||
return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2)
|
||||
},
|
||||
easeInBack: t => {
|
||||
const c1 = 1.70158;
|
||||
const c3 = c1 + 1;
|
||||
const c1 = 1.70158
|
||||
const c3 = c1 + 1
|
||||
|
||||
return c3 * t * t * t - c1 * t * t;
|
||||
return c3 * t * t * t - c1 * t * t
|
||||
},
|
||||
}
|
||||
|
||||
@@ -460,7 +460,11 @@
|
||||
for (let key in styleBindings) {
|
||||
let [arr1 = [-1e9, 1e9], arr2 = [-1e9, 1e9], options = {}] = styleBindings[key]
|
||||
|
||||
const saveTransform = this.domElement.style.transform
|
||||
this.domElement.style.removeProperty("transform")
|
||||
const bounds = this.domElement.getBoundingClientRect()
|
||||
this.domElement.style.transform = saveTransform
|
||||
|
||||
const parsedArr1 = getArrayValues(arr1, windowWidth).map(i => parseValue(i, bounds, this.groupIndex))
|
||||
const parsedArr2 = getArrayValues(arr2, windowWidth).map(i => parseValue(i, bounds, this.groupIndex))
|
||||
|
||||
@@ -581,8 +585,8 @@
|
||||
})
|
||||
}
|
||||
|
||||
addElements = (selector, transforms, options) => {
|
||||
const domElements = document.querySelectorAll(selector)
|
||||
addElements = (selector, transforms, options = {}) => {
|
||||
const domElements = options.domElements || document.querySelectorAll(selector)
|
||||
|
||||
domElements.forEach((domElement, i) => {
|
||||
this.elements.push(new LaxElement(selector, this, domElement, transforms, i, options))
|
||||
@@ -606,7 +610,7 @@
|
||||
})()
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
|
||||
module.exports = laxInstance;
|
||||
module.exports = laxInstance
|
||||
else
|
||||
window.lax = laxInstance;
|
||||
window.lax = laxInstance
|
||||
})()
|
||||
|
||||
71
yarn.lock
71
yarn.lock
@@ -980,15 +980,15 @@ braces@~3.0.2:
|
||||
fill-range "^7.0.1"
|
||||
|
||||
browserslist@^4.14.5, browserslist@^4.14.6:
|
||||
version "4.14.7"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.7.tgz#c071c1b3622c1c2e790799a37bb09473a4351cb6"
|
||||
integrity sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==
|
||||
version "4.16.6"
|
||||
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
|
||||
integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
|
||||
dependencies:
|
||||
caniuse-lite "^1.0.30001157"
|
||||
colorette "^1.2.1"
|
||||
electron-to-chromium "^1.3.591"
|
||||
caniuse-lite "^1.0.30001219"
|
||||
colorette "^1.2.2"
|
||||
electron-to-chromium "^1.3.723"
|
||||
escalade "^3.1.1"
|
||||
node-releases "^1.1.66"
|
||||
node-releases "^1.1.71"
|
||||
|
||||
cache-base@^1.0.1:
|
||||
version "1.0.1"
|
||||
@@ -1013,10 +1013,10 @@ call-bind@^1.0.0:
|
||||
function-bind "^1.1.1"
|
||||
get-intrinsic "^1.0.0"
|
||||
|
||||
caniuse-lite@^1.0.30001157:
|
||||
version "1.0.30001157"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz#2d11aaeb239b340bc1aa730eca18a37fdb07a9ab"
|
||||
integrity sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==
|
||||
caniuse-lite@^1.0.30001219:
|
||||
version "1.0.30001228"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
|
||||
integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
|
||||
|
||||
chalk@^2.0.0:
|
||||
version "2.4.2"
|
||||
@@ -1091,10 +1091,10 @@ color-name@1.1.3:
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
|
||||
|
||||
colorette@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
|
||||
integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
|
||||
colorette@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
|
||||
integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
|
||||
|
||||
commander@^4.0.1:
|
||||
version "4.1.1"
|
||||
@@ -1184,10 +1184,10 @@ define-property@^2.0.2:
|
||||
is-descriptor "^1.0.2"
|
||||
isobject "^3.0.1"
|
||||
|
||||
electron-to-chromium@^1.3.591:
|
||||
version "1.3.592"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.592.tgz#4621521b223bf6e5469373528321e185d3c24670"
|
||||
integrity sha512-kGNowksvqQiPb1pUSQKpd8JFoGPLxYOwduNRCqCxGh/2Q1qE2JdmwouCW41lUzDxOb/2RIV4lR0tVIfboWlO9A==
|
||||
electron-to-chromium@^1.3.723:
|
||||
version "1.3.736"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.736.tgz#f632d900a1f788dab22fec9c62ec5c9c8f0c4052"
|
||||
integrity sha512-DY8dA7gR51MSo66DqitEQoUMQ0Z+A2DSXFi7tK304bdTVqczCAfUuyQw6Wdg8hIoo5zIxkU1L24RQtUce1Ioig==
|
||||
|
||||
escalade@^3.1.1:
|
||||
version "3.1.1"
|
||||
@@ -1585,11 +1585,9 @@ jsesc@~0.5.0:
|
||||
integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
|
||||
|
||||
json5@^2.1.2:
|
||||
version "2.1.3"
|
||||
resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
|
||||
integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
|
||||
dependencies:
|
||||
minimist "^1.2.5"
|
||||
version "2.2.3"
|
||||
resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
|
||||
integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
|
||||
|
||||
kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
|
||||
version "3.2.2"
|
||||
@@ -1616,9 +1614,9 @@ kind-of@^6.0.0, kind-of@^6.0.2:
|
||||
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
|
||||
|
||||
lodash@^4.17.19:
|
||||
version "4.17.20"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
|
||||
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
make-dir@^2.1.0:
|
||||
version "2.1.0"
|
||||
@@ -1666,11 +1664,6 @@ minimatch@^3.0.4:
|
||||
dependencies:
|
||||
brace-expansion "^1.1.7"
|
||||
|
||||
minimist@^1.2.5:
|
||||
version "1.2.5"
|
||||
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
|
||||
integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
|
||||
|
||||
mixin-deep@^1.2.0:
|
||||
version "1.3.2"
|
||||
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
|
||||
@@ -1711,10 +1704,10 @@ nanomatch@^1.2.9:
|
||||
snapdragon "^0.8.1"
|
||||
to-regex "^3.0.1"
|
||||
|
||||
node-releases@^1.1.66:
|
||||
version "1.1.66"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.66.tgz#609bd0dc069381015cd982300bae51ab4f1b1814"
|
||||
integrity sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==
|
||||
node-releases@^1.1.71:
|
||||
version "1.1.72"
|
||||
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
|
||||
integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
|
||||
|
||||
normalize-path@^2.1.1:
|
||||
version "2.1.1"
|
||||
@@ -1789,9 +1782,9 @@ path-is-absolute@^1.0.0:
|
||||
integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
|
||||
|
||||
path-parse@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
|
||||
integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
|
||||
integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
|
||||
|
||||
picomatch@^2.0.4, picomatch@^2.2.1:
|
||||
version "2.2.2"
|
||||
|
||||
Reference in New Issue
Block a user