Create a crazy input interaction with lax.js. 🤪
Tags: javascript, css, html, tutorial
Published: 2020-12-11 13:26:31

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! 

---

![Relax GIF](https://media.giphy.com/media/xEGqih6o0meyY/giphy.gif)
<figcaption>Don't just relax, but lax...!</figcaption>

---

# What do I mean by ~~re~~lax.js? 🧐

> [**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:

![Lax.js demo](https://dev-to-uploads.s3.amazonaws.com/i/7qk1n3strniksw0nk8l3.gif)

Whoops! We are not doing a scroll but an input interaction here. 🤪

# Let's create this input interaction 🌚

### The HTML

Add an `<input>` 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".

```html
<input id='input' placeholder="(⊃｡•́‿•̀｡)" autofocus />
```

### 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`.

```css
#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:

```js
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 `<script>` tags.

```html
<script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>
```

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

```js
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.

```js
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.


```js
"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:

```js
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 :')

{% codepen https://codepen.io/kvaibhav01/pen/GRjJaXQ default-tab=result %}

---

# 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. (✿◕‿◕✿)_

---
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="und" dir="ltr">🙄 <a href="https://t.co/1G4L5SedDv">pic.twitter.com/1G4L5SedDv</a></p>&mdash; Sasha Rosenbaum (@DivineOps) <a href="https://twitter.com/DivineOps/status/1329244198009262082?ref_src=twsrc%5Etfw">November 19, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<hr/>
_[daily.dev](https://api.daily.dev/get?r=devto) delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future._
[![Daily Poster](https://dev-to-uploads.s3.amazonaws.com/i/b996k4sm4efhietrzups.png)](https://api.daily.dev/get?r=devto)