Repository files navigation

Simple & light weight (<3kb gzipped) vanilla javascript plugin to createsmooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

>>> DEMO <<<

>>> MARIO DEMO <<<

For those daring enough ;) there is an alpha version of lax.js 2.0 available. Have a play:https://github.com/alexfoxy/lax.js/tree/version-2

npm install lax.js

importlaxfrom'lax.js'

1. Add lax.js to your html

<scriptsrc="lib/lax.min.js"><!-- or via CDN --><scriptsrc="https://cdn.jsdelivr.net/npm/lax.js"></script>

2. Initialize the plugin

window.onload=function(){lax.setup()// initconstupdateLax=()=>{lax.update(window.scrollY)window.requestAnimationFrame(updateLax)}window.requestAnimationFrame(updateLax)}

3. Add class and attributes to the HTML tags you want to animate e.g.

<pclass="lax"data-lax-preset="spin fadeInOut">Look at me goooooo!</p>

4. Scroll and enjoy!

To increase performance lax.js indexes the list of elements to animate when the page loads. If you're using a library like React, vue.js or EmberJS, it is likely that you are adding elements after the initialwindow.onload. Because of this you will need to calllax.addElement(domElement) when you add components to the DOM that you want to animate.

See below for working examples:

• react
• react (using hooks)
• vue
• ember

You can also calllax.removeElement(domElement) when the component unmounts.

The easiest way to get started is to use the presets via thedata-lax-preset attribute. You can chain multiple presets together for e.g.data-lax-preset="blurOut fadeOut spin". Some presets also support an optional strength e.g.data-lax-preset="blurOut-50".

See the list ofSupported Presets for details.

You can easily create your own effects. Just add an attribute to your HTML tag (seeSupported Attribute Keys) with an array of values. These arrays take the format ofscrollPos val, scrollPos val, ... | option=val e.g:

<pclass="lax"data-lax-opacity="0 1, 100 1, 200 0 | loop=200">I start to fade out after the window scrolls 100pxand then I'm gone by 200px!</p>

By default thescrollPos iswindow.scrollY but you can use an element distance from the top of the screen instead. You can either pass in a selectordata-lax-anchor="#bio" or set it to use itselfdata-lax-anchor="self" (this is the default for all presets) e.g.

<pclass="lax"data-lax-opacity="200 1, 100 1, 0 0"data-lax-anchor="self">I start to fade out after I'm 100px away from the top of the windowand then I'm gone by the time I reach the top!</p>

You can use these instead of integer values for the scrollPos e.g.

<pclass="lax"data-lax-opacity="0 1, vh 0">I fade out as the page scrolls down andI'm gone when the page has scrolled the view port height!</p>

You can also use vanilla JS within( ) for calculations and access to more variables e.g.

<pclass="lax"data-lax-opacity="0 1, (document.body.scrollHeight*0.5) 0">I fade out as the page scrolls down andI'm gone when the page has scrolled 50%down the entire page height!</p>

You can pass options into your custom animations for more control e.g.

<pclass="lax"data-lax-opacity="0 1, 100 0, 200 100 | loop=200 offset=100 speed=2">I start at 0 opacity andfade in and out every 50px</p>

You can set multiple presets and animations for different screen widths. When setting up lax you need to pass in your screen width breakpoints e.g.

lax.setup({breakpoints:{small:0,large:992}})

Then you can define presets or transforms per breakpoint.

<pclass="lax"data-lax-preset_small="spin">I only spin when the screen is smaller than 992px.</p><pclass="lax"data-lax-scale_small="0 1, 500 0"data-lax-scale_large="0 1, 500 2">I shrink when the screen is smaller than 992px but grow when the screen is larger 992px.</p>

Transforms

Filters (note - these may be unperformant on low powered machines)

Other

You can create animations using sprite sheets. See a demohere.

Thedata-lax-sprite-data is required and formated like so[frameWidth, frameHeight, frameCount, columnCount, scrollStep]. You can either set the image using CSS or thedata-lax-sprite-image attribute. e.g.

<divclass="lax"data-lax-sprite-data="500,500,36,36,10"data-lax-sprite-image="./spritesheet.png"/>

You can turn a gif or a video into a sprite sheet with this tool:https://ezgif.com/gif-to-sprite

Note: current implimentation requires the element to be the same size as the frame width & height.

To avoid duplicate code you can define your own presets with a list of attributes e.g.

lax.addPreset("myCoolPreset",function(){return{"data-lax-opacity":"(-vh*0.8) 40, (-vh*0.6) 0","data-lax-rotate":"(-vh*2) 1000, (-vh*0.5) 0"}})

You can then access this preset like this:

<pclass="lax"data-lax-preset="myCoolPreset">I'm the coolest preset in the world 😎</p>

• Avoid nesting lax enabled elements within each other, you'll get better performance using lax with smaller elements in the dom tree.
• Avoid transforms on large elements, e.g. full screen backgrounds.
• By default elements that have opacity 0 aren't updated. You can either manually set up adata-lax-opacity to control this yourself or usedata-lax-optimize which will set the elements opacity to 0 when it goes off -screen.
• By default-webkit-backface-visibility: hidden; is added to your elements style to encourage the browser to render that object as a layer on the GPU and increase performance. To turn this off adddata-lax-use-gpu="false" to your element.

As some values (vh, vw, elh, elw) are calculated on load, when the screen size changes or rotates you might want to recalculate these. E.g.

window.addEventListener("resize", function() {lax.updateElements()});

Be warned, on mobile, a resize event is fired when you scroll and the toolbar is hidden so you might want to check if the width or orientation has changed.

Scroll wheels only increment the scroll position in steps which can cause the animations to look janky.

Only inline styles for transforms and filters will be merged in to the animation. Transforms and filters derived from CSS will be overwritten.

• Implement a tween for scroll wheels to remove reliance on smoothscroll
• A way to add weight/momentum to moving objecs
• More cool demos
• More concise read me for react / vue.js
• Support for sprite sheet animations