@cloudgakkai/qwik-aos
v0.2.0
Published
Create a reusable Qwik component library
Downloads
8
Readme
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
| Name | | --------------- | | fade-in | | fade-up | | fade-down | | fade-right | | fade-left | | fade-up-right | | fade-up-left | | fade-down-right | | fade-down-left | | flip-left | | flip-right | | flip-uo | | flip-down | | zoom-in | | zoom-in-up | | zoom-in-down | | zoom-in-right | | zoom-in-left | | zoom-out | | zoom-out-up | | zoom-out-down | | zoom-out-right | | zoom-out-left | | slide-up | | slide-down | | slide-right | | slide-left |