Awesome Scroll Effects In JavaScript – lax.js

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.

1. fadeIn
2. fadeOut
3. fadeInOut
4. scaleIn
5. scaleOut
6. scaleInOut
7. slideX
8. slideY
9. jiggle
10. seesaw
11. zigzag
12. hueRotate
13. spin
14. flipX
15. flipY
16. blurIn
17. blurOur
18. 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 example lax_preset_spin-400-360 should now be written as lax_preset_spin:400:360
• Bug fixes

v2.0.2 (11/17/2020)

• Replaced document.body.scrollTop and document.body.scrollLeft with window.scrollY and window.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