Getting Started
IntroductionUsage
OverviewSvgLinear GradientCustom ComponentsTransform OriginAnimate PropsConfigurationTailwind CSSAnimate PresenceResources
CaveatsTypescriptNext.jsAnimate Props
Legend Motion allows you to animate props, which passes an Animated.Value
into the prop. It's not necessary for the basic React Native components, but it's useful for Legend Motion's SVG and LinearGradient components or for creating custom components.
See this SVG example that animates the fill
prop:
<MotionSvg.Svg height="200" width="200">
<MotionSvg.Rect
stroke="#555"
strokeWidth="1"
x="0"
y="10"
width="150"
height="150"
animateProps={{
fill: value ? '#F81FEC' : '#59B0F8',
}}
transition={{
type: 'tween',
duration: 500,
}}
/>
</MotionSvg.Svg>
value:
0