---
title: Create a crazy input interaction with lax.js. 🤪 | daily.dev
description: Meet this JavaScript library that can make things look cool with crazy interactions. It's called LAX! Explore practical developer news, tutorials, and tools read by millions of developers worldwide.
canonical: https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/
og:type: article
og:url: https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/
og:title: Create a crazy input interaction with lax.js. 🤪 | daily.dev
og:description: Meet this JavaScript library that can make things look cool with crazy interactions. It's called LAX! Explore practical developer news, tutorials, and tools read by millions of developers worldwide.
og:image: https://media.daily.dev/image/upload/s--wt6fcNsB--/f_auto,q_auto/v1/recruiter-landing/5fd36eaaa376ee5e45331602_mwpi83wttgun4borcrdi_20_1_c122e74d24?_a=BAMAMiB80
og:site_name: daily.dev
og:locale: en_US
article:published_time: 2020-12-11
article:modified_time: 2026-05-15T14:26:03.050Z
article:author: Vaibhav Khulbe
twitter:card: summary_large_image
twitter:site: @dailydotdev
twitter:creator: @dailydotdev
twitter:title: Create a crazy input interaction with lax.js. 🤪 | daily.dev
twitter:description: Meet this JavaScript library that can make things look cool with crazy interactions. It's called LAX! Explore practical developer news, tutorials, and tools read by millions of developers worldwide.
twitter:image: https://media.daily.dev/image/upload/s--wt6fcNsB--/f_auto,q_auto/v1/recruiter-landing/5fd36eaaa376ee5e45331602_mwpi83wttgun4borcrdi_20_1_c122e74d24?_a=BAMAMiB80
---
What's common between circles turning to cubes, pair of shoes swinging around left to right, that cube experiencing _inertia_ (yes, that physics thing), a text dancing when your cursor meets it, or you are just typing things in a text field and bam! That thing rotates like hell for no reason!
Well, what I'm even talking about? ┐(￣ヘ￣;)┌
I'm talking about some weird and super crazy web experiences you can make (including the examples I gave above) just to have some fun in your websites or implement them cautiously to make a website visitor feel joyful!
Meet this JavaScript library that can make things look cool with crazy interactions. It's called LAX!
[](https://giphy.com/gifs/life-natalie-enjoying-xEGqih6o0meyY)
> [**Lax.js**](https://github.com/alexfoxy/lax.js) is a JavaScript library to create **smooth & beautiful animations** when you **scroll**.
But that's not all! Lax is really, really small. When gzipped, it's _less than 4 kilobytes in size_! 🤯
### Here are some of its features:
1. It has a new JS animation syntax for advanced animation combinations to work on.
2. Now, animations can be given a kick of _interia_ while scrolling.
3. It comes with nice animation easings.
4. You can create custom CSS bindings.
5. Not only scroll-based, but animations can also be done while typing (we will do a demo of this later), scroll positions, or even according to date and time!
# What will we make? 👀
This:
Whoops! We are not doing a scroll but an input interaction here. 🤪
# Let's create this input interaction 🌚
### The HTML
Add an field to a new or an existing project file. Make sure you give it a proper id as it will be needed later when we code the Lax logic.
Optionally, you can give it the [autofocus](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus) attribute so that when the page loads, it automatically focusses on the input. This way, we can start typing weird words right away without the need of having to click on the input field. Also, we should give some placeholder value to it. Here I have just used a cute smiling kaomoji, but you can have something like, "Input here" or "type here".
```
```
### The CSS
Time to make it looks like a dull stick :') I won't explain each CSS rule here, just the ones so that it looks somewhat like our finished version.
To start, remove all the borders and outlines, and give it a background-color of #95853B. As for the black colored outline you see, it's a shadow added to the element. I have used both rgba() and rgb() methods to achieve the result. Add a bit of padding, center the text, and give it a base font-size.
```
#input {
text-align: center;
width: 30%;
font-size: 25px;
border: 0;
outline: 0;
background-color: #95853B;
padding: 15px;
color: #fff;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px,
rgb(51, 51, 51) 0px 0px 0px 3px;
}
::placeholder {
color: #fff;
}
```
### The Lax.js!
#### Installation ⬇️
You can use both Yarn or NPM scripts to install the library:
```
npm install lax.js
// OR
yarn add lax.js
```
And then in your JS file, import it as usual:
```
import lax from 'lax.js';
```
Or, as I did here for the demo, grab its CDN file from [JS Delivr](https://www.jsdelivr.com/) to add it on top of your HTML
```
#### Setup 🛠
For the library to work, what we need is a _driver_ at least one of the lot as it provides values for our animations, as well as the element animation bindings. This is done by the [addDriver()](https://github.com/alexfoxy/lax.js/blob/362595b5db5428477b31d3564434c35abf8f1589/src/lax.js#L539) method.
#### Make some interaction! ✨
We want our interaction to start on page load, or more specifically, whenever the [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window) is attached to the DOM. Therefore, we make use of its [onload](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload) event handler to create a function that will house all of the Lax code.
Next, we initialize the library by using the [init()](https://github.com/alexfoxy/lax.js/blob/362595b5db5428477b31d3564434c35abf8f1589/src/lax.js#L488) method.
As we gave an id to the input in the HTML code, here, we will use it to grab the element and store it inside the input variable. This is a simple JS thing we do all day...
```
const input = document.getElementById('input');
```
Remember I said we need to add a driver? Now we will use this driver to control the animation. Simply call lax.addDriver(). This takes in the _animation value_ and a function that returns the _calculated amount_. In our case, it is the inputLength and calculating the total length of characters added in the input element.
```
lax.addDriver('inputLength', function () {
return input.value.length
});
```
Next, to actually start triggering the interaction, what we need is to use [addElements()](https://github.com/alexfoxy/lax.js/blob/362595b5db5428477b31d3564434c35abf8f1589/src/lax.js#L574) that takes in an _element selector rule_ along with the _animation data_. Hence, we select #input and inputLength we defined previously for this.
If you notice, as soon as we start typing inside the input field, it does two things simultaneously; first, it _rotates_ anticlockwise, and also it _fades_ at some specific speed. This effect is achieved by using both rotate and opacity [CSS properties](https://github.com/alexfoxy/lax.js#css-properties) that is supported by the Lax library.
```
"rotate": [
[0, 180],
[0, 360],
],
"opacity": [
[0, 100],
[1, 0]
]
```
Now from where those numbers come from? Well, technically, they are called [Value Maps](https://github.com/alexfoxy/lax.js#value-maps). These are used to manipulate the driver or CSS property values. The two values inside an object are the _In_ and _Out_ values. For example, the rotation above starts from 0, rotates from right to left to 180 degrees, and then to a complete circle of 160 degrees.
The same goes for opacity. To make it look like a fade-in animation, we start from 0 i.e. no fade to 1 i.e. complete fade.
Here's the complete JS code for your reference:
```
window.onload = function () {
lax.init()
const input = document.getElementById('input')
lax.addDriver('inputLength', function () {
return input.value.length
})
lax.addElements("#input", {
'inputLength': {
"rotate": [
[0, 180],
[0, 360],
],
"opacity": [
[0, 100],
[1, 0]
]
}
})
}
```
Here's the CodePen embed for you to play around :')
See the Pen [Lax.js input demo](https://codepen.io/kvaibhav01/pen/GRjJaXQ) by Vaibhav Khulbe ([@kvaibhav01](https://codepen.io/kvaibhav01)) on [CodePen](https://codepen.io).
# More resources 🤩
Go ahead with and learn more about Lax to make soothing interactions from these resources:
- [Lax.js GitHub repo](https://github.com/alexfoxy/lax.js)
- [Lax.js Vue Example](https://codepen.io/alexfoxy/pen/ZPRZBq)
- [Laxxx.js - An Awesome Scroll Animation Library that's Only 2KB! by DesignCourse](https://youtu.be/jaVy3SCibJw)
_Thanks for reading. I appreciate it! Have a good day. (✿◕‿◕✿)_
> 🙄 [pic.twitter.com/1G4L5SedDv](https://t.co/1G4L5SedDv)
>
> — Sasha Rosenbaum, but 🕯️🕯️🕯️🕯️🕎🕯️🕯️🕯️🕯️ (@DivineOps) [November 19, 2020](https://twitter.com/DivineOps/status/1329244198009262082?ref_src=twsrc%5Etfw)
```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/og-image.png?v=a830cdf1","width":1200,"height":630},"sameAs":["https://twitter.com/dailydotdev","https://www.linkedin.com/company/dailydotdev","https://github.com/dailydotdev","https://www.instagram.com/dailydotdev"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","description":"Free, personalized developer news aggregator. Stay on top of software development news, AI coding tools, and web dev - curated daily from trusted sources.","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/","url":"https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/","name":"Create a crazy input interaction with lax.js. 🤪 | daily.dev","description":"Meet this JavaScript library that can make things look cool with crazy interactions. It's called LAX! Explore practical developer news, tutorials, and tools read by millions of developers worldwide.","inLanguage":"en-US","isPartOf":{"@id":"https://daily.dev/#website"}},{"@type":"Article","@id":"https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/#article","headline":"Create a crazy input interaction with lax.js. 🤪","url":"https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/","datePublished":"2020-12-11","dateModified":"2026-05-15T14:26:03.050Z","isPartOf":{"@id":"https://daily.dev/#website"},"publisher":{"@id":"https://daily.dev/#organization"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/"},"description":"Meet this JavaScript library that can make things look cool with crazy interactions. It's called LAX! Explore practical developer news, tutorials, and tools read by millions of developers worldwide.","image":{"@type":"ImageObject","url":"https://media.daily.dev/image/upload/s--wt6fcNsB--/f_auto,q_auto/v1/recruiter-landing/5fd36eaaa376ee5e45331602_mwpi83wttgun4borcrdi_20_1_c122e74d24?_a=BAMAMiB80"},"author":{"@type":"Person","name":"Vaibhav Khulbe","url":"https://app.daily.dev/vaibhavkhulbe"},"potentialAction":{"@type":"ReadAction","target":"https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://daily.dev/blog/"},{"@type":"ListItem","position":3,"name":"Webdev","item":"https://daily.dev/categories/webdev/"},{"@type":"ListItem","position":4,"name":"Create a crazy input interaction with lax.js. 🤪","item":"https://daily.dev/blog/create-a-crazy-input-interaction-with-lax-js/"}]}]}
```