Author: | alexfoxy |
---|---|
Views Total: | 7,668 views |
Official Page: | Go to website |
Last Update: | December 29, 2020 |
License: | MIT |
Preview:

Description:
lax.js is a lightweight vanilla JavaScript library that provides 20+ awesome animations for elements when scrolling down and up.
Basic usage:
Install and import the lax.js.
# Yarn $ yarn add lax.js # NPM $ npm i lax.js --save
import lax from 'lax.js'
Or directly link to the main JavaScript file in the document.
window.onload = function() { lax.init() // Add a driver that we use to control our animations lax.addDriver('scrollY', function() { return document.body.scrollTop }) // Add animation bindings to elements lax.addElements('.selector', { scrollY: { translateX: [ ["elInY", "elCenterY", "elOutY"], [0, 'screenWidth/2', 'screenWidth'], ] } } })
Apply one or more animation to an element using the data_lax_preset
attribute. All possible animations.
- fadeIn
- fadeOut
- fadeInOut
- scaleIn
- scaleOut
- scaleInOut
- slideX
- slideY
- jiggle
- seesaw
- zigzag
- hueRotate
- spin
- flipX
- flipY
- blurIn
- blurOur
- blurInOut
<div class="lax lax_preset_fadeIn-50:100 lax_preset_spin"> Laxxx Example </div>
See the Readme for full usages and implement details.
Changelog:
v2.0.3 (12/29/2020)
- Breaking change, preset values are now delaminated using
:
instead of-
so that negative values cam be used. For examplelax_preset_spin-400-360
should now be written aslax_preset_spin:400:360
- Bug fixes
v2.0.2 (11/17/2020)
- Replaced
document.body.scrollTop
anddocument.body.scrollLeft
withwindow.scrollY
andwindow.scrollX
in example and documentation
v2.0.1 (11/14/2020)
- New javascript animation syntax, allowing for more advanced effect combos
- Use any value to drive animations, for example mouse position, time of day .. and of course scroll!
- Animations can be given inertia when scrolling
- Create custom CSS bindings
- Animation easings
- And much more..
v1.2.5 (10/16/2019)
- Bugfixed
v1.2.3 (04/05/2019)
- Added rotateX and rotateY transforms
v1.2.2 (04/04/2019)
- Fixed a problem with lax.addElement
v1.2.1 (04/03/2019)
- Fixed issue when resizing window
v1.2.0 (03/26/2019)
- Added functionality for responsive animations
- Added functionality for sprite sheet animations
- Breaking change: You must now add the lax class to any element you want to animate.
- Now inline style will be merged into animation
- Changed suggested set up to use window.requestAnimationFrame instead of binding to window scroll event
- Can now add loop, offset and speed options into custom animations
- Performance improvements and code tweaks
v1.1.0 (03/19/2019)
- changed data-lax-optimize to data-lax-use-gpu
- now use data-lax-optimize for optimising elements off screen
- added background position key
- added swing and speedy presets
v1.0.5 (03/19/2019)
- Improved support for react, vue.js and DOM manipulation
v1.0.4 (03/17/2019)
- Added
lax.populateElements()
for use on DOM updates, window size change etc
In your initialization code you are updating lax every requestAnimationFrame, not on scroll. There is a difference. This will sit idle and be continually executing the update code 60 (based on refresh) times a second.