Animate appearance

By using MountTransition and AnimatePresence (of framer-motion) components you can do basic animation.

Usage#

Set animation you want with animationType prop of MountTransition.

Example:

import { AnimatePresence } from 'framer-motion';
import { MountTransition } from 'la-danze-ui';

function App({ isVisible }) {
  return (
    <AnimatePresence>
      {isVisible && (
        <MountTransition
          animationType="slideLeft"
        />
      )}
    </AnimatePresence>
  );
}

Animations available#

fade
scale
slideUp
slidedown
slideLeft
slideRight

Use them with animationType prop of MountTransition

API#

MountTransition