Laxxx.js — -a lightweight Plugin to create animation when scrolling

YvonneDev
2 min readApr 12, 2019

--

It’s a simple & lightweight (❤kb gzipped) vanilla javascript plugin to create smooth & beautiful animations when you scroll!


How do I create this animated page with the Plugin?

Step1:

Link the lax.js file to your website, which is the easiest way to apply. Or with the npm install to apply especially with React and so on.

Step2:
JS
Add the script in the body for init the plugin.

Step3:
HTML
Select the tags to which you want to add animations and attach the class name and attributes.

Set the class name to lax to point the animation tags.
And data-lax-preset is the default animation set which is easier and quicker to apply. Or you can customize the animation attributes with custom data sets.

Supported preset values from official:

If you just wanna change the specific value of the preset. Just add the value you want after the preset name after the “-”.Such as...

Supported attributes keys from official:
Transforms:

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

Others:

For more attributes and values settings, go to document Github

My demo code Github

👉Follow me for more useful web development content! love sharing🥰

--

--

YvonneDev
YvonneDev

Written by YvonneDev

❤️Front-end Web Development self-taught *share what I learned*

No responses yet