legendapp / legend-motion Goto Github PK

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.

Is it possible to use Motion to animate the transitions of react-native components like TextInput and Pressable?

For example, lets say we have a TextInput component and a Pressablecomponent inside a <View className="flex"> container. TextInput has className="flex-grow" so when the Pressable component is hidden, its width will grow if the Pressable is removed/hidden. How can Motion be used to animate this transition?

Tried the following

import { createMotionComponent } from "@legendapp/motion";
import {
  Pressable,
  TextInput,
} from "react-native";

const AnimatedPressable = createMotionComponent(Pressable);
const AnimatedTextInput = createMotionComponent(TextInput);

...

<View className="flex flex-row ....">
  <AnimatedTextInput/>
  <AnimatedPressable className="flex-grow ...">
    <Something />
  </AnimatedPressable>
</View>

but the console is throwing a warning mesesages like:

WARN measure cannot find view with tag #1839

Packages used:

• @legendapp/[email protected]
• [email protected]
• [email protected]
• [email protected]

Thanks!

Recently switched to metro web due to migrating to Expo Router and legend-motion no longer works. Reported originally on their repo here: expo/router#650

Error
Unable to resolve "@legendapp/motion"

Minimal reproducible example
//app.json
"web": {
"bundler": "metro",
}

// app.tsx
import { AnimatePresence } from '@legendapp/motion';

Hello, recently I was searching the docs/website on how to achieve loop animations. However I only found a solution in your github issues (#7). It would be great if this would be documented.

transition={{ loop: -1 }}

Thank you for the great lib!

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

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

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!

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.

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?

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",

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?

Is it not possible to customise the timing of the initial and exit animations separately?

I would have thought the following would work, but it doesn't:

<Motion.Text
                initial={{ opacity: 0 }}
                animate={{
                  opacity: 1,
                  duration: 1000,
                  delay: 500
                }}
                exit={{
                  opacity: 0,
                  duration: 300,
                }}
                >
               {text}
              </Motion.Text>

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.

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.

I'm using version 2.0.0.