HTMLAnimate

A powerful, physics-based animation component specifically designed for the PawaJS ecosystem. HTMLAnimate allows you to create fluid transitions, complex sequences, and spring-based motions using simple props and Tailwind CSS classes, css classes or inline styles.

Features

• Physics-based Animations: Built-in spring presets for natural-feeling motion.
• Viewport Triggers: Automatically start animations when elements enter the user's view.
• Staggering: Effortlessly animate lists with sequential delays.
• Exit Animations: Integrated support for orchestrated exit transitions.
• State Sequencing: Provide an array of classes to cycle through multi-step animations.
• Interactive Triggers: Built-in support for hover-based animations.

Installation

npm install html-animate

Basic Usage

Register the component in your PawaJS application and use it in your templates:

import { html } from 'pawajs';
import { HTMLAnimate } from 'html-animate';

export default () => {
  return html`
    <html-animate
      :animate="['opacity-0 scale-90', 'opacity-100 scale-100']"
      :duration="600"
      spring="bouncy"
    >
      <div class="p-6 bg-blue-500 text-white rounded-lg shadow-xl">
        Hello PawaJS!
      </div>
    </html-animate>
  `;
}

Props

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | animate | String \| Array | '' | Tailwind classes or inline styles (e.g., opacity: 0). If an array, it cycles through states. | | spring | Boolean \| String | false | Enable spring physics. Supports presets: gentle, bouncy, snappy, heavy, elastic, wobbly, stiff, slow, molasses, magnetic. | | inViewPort | Boolean | false | Triggers the animation only when the element enters the viewport. | | infinite | Boolean | false | Loops the animation sequence indefinitely. | | repeat | Number | 0 | Number of times to repeat the sequence. | | duration | Number | 200 | Base duration in milliseconds. Automatically adjusted if spring is active. | | delay | Number | 0 | Delay before the animation begins. | | stagger | Number | 0 | Incremental delay applied to items in a list. | | index | Number | 0 | The index of the item (required for correct stagger timing). | | exit | String \| Array | '' | Classes/styles to apply when the component is unmounting. | | hover | Boolean | false | Triggers the animation sequence on mouse enter. | | direction | String | 'normal' | Animation flow: normal, reverse, or alternate. | | ease | String | 'gentle' | Standard CSS easing (used if spring is false). | | paused | Boolean | false | Manually pause the animation sequence. |

Advanced Examples

Staggered List Entry

Perfect for animating items as they load or scroll into view.

return html`
  <div class="space-y-2">
    <html-animate 
      for-each="item, i in list"
      :animate="['translate-x-10 opacity-0', 'translate-x-0 opacity-100']"
      :index="i"
      :stagger="100"
      :inViewPort
      spring="snappy"
    >
      <div class="p-4 border rounded">@{item.name}</div>
    </html-animate>
  </div>
`;

Physics Fine-Tuning

If presets aren't enough, you can control the spring physics directly:

<html-animate
  :animate="['rotate-0', 'rotate-180']"
  :spring="true"
  :mass="1.2"
  :stiffness="150"
  :damping="12"
>
  <button class="p-2 bg-primary">Spin Me</button>
</html-animate>

Exit Transitions

HTMLAnimate hooks into the framework's lifecycle to play an exit animation before the element is removed from the DOM.

<html-animate
  :animate="['scale-0', 'scale-100']"
  :exit="['scale-100', 'scale-0 opacity-0']"
  spring="bouncy"
>
  <div class="alert">I will pop out when closed!</div>
</html-animate>

Built with ❤️ for the PawaJS Community.