@dokja620/qwik-animate v1.1.1
Introducing QwikAnimate: š An animated on-scroll library for QwikJS! With a vast array of animations, it seamlessly integrates with QwikJS, enabling effortless creation of captivating scroll-triggered effects. š«
Features
- Run Once: Ensure animations run only once when the element first comes into view.
- Debug Mode: Enable console logs for debugging purposes.
- Threshold Control: Customize when animations start and stop based on the scroll position.
- Animation Preset File: Includes
animate.css
with a variety of predefined animations. - Interactive Playground: Explore animations in real-time with our interactive playground at qwikanimate.css.
Installation š
Install QwikAnimate in your project using npm:
cd my-project
npm install @dokja620/qwik-animate
Usage Example
Here's a basic example to get you started with QwikAnimate:
Example Usage in a component
In the Qwik component where you want to use the Animate
component, import it and use it as shown below:
import { Animate } from "~/components/qwik-animate/animate";
export default function MyComponent() {
return (
<>
<Animate class="div" animationKeys="@supports_anim_chains">
<!-- Your content here -->
</Animate>
</>
);
}
Run Once
The runOnce
prop ensures that the animation runs only once when the element first comes into view.
<Animate class="div" animationKeys="@supports_anim_chains" runOnce>
<!-- Your content here -->
</Animate>
Debug Mode
The debug
prop allows you to enable console logs for debugging purposes.
<Animate class="div" animationKeys="@supports_anim_chains" debug>
<!-- Your content here -->
</Animate>
Threshold Control
The threshold
prop allows you to customize when animations start and stop based on the scroll position. The threshold values can be adjusted to control the intersection ratio for showing and hiding the animation.
In short:
threshold
="show threshold
, hide threshold
"
<Animate class="div" animationKeys="fadeIn" threshold="0.3, 0.7">
<!-- Your content here -->
</Animate>
animate.css: Elevate Your Animations
With animate.css, Qwik Animate brings a powerhouse of animation possibilities to your fingertips:
Seamless Chaining
Blend animations effortlessly for captivating effects that keep your audience engaged.
Infinite Creativity
Experiment with a variety of animations to craft the perfect visual narrative for your content.
Interactive Playground
Explore animations in real-time with our interactive playground at qwikanimate.css.
Embrace Innovation
Join us in embracing innovation to create immersive user experiences.
Start Your Journey
Elevate your animations with animate.css and Qwik Animate. Explore now!
Credits
š Credit is due to @w4u-public/A.css for creating an exceptionally comprehensive CSS animation generator. His remarkable work, crafted single-handedly, deserves wider recognition for its innovation and utility.