AnimateRoute

This component extends Route component of react-router-dom and provides additionnal props for animating the route.

By default, AnimateSwitch will set same animation for all its contained routes. So if you want all your routes to behave the same, just use AnimateRoute as a regular Route and nothing more.

However if you want a particular route to use a different animation, you can do it. For basic animations just set animationType prop:

• fade (default)
• scale
• slide up
• slide down
• slide left
• slide right

If your not satisfied with these animations, you can do your own animation with some framer-motion imported props (inherited from MountTransition). See below.

Can't be used outside <AnimateSwitch>.
AnimateRoute uses MountTransition component under the hood to make the animation.

Example

import { AnimateSwitch, AnimateRoute } from 'la-danze-ui';

function App() {

return (

...

<AnimateSwitch animationType="slideLeft">

// AnimateRoute must be contained in a AnimateSwitch

<AnimateRoute path="/example">

example

</AnimateRoute>

// Different animation for this route

<AnimateRoute path="/different-animation" animationType="scale">

different animation

</AnimateRoute>

...

</AnimatedSwitch>

);

}

Props

Extends Route props

Additional props:

Name	Type	Default	Required	Description
animationType	'fade' |'scale' |'slideUp' |'slideDown' |'slideLeft' |'slideRight'	'fade'	No	Animation type of the route. Overrides variants prop.
initial	Target |VariantLabels |boolean	'initial'	No	See framer-motion doc.
animate	AnimationControls |TargetAndTransition |VariantLabels |boolean	'in'	No	See framer-motion doc.
exit	TargetAndTransition | VariantLabels	'out'	No	See framer-motion doc.
transition	Transition	{ duration: 0.225 }	No	See framer-motion doc.
variants	Variants		No	See framer-motion doc.
style	MotionStyle		No	See framer-motion doc.