preact-animate-plugin

This package uses the Preact Options API to introduce an animate prop to every native element (e.g. <div>, <span>, <button>, etc.). It uses the motion/mini package to animate the elements. To understand which features of Motion are supported, see this comparison table.

On top of that, the animate prop supports the following lifecycle events:

• update Animate when this element is re-rendered.
• enter Animate when this element is added to the DOM.
• whileHover Animate when this element is hovered on.
• whileFocus Animate when this element is focused.
• whilePress Animate when this element is pressed on.

Installation

Choose your package manager, then install this package and the motion package.

• PNPM

  pnpm add preact-animate-plugin motion
  

• Bun

  bun add preact-animate-plugin motion
  

• Yarn

  yarn add preact-animate-plugin motion
  

• NPM

  npm install preact-animate-plugin motion
  

Usage

Always import the package, so it can install itself into Preact at runtime.

import 'preact-animate-plugin'