Using lax.js with a Vue project
Tags: vue
Published: 2020-06-03 12:09:58

About me:- Hi, I'm Ansh and I have trouble communicating so please don't hate me if you don't like this post but criticism is welcome.

If you don't know [lax.js](https://github.com/alexfoxy/lax.js), it is a simple yet elegant scroll animations library and did I mention **light weight(3kb minified & zipped)**.

## Background
I recently had to use scroll animations in my vue project but other libraries like AOS seemed to complex and frankly I like lax.js.  
The author of the lax has also created a codepen with a vue sample but it doesn't seem to fall in line with the documentation.
You can find the codepen [here](https://codepen.io/alexfoxy/pen/ZPRZBq).  
  
Also I won't be walking you through the steps to create a new vue project using the vue-cli, because I'm sure that if you're reading this article, you have figured that out by now.  
So let's get to it.

* ### Start by installing lax.js
    ```shell
    npm install lax.js
    ```  
  
* Now in your main.js file, import lax and add it as an instance property.

    ```javascript
    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import lax from "lax.js";

    Vue.prototype.$lax = lax;

    new Vue({
        router,
        render: h => h(App)
    }).$mount("#app");

    ```  
    I added lax as a vue instance property, because I wanted all components to be able to access it.  
  
* Now in your App.vue, add the created and mounted hooks like so.

    ```javascript
    export default {
    methods: {
        UpdateLax() {
        this.$lax.update(window.scrollY);
        window.requestAnimationFrame(this.UpdateLax);
        }
    },
    mounted: () => {
        window.requestAnimationFrame(this.UpdateLax);
    },
    created: () => {
        this.$lax.setup();
    },
    };
    ```  
    Let me explain all that. In the created hook, we setup lax, this doesn't mean that lax will automatically listen to scroll event, we have to update it manually, that's where `requestAnimationFrame` and our `UpdateLax` method in, when the component is mounted we call `window.requestAnimationFrame` and pass it the `UpdateLax` method which will update lax with the amount that window has scrolled and recursively call itself on the next paint.  
  
* Add animations in your component.  
In the component that you want to add scroll animations add ref to the dom elements that you want animated. In my case it was the `heading` and `v-tabs`
    ```html
    <template>
    <div class="sub-links">
        <span class="heading" ref="animatedHeading"
            data-lax-scale="0 1.9, 76 1" data-lax-translate-y="0 32, 76 0">
                Awesome Scroll Animated Heading
        </span>

        <v-tabs class="tabs-container" ref="animatedTabs" 
            data-lax-translate-y="0 108, 76 0"
            v-model="currentActiveTab" @change="updateActiveTab"
            fixed-tabs color="primary">
                <v-tab :ripple="false" to="/">
                    Tab 1
                </v-tab>
                <v-tab :ripple="false" to="/">
                    Tab 2
                </v-tab>
                <v-tab :ripple="false" to="/">
                    Tab 3
                </v-tab>
        </v-tabs>
    </div>
    </template>
    ```  
    Add `mounted` and `beforeDestroy` hooks in the component
    ```javascript
    mounted: () => {
        this.$lax.addElement(this.animatedHeading);
        this.$lax.addElement(this.animatedTabs);
    },
    beforeDestroy: () => {
        this.$lax.addElement(this.animatedHeading);
        this.$lax.addElement(this.animatedTabs);
    },
    ```  
    The mounted hook adds our elements to lax which will animate them on scroll and the beforeDestroy hook removes them. now when your component renders, it will be animated on scroll.  
      
      
    > The `v-tabs` and `v-tab` are vuetify components, and have nothing to do with lax, they are the ones I was using.  
      
        
If you're wondering what I was building, here's a sneak peak.  
![Scroll Animated Header with Tab](https://dev-to-uploads.s3.amazonaws.com/i/ba493uffp58ehv5h5un4.gif)