[{"_1":2,"_67":-5,"_68":-5},"loaderData",{"_3":4,"_66":-5},"routes/post",{"_5":6,"_55":56,"_65":-5},"post",{"_7":8,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":26,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_52":53},"banner",{"_9":10,"_11":12},"img","/assets/courses/banner_minimojs.png","link","/courses/minimo-js-para-react/detail","id","64a615b5cbaaa2993b328b0d","createdAt",["D",1688606133651],"updatedAt",["D",1688606766610],"slug","how-to-transition-between-pages-with-framer-motion-and-remix-2023","title","How to transition between pages with Framer Motion and Remix","published",true,"coverImage","https://res.cloudinary.com/dmq9pzw0o/image/upload/v1603136735/page-transitions-in-react/Frame_1_2_yvnmbd.png","body","It is really simple to add transitions between pages with Framer Motion in Remix.\n\nThe best part of this configuration we are about to add is that we need to do it in just one file `root.tsx`.\n\nLet's add our animation in the entry file of our project:\n\n```jsx\n// app/root.tsx\n\nimport { AnimatePresence, motion } from \"framer-motion\";\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n```\n\nAnd that's it. It's time for you to work in a good animation.\n\nAbrazo. blissmo.\n\n## Related links\n\n[Animate presence](https://www.framer.com/motion/animate-presence/?utm_source=google&utm_medium=adwords&utm_campaign=TW-WW-All-GS-UA-Traffic-20190326-Brand.Bmm_&gad=1&gclid=CjwKCAjwqZSlBhBwEiwAfoZUIGqTgEj-Vsr4OPNHprnwMCO7XhkxqHOx5CdopKNdDST6JpG9bR3TsxoCU3wQAvD_BwE)","authorAt","@hectorbliss","photoUrl","https://i.imgur.com/TaDTihr.png","isFeatured",false,"metaImage","youtubeLink","","authorAtLink","https://twitter.com/HectorBlisS","authorName","blissmo","mainTag","Remix","tags",[46,47,48,49,50,51],"motion","animation","css","transition","pages","between","category",[54],"Framer","posts",[57,61],{"_21":58,"_35":59,"_19":60},"Entendiendo las rutas de Remix","https://i.imgur.com/PrnvDBm.png","entendiendo_las_rutas_de_remix_mvigv",{"_21":62,"_35":63,"_19":64},"3 Novedades de React Router v7","https://i.imgur.com/oxKgjIb.png","3-novedades-de-react-router-v7-2024","audioData","root","actionData","errors"]

How to transition between pages with Framer Motion and Remix

blissmo

Entendiendo las rutas de Remix

Checa este otro Post

3 Novedades de React Router v7

Checa este otro Post

Animaciones web con React + Motion 🧙🏻