anubra266 / animated-pandacss

Use Animate.css with Panda CSS

🐼
animated-pandacss

Use Animate.css with Panda CSS

npm i -D animated-pandacss

About

It's a preset for Panda CSS that adds Animate.css animations to your project.

Install

npm i -D animated-pandacss
#or
yarn add -D animated-pandacss
#or
pnpm i -D animated-pandacss

Usage

Add as first item of presets in your Panda config.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // Other config...
  presets: ['animated-pandacss', '@pandacss/dev/presets'],
})

You can now use it in your project.

<div
  className={css({
    animationName: 'slideOutRight',

    // Optional attributes
    animationRepeat: 'infinite', // can also be a number
    animationDuration: '1s',
    animationDelay: '1s',
  })}
>
  Animated element
</div>

You can play around with the animations in the docs

Sponsors ✨

Thanks goes to these wonderful people