@cloudgakkai/qwik-aos v0.2.0

Qwik AOS ⚡️

A suitable Animated on Scroll library for QwikJS.

Installation

Using NPM:

npm install @cloudgakkai/qwik-aos

or Using Yarn:

yarn add @cloudgakkai/qwik-aos

Usage

import { component$, useVisibleTask$ } from "@builder.io/qwik";
import { useAOS } from "@cloudgakkai/qwik-aos";

export default component$(() => {
    const { aosInit } = useAOS();

    useVisibleTask$(() => {
        aosInit();
    }, { strategy: "document-ready" })

    return (
        <div data-aos="fade-in">Your Content Here</div>
    )
})

Attribute

You need to add data-aos="animation-name" to your HTML Element that you want to add animation.

Animation