Awesome Scroll Effects In JavaScript – lax.js

Category: Animation , Javascript , Recommended | December 29, 2020
Author: alexfoxy
Views Total: 1,420 views
Official Page: Go to website
Last Update: December 29, 2020
License: MIT

Preview:

Awesome Scroll Effects In JavaScript – lax.js

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.

  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

You Might Be Interested In:


One thought on “Awesome Scroll Effects In JavaScript – lax.js

  1. Mark

    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.

    Reply

Leave a Reply