legendapp / legend-motion Goto Github PK
View Code? Open in Web Editor NEWLegend Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.
License: MIT License
Legend Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.
License: MIT License
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>
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?
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:
Expected behavior
No error in browser console.
Additional context
Maybe due to @legendapp/motion library still relying on "tailwindcss-react-native": "^1.3.1" as peerDependencies
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
?
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'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.
It'd be great if this supported reversing an animation once it reaches the end–I'd like to animate a tween between 0 opacity and 100 back and forth indefinitely.
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
.
Hi! I came across a dependency issue in my project whilst installing gluestack-ui for nativewind. Your package supports "nativewind": "^2.0.0"
but the latest version is nativewind": "4.0.36
.
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!
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';
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 Pressable
component 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:
Thanks!
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!
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",
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.