Repository files navigation

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

>> DEMO <<

Lax.js 2.0 has been completely re-written with a focus on modularity and flexibility giving you more tools to create awesome animations.

• 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..

• Scroll effect
• Horizontal snap scroll
• Inertia
• Video/Gif playback
• Cursor position
• Text input
• Update HTML content
• Preset Explorer

• Setup
• Using presets
• Usage with UI frameworks
• Adding drivers
• Adding elements

• Custom animations
• Optimising performance

• CSS properties
• Special values
• Supported easings

# https://www.npmjs.com/package/lax.jsnpm install lax.jsyarn add lax.js

importlaxfrom'lax.js'

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

To implement lax you need to create at least onedriver, to provide values for animations, as well as the element animation bindings. Below is a simple example:

<!-- JS --><script>window.onload=function(){lax.init()// Add a driver that we use to control our animationslax.addDriver('scrollY',function(){returnwindow.scrollY})// Add animation bindings to elementslax.addElements('.selector',{scrollY:{translateX:[["elInY","elCenterY","elOutY"],[0,'screenWidth/2','screenWidth'],]}})}</script><!-- HTML --><divclass="selector">Hello</div>

The easiest way to get started is to use presets via html classes. For example:

<divclass="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 thepreset explorer to explore effects and see a simple examplehere.

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 or EmberJS, it is likely that you are adding elements after the initial window.onload. Because of this you will need to calllax.addElements when you add components to the DOM that you want to animate, andlax.removeElements when the component unmounts.

Please find a React examplehere. Other examples will be available soon for Vue.js and Angular.

Drivers provide the values thatdrive your animations. To set up a driver just calllax.addDriver with a name and a function which returns a number. This method is called every frame to calculate the animations so keep the method as computationallylight as possible. The example below will be the most common use case for lax which returns the scrollY position of the window.

lax.addDriver('scrollY',// Driver namefunction(laxFrame){returnwindow.scrollY// Value method},{}// Options)

If enabled, the driver will calculate the speed at which its value is changing. Used to add inertia to elements using theinertia element option.

See this in action in thehere.

By default each driver updates its value every animation frame, around ~60 times per second. You can use theframeStep to reduce frequency of the driver value updating. For example a value of2 would only update ~30 times per second and a value of60 would only update about once per second.

You can add lax animations to an element using theaddElements method:

lax.addElements('.selector',// Element selector rule{// Animation datascrollY:{opacity:[[0,100],[1,0]]}},{style:{}// Element options})

Add static CSS to each element, for example:

{transform:'200ms scale ease-in-out';}

Custom animations are defined using an object.

// Animation data{scrollY:{// Driver nametranslateX:[// CSS property['elInY','elOutY'],// Driver value map[0,'screenWidth'],// Animation value map{inertia:10// Options}],opacity:[// etc]}}

The name of the driver you want to use as a source of values to map to your animation, for example, the document's scrollY position. Read about adding drivershere.

The name of the CSS property you want to animate, for exampleopacity orrotate. See a list of supported propertieshere.

Some css properties, for examplebox-shadow, require a custom function to build the style string. To do this use thecssFn element option.

The value maps are used to interpolate the driver value and output a value for your CSS property. For example:

[0,200,800]// Driver value map[0,10,20]// Animation value map// Result|In|Out||---|---||0|0||100|5||200|10||500|15||800|20|

Within the maps you can use strings for simple formulas as well as use special values. e.g:

['elInY','elCenterY-200','elCenterY',

See a list of available valueshere.

You can also use mobile breakpoints within animation maps for more flexibility.

scrollY:{  translateX:[['elInY','elCenterY','elOutY'],{500:[10,20,50],// Screen width < 500900:[30,40,60],// Screen width > 500 and < 9001400:[30,40,60],// Screen width > 900},];}

Set this option to modulus the value from the driver, for example if you want to loop the animation value as the driver value continues to increase.

By default each animation updates its value every animation frame, around ~60 times per second. You can use theframeStep to reduce frequency of the animation updating. For example a value of2 would only update ~30 times per second and a value of60 would only update about once per second.

Use to add inertia to your animations. Use in combination with theinertiaEnabled driver option.

See inertia in actionhere.

Use in combination withinertia. If set toabsolute the inertia value will always be a positive number via theMath.abs operator.

Define the unit to be appended to the end of the value, for exampleFor examplepxdeg

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 actionhere.

The driver values are formatted as follows:

{scrollY:[// Drivr name100,// Driver value0// Driver inertia]}

Some CSS properties require more complex strings as values. For example,box-shadow has multiple values that could be modified by a lax animation.

// Box-shadow example(val)=>{return`${val}px${val}px${val}px rgba(0,0,0,0.5)`;};

Lax.js has been designed to be performant but there are a few things to bare in mind when creating your websites.

• Smaller elements perform better.
• Postionfixed andabsolute elements perform best as they do not trigger a layout change when updated.
• Off-screen elements do not need to be updated so consider that when creating your animation value maps.
• The css propertiesblur,hue-rotate andbrightness are graphically intensive and do not run as smoothly as the other available properties.