Numbers Probably Matter

    @legendapp/motion
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.10 • Public • Published

    Legend Motion

    Legend Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.

    npm install @legendapp/motion or yarn add @legendapp/motion

    import { Motion } from "@legendapp/motion"
    
    <Motion.View
        initial={{ y: -50 }}
        animate={{ x: value * 100, y: 0 }}
        whileHover={{ scale: 1.2 }}
        whileTap={{ y: 20 }}
        transition={{ type: 'spring' }}
    />

    Highlights

    • Supports react-native and react-native-web
    • API similar to Framer Motion for easy mixing of React Native with React
    • Supports animating SVG and linear gradient
    • Supports transformOrigin
    • whileHover and whileTap for easy animations on touch
    • AnimatePresence for exit animations
    • 0 dependencies using the built-in Animated
    • Built for maximum performance
    • Strongly typed with TypeScript

    📖 Docs

    The full documentation with live examples is on our website.

    Upgrading from 1.x

    • whileTap and whileHover props now require a Motion.Pressable ancestor, which is uses for tracking whether it is hovered or pressed. See the example.

    👩‍⚖️ License

    MIT


    Legend Motion is created and maintained by Jay Meistrich with Legend and Bravely.

    Legend      Bravely

    Install

    npm i @legendapp/motion

    DownloadsWeekly Downloads

    447

    Version

    2.1.10

    License

    MIT

    Unpacked Size

    229 kB

    Total Files

    101

    Last publish

    Collaborators

    • jmeistrich