@qds.dev/motion

[!IMPORTANT] WORK IN PROGRESS This library is under active construction. The APIs and features described below are currently being implemented.

A declarative animation library for Qwik, powered by anime.js.

Inspired by Framer Motion, @qds.dev/motion brings powerful, declarative animations to Qwik.

Features (Planned)

• Declarative Animations: Simple prop-based API.
• Spring Animations: Physics-based springs for natural motion.
• Layout Animations: Automatically animate layout changes with zero config.
• Timelines: Orchestrate complex multi-element sequences.
• Motion Components: motion.div, motion.button, etc., available out of the box.
• Gestures: Hover, tap, pan, and drag support.

Installation

Coming soon...

Usage Example (Target API)

Please read the architecture document for more details on the approach.

import { component$ } from '@qwik.dev/core';
import { motion } from '@qds.dev/motion';

export default component$(() => (
  // animation api's tbd.
  <motion.div
    {...}
  >
    Hello Qwik Motion!
  </motion.div>
));