Lite Sleek

lite-sleek is a minimal animation library for React, designed to make adding sleek, performant CSS-based animations to your components effortless. It provides a simple motion component API and an AnimatePresence component for handling enter and exit animations with ease.

Documentation

Try Demo now :)

Features

• Simple API: Use motion.div, motion.span, etc., just like regular HTML elements.
• Enter & Exit Animations: AnimatePresence makes it trivial to animate components as they mount and unmount.
• Pre-built Variants: A collection of common animations like fade, slideUp, and pop ready to use.
• Staggering: Easily orchestrate animations for lists with AnimatePresence and its staggerDelay prop.
• Gestures: Built-in whileHover and whileTap props for micro-interactions.
• Lightweight: No heavy dependencies. Animations are powered by CSS transitions.

Installation

npm install lite-sleek

| Version | Supported React | Supported React DOM | |----------|-----------------|---------------------| | 1.1.0 | >=16.8.0 | >=16.8.0 |

Quick Start

1. Basic Animation

Import motion and use a motion element. It accepts props like initial, animate, exit, and transition.

import { motion } from "lite-sleek";

function MyComponent() {
  return (
    <motion.div
      initial={{ opacity: 0, transform: "scale(0.8)" }}
      animate={{ opacity: 1, transform: "scale(1)" }}
      transition="all 0.5s ease"
    >
      Hello, world!
    </motion.div>
  );
}

2. Enter & Exit Animations

Use the AnimatePresence component to animate items as they are added or removed from the React tree.

import { motion, AnimatePresence } from "lite-sleek";
import { useState } from "react";

function FadeToggle() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <AnimatePresence>
        {show && (
          <motion.div
            key="box"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          />
        )}
      </AnimatePresence>
      <button onClick={() => setShow(!show)}>
        {show ? "Hide" : "Show"}
      </button>
    </div>
  );
}

Key Components

motion

motion is an object that provides animatable versions of HTML elements. You can use motion.div, motion.button, motion.span, etc.

Key Props:

• initial: The properties of the component when it first mounts.
• animate: The properties the component should animate to after mounting.
• exit: The properties the component should animate to before it unmounts (requires AnimatePresence).
• variant: A string key for a pre-defined animation (e.g., "fade", "pop").
• transition: A string defining the CSS transition (e.g., "all 0.3s ease-in-out").
• whileHover: Animation state to apply while the mouse is hovering over the element.
• whileTap: Animation state to apply while the element is being clicked or tapped.

AnimatePresence

This component manages the mounting and unmounting of its direct children.

Key Props:

• staggerDelay: A number (in milliseconds) to delay the animation of each subsequent child. This is perfect for list animations.

Examples

1. Hover & Tap Gestures

lite-sleek makes it simple to add feedback to user interactions.

import { motion } from "lite-sleek";

export const HoverStatesDemo = () => {
  return (
    <motion.div
      whileHover={{ transform: "scale(1.2) rotate(5deg)" }}
      whileTap={{ transform: "scale(0.9)" }}
      transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
      style={{
        width: 150,
        height: 150,
        background: "linear-gradient(to br, #ec4899, #ef4444)",
        borderRadius: 16,
        cursor: "pointer",
      }}
    />
  );
};

2. Staggered List Animations

Use AnimatePresence with staggerDelay to animate a list of items in sequence.

import { motion, AnimatePresence } from "lite-sleek";
import { useState } from "react";

export const StaggerEffectsDemo = () => {
  const [show, setShow] = useState(true);
  const items = [1, 2, 3, 4];

  return (
    <div>
      <div style={{ display: "flex", gap: 10 }}>
        <AnimatePresence staggerDelay={200}>
          {show &&
            items.map((item) => (
              <motion.div
                key={item}
                variant="fade"
                style={{
                  width: 50,
                  height: 50,
                  background: "linear-gradient(to br, #22c55e, #10b981)",
                  borderRadius: 8,
                }}
              />
            ))}
        </AnimatePresence>
      </div>
      <button onClick={() => setShow(!show)} style={{ marginTop: 20 }}>
        {show ? "Hide" : "Show"} Items
      </button>
    </div>
  );
};

3. Using Variants

Use the built-in variant prop for common animations.

import { motion, AnimatePresence } from "lite-sleek";
import { useState } from "react";

export const FadeScaleDemo = () => {
  const [show, setShow] = useState(true);

  return (
    <div>
      <div style={{ minHeight: 150, display: "grid", placeContent: "center" }}>
        <AnimatePresence>
          {show && (
            <motion.div
              variant="pop"
              style={{
                width: 100,
                height: 100,
                background: "linear-gradient(to br, #06b6d4, #0284c7)",
                borderRadius: 16,
              }}
            />
          )}
        </AnimatePresence>
      </div>
      <button onClick={() => setShow(!show)} style={{ marginTop: 20 }}>
        {show ? "Hide" : "Show"} Element
      </button>
    </div>
  );
};

License

MIT