lax.js is a plugin to create animation scroll effects

lax.js is a plugin to create animation scroll effects
Average rating: 5
(1 votes)

Thanks! You’ve rated this material!

How tempting and light weight it can be…and we are talking not about an ice cream. It’s about javascript plugin to create smooth and beautiful animations when you scroll. We want to present you a new design tool! lax.js is a plugin to create animation scroll effects!

Basic Browser Setup

  1. Add lax.js to your html
<script src="lib/lax.min.js" >
  1. Initialize the plugin
window.onload = function() {
	lax.setup() // init

	const updateLax = () => {
		lax.update(window.scrollY)
		window.requestAnimationFrame(updateLax)
	}

	window.requestAnimationFrame(updateLax)
}
  1. Add class and attributes to the HTML tags you want to animate e.g.
<p class="lax" data-lax-preset="spin fadeInOut">Look at me goooooo!</p>
  1. 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 or Vue.js, it is likely that you are adding elements after the initial window.onload. Because of this you will need to call lax.addElement(domElement) when you add components to the DOM that you want to animate.

The simplesr way to get started is to use the presets like the data-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".

Enjoy the details about lax.js and find the supported presets on GitHub page.

We collected all the main principles and rules in one place and want to share with you great tips on animation in UX design.

Rate this article, if you like it

Thanks! You’ve rated this material!

Got a project? Let's discuss it!

Kyiv Sofiivska 1/2a, 01001, Kyiv, Ukraine
Dnipro Hlinky 2, of. 1003, 49000, Dnipro, Ukraine
Kharkiv Otakara Yarosha 22, 61000, Kharkiv, Ukraine
Email info@syndicode.com