Skip to content

Instantly share code, notes, and snippets.

@stolinski
Last active June 8, 2022 05:54
Show Gist options
  • Save stolinski/f33bbd5e01f37dd9e9003f0f40f55a4f to your computer and use it in GitHub Desktop.
Save stolinski/f33bbd5e01f37dd9e9003f0f40f55a4f to your computer and use it in GitHub Desktop.
Route Transitions with Framer Motion
const FakeComponent = () => {
return (
<AnimatedRoutes exitBeforeEnter initial={false}>
<RouteTransition exact path="/some-route">
<NewUsers />
</RouteTransition>
<RouteTransition exact path="/yo" >
<Users />
</RouteTransition>
</AnimatedRoutes>
)
}
import { FC } from 'react'
import { motion } from 'framer-motion'
type Props = {
slide?: number
slideUp?: number
}
export const MountTransition: FC<Props> = ({
children,
slide = 0,
slideUp = 0,
}) => (
<motion.div
exit={{ opacity: 0, x: slide, y: slideUp }}
initial={{ opacity: 0, x: slide, y: slideUp }}
animate={{ opacity: 1, x: 0, y: 0 }}
>
{children}
</motion.div>
)
import { FC } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
type Props = {
slide?: number
slideUp?: number
isActive: boolean
}
export const OpenIn: FC<Props> = ({ children, isActive = false }) => (
<AnimatePresence>
{isActive && (
<motion.div
exit={{ opacity: 0, height: 0, overflow: 'hidden' }}
initial={{ opacity: 0, height: 0, overflow: 'hidden' }}
animate={{ opacity: 1, height: 'auto', overflow: 'visible' }}
>
{children}
</motion.div>
)}
</AnimatePresence>
)
import { FC } from 'react'
import { AnimatePresence } from 'framer-motion'
import { Route, Switch, useLocation } from 'react-router-dom'
import { MountTransition } from './MountTransition'
type Props = {
exact?: boolean
path: string
slide?: number
slideUp?: number
}
export const RouteTransition: FC<Props> = ({
children,
exact = false,
path,
slide = 0,
slideUp = 0,
...rest
}) => (
<Route exact={exact} path="/admang/service-center" {...rest}>
<MountTransition slide={slide} slideUp={slideUp}>
{children}
</MountTransition>
</Route>
)
type RoutesProps = {
exitBeforeEnter?: boolean
initial?: boolean
}
export const AnimatedRoutes: FC<RoutesProps> = ({
children,
exitBeforeEnter = true,
initial = false,
}) => {
const location = useLocation()
return (
<AnimatePresence exitBeforeEnter={exitBeforeEnter} initial={initial}>
<Switch location={location} key={location.pathname}>
{children}
</Switch>
</AnimatePresence>
)
}
import { FC } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
type Props = {
slide?: number
isActive: boolean
key: string
}
export const SlideIn: FC<Props> = ({
children,
isActive = false,
slide = 30,
key = 'auniquestring',
}) => (
<AnimatePresence>
{isActive && (
<motion.div
key={key}
exit={{ opacity: 0, x: slide }}
initial={{ opacity: 0, x: slide }}
animate={{ opacity: 1, x: 0 }}
>
{children}
</motion.div>
)}
</AnimatePresence>
)
@ThomasBurleson
Copy link

<Route exact={exact} path="/admang/service-center" {...rest}>

should be

<Route exact={exact} path={path} {...rest}>

right ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment