Getting Started
IntroductionUsage
OverviewSvgLinear GradientCustom ComponentsTransform OriginAnimate PropsConfigurationTailwind CSSAnimate PresenceResources
CaveatsTypescriptNext.jsCaveats
Cannot mix native and non-native animations
React Native does not support mixing native and non-native animations, so Legend-Motion cannot either. The following properties animate with useNativeDriver and you cannot mix them with any other properties.
- opacity
- x
- y
- scale
- scaleX
- scaleY
- skewX
- skewY
- perspective
- rotate
- rotateY
- rotateZ
- matrix
If you do need to mix properties together we suggest making them separate components.
Transform Origin percentages do not work on SVG
The transformOrigin depends on onLayout from the animated component, which doesn't really apply to drawing SVG elements. So you'll need to specific transformOrigin in pixels.