@animaly/react

motion's React API running on animaly. Replace the import and keep your components:

import { AnimatePresence, motion, useScroll, useTransform } from "@animaly/react";

const list = { visible: { transition: { staggerChildren: 0.05 } } };
const item = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };

export function List({ items }: { items: string[] }) {
  const { scrollYProgress } = useScroll();
  const scale = useTransform(scrollYProgress, [0, 1], [1, 0.9]);
  return (
    <motion.ul initial="hidden" animate="visible" variants={list} style={{ scale }}>
      <AnimatePresence>
        {items.map((text) => (
          <motion.li key={text} variants={item} exit={{ opacity: 0 }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            {text}
          </motion.li>
        ))}
      </AnimatePresence>
    </motion.ul>
  );
}

Animated styles are written by animaly's renderer in one pass per frame, not by a listener per value. A motion value in style is bound to the element and rendered in the same pass.

Supported:

• motion.* components and motion.create(), with initial, animate, exit, variants, transition, transitionEnd, custom, inherit, transformTemplate, the values prop, motion values in style and as children
• variants with propagation, staggerChildren, delayChildren, staggerDirection and when
• whileHover, whileTap, whileFocus, whileInView and their callbacks (onHoverStart, onTap, onTapCancel, onViewportEnter and the rest), globalTapTarget, propagate={{ tap: false }}
• AnimatePresence with mode (sync, wait, popLayout), initial={false}, custom, propagate, onExitComplete, plus usePresence, useIsPresent and usePresenceData
• MotionConfig (transition, reducedMotion, skipAnimations, isStatic, nonce, isValidProp)
• useMotionValue, useMotionValueEvent, useTransform, useMotionTemplate, useSpring, useVelocity, useScroll, useInView, useAnimate, useAnimation / useAnimationControls, useCycle, useReducedMotion
• server rendering: components render their initial styles to HTML without a DOM

Checked against motion v13.4.6: 342 of motion's own React tests (motion components, variants, gestures, AnimatePresence, MotionConfig, hooks) run against this package in Chromium, Firefox and WebKit.

Known differences:

• MotionValue.get() returns the live animated value at the moment it is called; motion returns the value of the last frame. A value read right after an animation starts is already slightly past its first keyframe.
• Colors with MotionGlobalConfig.mix unset must be hex, rgb(), rgba(), hsl() or hsla().

Not yet: layout animations (layout, layoutId, LayoutGroup), drag, Reorder, LazyMotion and m.

Pre-release: the API can still change. Parts of motion are ported under its MIT license; see NOTICE.