Just a simple fade
<MotionAnimate reset={true}>
<>Just a simple fade</>
</MotionAnimate>
Animate up a little....
<MotionAnimate animation='fadeInUp' reset={true}>
<>Animate up a little....</>
</MotionAnimate>
Or animate up a lot
<MotionAnimate
animation='fadeInUp'
reset={true}
distance={200}
delay={1}
speed={1}>
<>Or animate up a lot</>
</MotionAnimate>
add in some custom easing
<MotionAnimate
delay={0.4}
speed={2}
ease={[0.75, 0.45, 0.53, 0.94]}
reset={true}>
<>Animate up a little....</>
</MotionAnimate>
or do your own weird thing
<MotionAnimate
variant={{
hidden: { opacity: 0.2, rotate: -180 },
show: {
opacity: 0.8,
rotate: 0,
transition: {
repeat: Infinity,
duration: 4,
repeatDelay: 1,
type: 'spring'
}
}
}}>
<>or do your own weird thing</>
</MotionAnimate>
Fade in and out on scroll
<MotionAnimate animation='scrollOpacity'>
<div>Fade in and out on scroll</div>
</MotionAnimate>
Define your own scroll opacity trigger positions and easing
<MotionAnimate
animation='scrollOpacity'
ease={[0.17, 0.67, 0.97, -0.48]}
scrollPositions={[0.2, 0.5, 0.6, 0.8]}>
<div>Define your own scroll opacity trigger positions and easing</div>
</MotionAnimate>
Fade In (only) With Scroll
<MotionAnimate animation='scrollFadeIn'>
<div>Fade In (only) With Scroll</div>
</MotionAnimate>
Fade in slow...
<MotionAnimate animation='scrollFadeIn' scrollPositions={[0.1, 0.9]}>
<div>Fade in slow...</div>
</MotionAnimate>
Or just fade out instead
<MotionAnimate animation='scrollFadeOut'>
<div>Or just fade out instead</div>
</MotionAnimate>
Scroll Position
<MotionAnimate animation='scrollPosition' xPos={[1400, -600]}>
<div>Scroll Position</div>
</MotionAnimate>
🤾🏼♀️
<MotionAnimate animation='scrollPosition'
scrollPositions={[0.4, 0.8]}
xPos={[200, 800]}
yPos={[0, -200]}>
<div>Scroll Position</div>
</MotionAnimate>