Animate.tsx

slidemason · ui, framer-motion, animation-primitive

UI animation primitive wrapping framer-motion.

// Source: https://github.com/erickittelson/slidemason | License: MIT | Copyright 2026 Eric Kittelson
// Provided via justclaw.it.com; keep this notice with the code.
import { motion, type TargetAndTransition, type Easing } from 'framer-motion';
import { isPptxMode } from './pptxMode';

type Effect =
  | 'fade-up'
  | 'fade-down'
  | 'fade-left'
  | 'fade-right'
  | 'scale'
  | 'blur-in'
  | 'slide-left'
  | 'slide-right';

interface AnimateProps {
  effect?: Effect;
  delay?: number;
  duration?: number;
  ease?: readonly number[];
  once?: boolean;
  style?: React.CSSProperties;
  className?: string;
  children: React.ReactNode;
}

const EASE: [number, number, number, number] = [0.22, 1, 0.36, 1];

const EFFECTS: Record<Effect, { initial: TargetAndTransition; animate: TargetAndTransition

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search 40K more like it.

Get a free API key