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

Overview

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
  • 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.

👩‍⚖️ License

MIT


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

Legend      Bravely

Comments
  • Failed to construct transformer:  Error: Failed to start watch mode.

    Failed to construct transformer: Error: Failed to start watch mode.

    Hi, I'm facing this error when I run "expo start" after installing legend motion on my existing react native project. It's impossible to run my project. It work perfectly again when I remove Legend Motion.

    Failed to construct transformer:  Error: Failed to start watch mode.
        at Timeout._onTimeout (C:\path_to_my_project\node_modules\jest-haste-map\build\index.js:928:24)      
        at listOnTimeout (node:internal/timers:557:17)
        at processTimers (node:internal/timers:500:7)
    Error: Failed to start watch mode.
        at Timeout._onTimeout (C:\path_to_my_project\node_modules\jest-haste-map\build\index.js:928:24)      
        at listOnTimeout (node:internal/timers:557:17)
        at processTimers (node:internal/timers:500:7)
    

    My setup :

    Os: Windows 11, "expo": "^44.0.0", "react-native": "0.64.3", "@babel/core": "^7.12.9",

    opened by alexandreandriesse 6
  • `rotate`s do not appear to work.

    `rotate`s do not appear to work.

    I've tried making the simplest example with rotate and can't get to the bottom of why it's not working.

    rotate* types expect a number, though I'm not sure what that number maps to. Degrees? Radians?

    <Motion.View
      animate={{ rotate: 90 }}
      initial={{ rotate: 0 }}
      transition={{
        type: "timing",
        duration: 2000
      }}
      style={{ borderWidth: 1, height: 50, width: 50 }}
    />
    

    Results in a box that just sits there, statically. I can verify that other transforms, like x and y work, but not any of the rotations.

    opened by kyleshevlin 5
  • ref not working on Motion.View

    ref not working on Motion.View

    I'm trying to measure a component with onLayout prop on Motion.View, but that function that is passed to that prop is never invoked. If I use a regular View everything works just fine.

    <Motion.View onLayout={e => console.log(e)}... is not working. ✅ <View onLayout={e => console.log(e)}... is working.

    Using version 2.1.1 and tested on web.

    Update: Using ref doesn't work either.

    <Motion.View ref={ref}... is not working, ref.current is undefined<View ref={ref}... is working. ref.current is returning the element.

    opened by mathias-berg 3
  • Can't animate opacity when using whileHover on web

    Can't animate opacity when using whileHover on web

    There seems to be some issues with whileHover and whileTap on web.

    If I just create a simple app/component looking like this:

    const App = () => {
        return (
            <Motion.Pressable>
                    <Motion.View
                        initial={{
                            opacity: 0,
                        }}
                        whileHover={{ opacity: 1 }} // Or whileTap={{ opacity: 1 }}
                        style={{
                            backgroundColor: '#CC22EE',
                            width: 100,
                            height: 100,
                        }}
                    />
                </Motion.Pressable>
        );
    }
    

    If I have whileHover I get this error as soon as I hover over the component.

    image

    If I instead use whileTap, I get this error as soon as I hover (yes, hover, not clicking) over the component and it doesn't matter if it is opacity, x or scale that I try to animate, everything I try throws this error.

    image

    I'm using version 2.0.0.

    opened by mathias-berg 3
  • Re-render when `initial` props changed

    Re-render when `initial` props changed

    Hi @jmeistrich,

    A question and maybe you have some insight on what I'm trying to do with @legendapp/motion.

    I realized that initial props of Motion.View won't cause re-render when updated. This maybe has to do with optimization or something, which is great. But I have a use case where the inital will be updated based on a state.

    Take a Button example, where the interaction is animating backgroundColor with whileTap and/or whileHover. I'll put the initial bg color into initial prop, and put different color in whileTap and whileHover. Now the problem is, this button has disabled state, where the initial color is different than "enabled" state. Now when the disabled state is updated, the Button bg color doesn't change!

    Do you have any idea on how to achieve this use case? Or is this something that can be put into consideration in @legendapp/motion?

    opened by panjiesw 2
  • adds and implements loop

    adds and implements loop

    Implements loop as discussed in #7

    There may be more work than this. There's no tests for me to run and I'm not sure how to verify that this works as expected. Let's start here, and make the additional changes necessary.

    Sorry it took me so long to get to this.

    opened by kyleshevlin 1
  • Animations from @legendapp/motion throwing error after migrating to nativewind (v2) from tailwindcss-react-native (v1)

    Animations from @legendapp/motion throwing error after migrating to nativewind (v2) from tailwindcss-react-native (v1)

    Describe the bug After migrating to nativewind from taildwindcss-react-native, animations from @legendapp/motion seems to still work but now throwing error:

    styleq: transform typeof [object Object] is not "string".

    To Reproduce Steps to reproduce the behavior:

    1. add @legendapp/motion library and configure nativewind library (https://www.nativewind.dev/quick-starts/expo)
    2. add a basic Motion.View component
    3. See error in browser console.

    Expected behavior No error in browser console.

    Screenshots Screenshot 2022-09-01 at 10 09 18 AM

    Additional context Maybe due to @legendapp/motion library still relying on "tailwindcss-react-native": "^1.3.1" as peerDependencies

    opened by ammarfaris 4
  • Emulating `Animated.loop()`

    Emulating `Animated.loop()`

    I would like to loop an animation that isn't going back and forth like the examples you provide. Is there a way to simulate a loop, ie. when an animation completes start over at the initial settings?

    opened by kyleshevlin 9
  • Feature request: whileHover and whileTap props

    Feature request: whileHover and whileTap props

    Hi Jay,

    Congratulations on hitting it out of the ballpark with legend-motion.

    One of my favorite features from framer-motion are the whileTap and whileHover props.

    Is this something you would consider adding too?

    Thanks!

    opened by vbylen 16
Owner
Legend
Legend is a productivity app designed to work the way you do and to be the one place for all your productivity needs.
Legend
Create magical move transitions between scenes in react-native 🐰🎩✨

Important react-native-shared-element update! A follow up project called react-native-shared-element has been created which can be considered the succ

Hein Rutjes 980 Nov 27, 2022
React Native Fiesta - A set of celebration animations

?? A set of celebration animations powered by @shopify/react-native-skia. Engage more with your users by celebrating in your React Native application.

Mateo Guzmán 174 Jan 8, 2023
React Native Bridge for Native Spruce Animation Library

ReactNative Spruce - (Android & iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can still use thi

Pranav Raj Singh Chauhan 536 Sep 22, 2022
React Native's Animated library reimplemented

React Native's Animated library reimplemented Reanimated 2 is here! Check out our documentation page for more information React Native Reanimated prov

Software Mansion 6.8k Jan 2, 2023
Modern Animated UI Library For React-Native

react-native-ui-toolkit UI Toolkit For React Native Installation npm install react-native-ui-toolkit Usage import { ScrollableHeader } from "react-nat

Tariq Khan 3 Sep 14, 2022
Experimental implementation of high performance interactable views in React Native

Interactable react-native-interactable LOOKING FOR A MAINTAINER We love this project, but currently we don’t have enough time to work on it. So we are

Wix.com 5.2k Dec 29, 2022
React Native component for animated sprite and tweening

The React Native Animated Sprite react-native-animated-sprite (RNAS) package is a feature rich declarative component for animation, tweening, and drag

null 131 Jan 4, 2023
React-native-animatable-flatlist: Ready to go animatable flatlist based on reanimated 2

react-native-animatable-flatlist ready to go animatable flatlist based on reanimated 2 Features Hooks support Not opinionaded, Fully extendable Suppor

kubilay 5 Apr 27, 2022
Gesture based interruptible animation samples in React Native.

Gesture based interruptible animation samples in React Native.

Ashu 178 Dec 28, 2022
A simple animation for react-native

Simple structure Simple and performance Easy to start a new project Support more platform: android, ios and web Techincal react-native: lets you creat

null 9 Nov 6, 2022
📺 Display and animate textured Wavefront .OBJ 3D models with 60fps - native bridge to GLView (iOS) and jPCT-AE (Android)

react-native-gl-model-view A <ModelView> component for react-native, allowing you to display and animate any Wavefront .OBJ 3D object. Realized with a

Michael Straßburger 387 Dec 21, 2022
🎞️ Animated API math extension - approximates sin, cos and tan by combining Animated Nodes with full Native Driver support

react-native-animated-math An Animated API math extension - implementing sine, cosine, tangent and others as AnimatedNodes. All calculations are imple

Michael Straßburger 74 Dec 7, 2022
Engineering at EcoVadis 16 Aug 22, 2022
A tiny and simple helper set to make it easy to switch your styles in React Native when switching between light and dark mode. 🌟

A tiny and simple helper set to make it easy to switch your styles in React Native when switching between "light" and "dark" mode

Lewis Yearsley 5 Jan 3, 2023
🚀 Smooth Liquid Swipe Animation to transition between different components.

?? React LiquidSwipe Very smooth component transition animation with liquid swipe effect. Loved the project? Please consider donating to help it impro

Ashutosh Hathidara 362 Dec 16, 2022
Smooth Liquid Swipe Animation to transition between different components.

React Native Liquid Swipe Telas com transições baseadas no efeito de Liquid Swipe ✨ Tecnologias Esse projeto foi desenvolvido com as seguintes tecnolo

Victor Laurentino 2 Nov 19, 2021
Easily animate react-native components between two styles.

react-native-animated-styles Easily animate react-native components between two styles. Similar concept to adding and removing a CSS class to animate

Eric Kerr 20 Apr 11, 2022
AngularJS Module to make images appear with transition as they load.

ng-image-appear AngularJS Module to make images appear with transition as they load. Wraps the img tag within a wrapper and adds a gif loader in betwe

Arun Michael Dsouza 122 Aug 13, 2022
Standard set of easy to use animations and declarative transitions for React Native

Standard set of easy to use animations and declarative transitions for React Native

Joel Arvidsson 9.4k Jan 7, 2023
Standard set of easy to use animations and declarative transitions for React Native

react-native-animatable Declarative transitions and animations for React Native Installation $ npm install react-native-animatable --save Usage To ani

Joel Arvidsson 9.4k Jan 3, 2023