Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
npm install lax.jsSimple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.
---
- Setup
- Using presets
- Usage with UI frameworks
- Adding drivers
- Adding elements
- Custom animations
- Optimising performance
- CSS properties
- Special values
- Supported easings
``bashhttps://www.npmjs.com/package/lax.js
npm install lax.js
yarn add lax.js
`js`
import lax from 'lax.js'
`html`
To implement lax you need to create at least one _driver_, to provide values for animations, as well as the element animation bindings. Below is a simple example:
`html
Using presets
The easiest way to get started is to use presets via html classes. For example:
html
`Multiple presets can be chained together and they can be customised to suit your needs. Use the preset explorer to explore effects and see a simple example here.
DOM behavior and usage with Frameworks
To increase performance,
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 call lax.addElements when you add components to the DOM that you want to animate, and lax.removeElements when the component unmounts.Please find a React example here. Other examples will be available soon for Vue.js and Angular.
Adding drivers
Drivers provide the values that _drive_ your animations. To set up a driver just call
lax.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 computationally _light_ as possible. The example below will be the most common use case for lax which returns the scrollY position of the window.`javascript
lax.addDriver(
'scrollY', // Driver name
function(laxFrame) {
return window.scrollY // Value method
},
{ } // Options
)
`$3
####
If enabled, the driver will calculate the speed at which its value is changing. Used to add inertia to elements using the inertia element option.
See this in action in the here.
####
By default each driver updates its value every animation frame, around ~60 times per second. You can use the
to reduce frequency of the driver value updating. For example a value of 2 would only update ~30 times per second and a value of 60 would only update about once per second.Adding elements
You can add lax animations to an element using the
addElements method:`javascript
lax.addElements(
'.selector', // Element selector rule
{ // Animation data
scrollY: {
opacity: [
[0, 100],
[1, 0]
]
}
},
{
style: {} // Element options
}
)
`$3
####
Add static CSS to each element, for example:
css
{
transform: '200ms scale ease-in-out';
}
`####
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 action here.The driver values are formatted as follows:
js
{
scrollY: [ // Driver name
100, // Driver value
0 // Driver inertia
]
}
`Going deeper
Custom animations
Custom animations are defined using an object.javascript
// Animation data
{
scrollY: { // Driver name
translateX: [ // CSS property
['elInY', 'elOutY'], // Driver value map
[0, 'screenWidth'], // Animation value map
{
inertia: 10 // Options
}
],
opacity: [
// etc
]
}
}
`$3
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 drivers here.$3
The name of the CSS property you want to animate, for example or rotate. See a list of supported properties here.> Some CSS properties, for example
box-shadow, require a custom function to build the style string. To do this use the cssFn element option.$3
The value maps are used to interpolate the driver value and output a value for your CSS property. For example:`javascript
[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:
javascript
'elInY', 'elCenterY-200', 'elCenterY',
`See a list of available values [here.
You can also use mobile breakpoints within animation maps for more flexibility.
javascript
scrollY: {
translateX: [
['elInY', 'elCenterY', 'elOutY'],
{
500: [10, 20, 50], // Screen width < 500
900: [30, 40, 60], // Screen width > 500 and < 900
1400: [30, 40, 60], // Screen width > 900
},
];
}
`$3
####
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 the to reduce frequency of the animation updating. For example a value of 2 would only update ~30 times per second and a value of 60 would only update about once per second.####
inertia: number
Use to add inertia to your animations. Use in combination with the inertiaEnabled driver option.See inertia in action here.
####
Use in combination with . If set to absolute the inertia value will always be a positive number via the Math.abs operator.####
cssUnit: string = ""
Define the unit to be appended to the end of the value, for example
For example deg####
Some CSS properties require more complex strings as values. For example, has multiple values that could be modified by a lax animation.`javascript
// Box-shadow example
(val) => {
return ${val}px ${val}px ${val}px rgba(0,0,0,0.5);
};
`####
See a list of available values here.Optimising performance
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.
- Postion and absolute 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 properties blur, hue-rotate and brightness are graphically intensive and do not run as smoothly as the other available properties.Glossary
CSS properties
| name |
| ---------- |
| opacity |
| scaleX |
| scaleY |
| scale |
| skewX |
| skewY |
| skew |
| rotateX |
| rotateY |
| rotate |
| translateX |
| translateY |
| translateZ |
| blur |
| hue-rotate |
| brightness |
Special values
| key | value |
| ------------ | -------------------------------------------------------------------------------- |
| screenWidth | current width of the screen |
| screenHeight | current height of the screen |
| pageWidth | width of the document |
| pageHeight | height of the document |
| elWidth | width of the element |
| elHeight | height of the element |
| elInY | window scrollY position when element will appear at the bottom of the screen |
| elOutY | window scrollY position when element will disappear at the top of the screen |
| elCenterY | window scrollY position when element will be centered vertically on the screen |
| elInX | window scrollX position when element will appear at the right of the screen |
| elOutX | window scrollX position when element will disappear at the left of the screen |
| elCenterX | window scrollX position when element will be centered horizontally on the screen |
| index | index of the element when added using
lax.addElements` || name |
| -------------- |
| easeInQuad |
| easeOutQuad |
| easeInOutQuad |
| easeInCubic |
| easeOutCubic |
| easeInOutCubic |
| easeInQuart |
| easeOutQuart |
| easeInOutQuart |
| easeInQuint |
| easeOutQuint |
| easeInOutQuint |
| easeOutBounce |
| easeInBounce |
| easeOutBack |
| easeInBack |