@horleng/scroll-animation.js

v0.1.0

Published

6 months ago

A lightweight scroll animation utility that adds classes to elements as they enter a scrollable container's viewport.

0High
0Medium
0Low

scroll scroll animation intersection observer observer scroll effect animation on scroll scroll hook visibility trigger viewport animation react scroll animation lazy load trigger animation scroll detection frontend typescript javascript

scroll-animation.js

A lightweight scroll animation utility that adds classes to elements as they enter a scrollable container's viewport.

📦 Installation

npm install @horleng/scroll-animation.js

🚀 Usage


<script setup lang="ts">

import { onMounted, onUnmounted } from 'vue'
import { useScrollAnimation } from '@horleng/scroll-animation.js'

const animate = useScrollAnimation({
    rootViewMargin : 100
})

onMounted(() => {
  animate.init({
    root: yourRootElement,
    targets: yourTargetElements
  })
})

onUnmounted(() => {
    animate.dispose() //Release memory
})
</script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exploring</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #app {
            height: 100vh;
            overflow-y: auto;
            padding: 40px 200px;
            background-color: rgb(70, 67, 67);
            color: rgb(203, 203, 203);
        }

        p {
            margin-top: 30px;
            transform: translateY(20px);
            opacity: .1;
            transition: all .3s ease;
        }

        p.scrollanimationjs_is_activated {
            color: rgb(108, 196, 244);
            transform: translateY(0);
            opacity: 1;
        }

        h1 {
            padding-top: 100px;
        }
    </style>
</head>

<body>

    <div id="app">
        <h1 class="animate__animated" build-active-class="animate__bounceInUp">Exploring</h1>
        <hr>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <h1 class="animate__animated" build-active-class="animate__bounceInUp">Service</h1>
        <hr>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <h1 class="animate__animated" build-active-class="animate__bounceInUp">About</h1>
        <hr>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
        <p class="test">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente incidunt similique aliquid
            nobis itaque excepturi tenetur deleniti ad voluptas voluptatem esse rem labore accusantium cupiditate, dolor
            consequuntur voluptatum mollitia!
        </p>
    </div>

    <script type="module">
        import { useScrollAnimation } from 'https://unpkg.com/@horleng/scroll-animation.js/dist/index.mjs';
        useScrollAnimation({
            rootViewMargin: 100
        }).init({
            root: document.querySelector('#app'),
            targets: [
                ...document.querySelectorAll('p'),
                ...document.querySelectorAll('h1'),
            ]
        });
    </script>

</body>

</html>

Demo

SlideBuilder preview

📬 Contact

Have questions or want to get in touch?
Visit horleng.vercel.app

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

scroll-animation.js

📦 Installation

🚀 Usage

Demo

📬 Contact