-
-
Notifications
You must be signed in to change notification settings - Fork 150
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Exit animation with framer-motion #414
Comments
Is the link correct? I got 404 when I try to open the demo |
sorry for the confusion it can be viewed now |
Per framer-motion docs:
The issue is that export default function RouteAnimated() {
const [match] = useRoute("/")
return (
<div className="App">
<AnimatePresence mode="wait">
{match &&
<motion.div
initial="in"
animate="stay"
exit="out"
variants={animateVariants}
transition={{ duration: 1 }}
>
Page 1
<br />
<Link to="/2">To 2</Link>
</motion.div>
}
</AnimatePresence>
</div>
);
} |
if I do it like this would I be losing anything that wouter offers, what will be the pros and cons? |
I know but there is currently no way to achieve that using We don't ship const useRoutes = (routes) => {
// save the length of the `routes` array that we receive on the first render
const [routesLen] = useState(() => routes.length);
// because we call `useRoute` inside a loop the number of routes can't be changed!
// otherwise, it breaks the rule of hooks and will cause React to break
if (routesLen !== routes.length) {
throw new Error(
"The length of `routes` array provided to `useRoutes` must be constant!"
);
}
const matches = routes.map((def) => {
return useRoute(def.path);
});
for (let [index, match] of matches.entries()) {
const [isMatch, params] = match;
if (isMatch) {
return cloneElement(routes[index].element, { params });
}
}
return null;
}; I think I can update the README and add this to the FAQ. I would also consider adding |
I have added an FAQ item to the README on using wouter with framer-motion. |
Here is a working CSB: https://codesandbox.io/p/sandbox/romantic-wind-s5ghpj Edit: Make sure to use |
Hi, I've setup a simple demo to demonstrate that exit animation using framer-motion package does not work, does anyone have any idea how to make it to work?
https://codesandbox.io/p/sandbox/elastic-violet-9t9r4h
here is documentation on AnimatePresense component:
https://www.framer.com/motion/animate-presence/
any ideas or contributions are welcome thank you
The text was updated successfully, but these errors were encountered: