Solution for «….expected function/fragment but got JSX… something…..” Home.jsx -> -- import Transition from “../Transition” function Home(){ return( //Home ) } const WrappedHome = Transition(Home) export default WrappedHome -- And then just import it in as import Home from “../Home” 5:55
Bro, I need help, its showing only the slide-out animation. I mean, the screen does not stay in black for a moment and then shrink. Is there something new different??
What about sliding left and right using back and forward buttons, how would you control which direction the page slides in/out based on which route the user is going to + where the user is coming from?
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Any one know how solve this??
This video prompted me to try implementing on Gatsby 🎉 not going great lol used filename instead of page API and most tutorials are old but still a fun idea 👍
great video mate, but a quick question, is there any workaround for pages that await api calls before loading? or for example animations for page->loading screen->page ?
make sure you have " return () => ( ... " in transition.js, it didn't work because i didn't notice i typed { insted of ( and function didn't return anything
Thats great content. I have the issue that when you first load the page ir activates de slide out animation on the loading route. Is there any way to evoid that?
Trying to do this i got a problem saying “Could not fast refresh”. I’m not able to see my page at all. Anyone else having this issue or know how to fix? I’m using jsx as well.
@@codegrid hey thank you i juste fix it i change the transition function to import React from 'react' import { motion } from "framer-motion"; function Transition({children}) { return (
{children}
) } export default Transition and i change components pages to
Hi, may be I missed a step but, I tried to use it with Typescript and I have an error occured "src\transition.ts - Line 5:9: Parsing error: Type expected" in transition.tsx.. Is there anyone who know how can I fix it please ?
Haven’t built a single react app since last 6 months lol (until this one) so I am totally unaware what’s going on. Thanks for the update! Will take a look 👍
Make sure that your application is adaptive, your images/videos have fixed height, and for your navbar, give it higher z-index than your transition element.
Ooh, I probably skipped the last chapter 😅, thanks I was wondering how to make a custom component that takes another component/page as a prop and makes it animate on it's way out, this really helped
Also if possible, use your own voice or just subtitles/text, I hate the fake computer generated voice, even if used in such helpful videos, I'd much rather listen to the background music and read text or have the video completely silent than to hear any form of annoying fake voice, this is just a suggestion not some criticism, but yeah I fucking hate the fake voice
That Router component must've changed while you've made this video. Now considering the context, Routes should be used (I think, feel free to correct me)
@@codegrid yes but I guess we can't use it with router Dom , we need to use it with useRouter , onChangeaComplet but there is only a few tutorials to do it with nextjs
import { motion } from 'framer-motion'; import React from 'react'; function transition(Component) { return function TransitionComponent(props) { return (
); }; } export default transition; try to pass props like this
Hey ,what about handling animation ? In barba and highway when u leave the page u need to destroy animation (like scrolltrigger and locomotive scroll for example ) and restart them on new page ,same for this?
Sorry for using CRA like a noob lmao. Built first plain react app from scratch after almost a year or so 💀
2:58 - 3:11 Spittin' bars.
More usecase with framer motion 🎉🎉🎉
🙌🏽
Love your content. So underrated you deserve way more subs.
Glad you think so!
I have to give you props(no pun intended) for sublime music taste you have.
❤️
Please keep making videos with React. We want to learn more about React js and framer Motion .
💯
Codegrid the goat 🐐
Awesome video, mate 🍻🍻
Solution for «….expected function/fragment but got JSX… something…..”
Home.jsx ->
--
import Transition from “../Transition”
function Home(){
return(
//Home
)
}
const WrappedHome = Transition(Home)
export default WrappedHome
--
And then just import it in as import Home from “../Home”
5:55
Amazing video!!!
Awesome Content
Bro, I need help, its showing only the slide-out animation. I mean, the screen does not stay in black for a moment and then shrink. Is there something new different??
same here any fix for that?
Great work bro.
More!!!
Thanks bro
Bro your GSAP STUFF are dope but need more framer motion stuff like this too, anyway loved this tutorial.
Ty bro
Omg you don't know how I love this
Keep makaing like this project bro ❤❤❤
❤️
What about sliding left and right using back and forward buttons, how would you control which direction the page slides in/out based on which route the user is going to + where the user is coming from?
Awesome! Love the GSAP stuff, but definitely hoping to see more Framer too
Ty
Thanks for sharing
Ty
whats 0gComponent?? it throws error for me... am using typescript
nice work bro
Thanks bro
thanks my bro
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Any one know how solve this??
do like : const transition = (OgComponent) => {
return (props) => (
daamn, in 6 minutes really?????????
keep it uuup maaan❤🔥❤🔥❤🔥❤🔥❤🔥❤🔥❤🔥❤🔥
As stated before keep up the react videos!
🙌🏽
This video prompted me to try implementing on Gatsby 🎉 not going great lol used filename instead of page API and most tutorials are old but still a fun idea 👍
Is it possible to make that animation work on NextJs (v. 14.2+) app router?
great video mate, but a quick question, is there any workaround for pages that await api calls before loading? or for example animations for page->loading screen->page ?
how can we add animation to the other components on the page like navbar and h1 after the page transition is finished..?
this code prevents passing props, is there any idea ?
more videos like this pls
🙌🏽
Awesome, please make tutorial React Page Transitions with GSAP
this is awesome! we need more tutorial like this in React! what about react + gsap?
nice stuff. please provide more framer motion tutorials.
Sure
I wander if this can be used with Remix? Great and inspiring tut!
Replacing _export default Movielist_ with _export default transition(Movielist)_ makes the Movielist component fail to render. Why?
make sure you have " return () => ( ... " in transition.js, it didn't work because i didn't notice i typed { insted of ( and function didn't return anything
@@eqwzx9402 thanks, this worked for me
@@eqwzx9402 Thank you so much bro
Thats great content. I have the issue that when you first load the page ir activates de slide out animation on the loading route. Is there any way to evoid that?
Same
Did you find a solution?
@@bixckscopez3553 Did you find a solution?
@@moazelgandy I switched to framer motion for my page transition effects, much easier in that case
What if I want the routes animation to enter and exit at a same time? Just like in some apps. I want to achieve the same on webapp.
I don't know why but the first transition "slide-in" doesn't work for me :(
Yeah, same problem
Did you fix it?
I found solution. You have to use in Routes, key and location (
Did you find a solution?
@@ConanWZP This didn't work for me do have any other ideas?
Trying to do this i got a problem saying “Could not fast refresh”. I’m not able to see my page at all. Anyone else having this issue or know how to fix? I’m using jsx as well.
i'm using react router v6.4 and i can't use useLocation how to fix it ?
I'm using createBrowserRouter, how can I define location?
Animation transition work but i can't see the components in the middle juste transition work route path but no content ?
Whatever has shown in the video is enough to make it work. The only case it doesn’t work as shown in the demo is when you miss anything
@@codegrid hey thank you i juste fix it i change the transition function to
import React from 'react'
import { motion } from "framer-motion";
function Transition({children}) {
return (
{children}
)
}
export default Transition
and i change components pages to
Page d'accueil !!
What is the font name?
Thanks for the tutorial ♥
Anyway, what's the name of the background music? It's kinda cool
Hi, may be I missed a step but, I tried to use it with Typescript and I have an error occured "src\transition.ts - Line 5:9: Parsing error: Type expected" in transition.tsx.. Is there anyone who know how can I fix it please ?
maybe same as me, your transition file is "transition.js" instead of "transition.tsx", depends on your project tho.
Tip: CRA is officially deprecated, using vite is far more better solution :))
Haven’t built a single react app since last 6 months lol (until this one) so I am totally unaware what’s going on. Thanks for the update! Will take a look 👍
I think it's deprecated not depreciated. Also, Vite is now the only choice for developers.
@@sujayxaradhya yea right, typo
@@codegrid good luck bro
the h1 is vanishing after putting the transition(page name), it doesn't work
same issue. Are you resolve this problem?
@@emmanuelkouassi7313 add return and it will work..
const transition = (OgComponent) => {
return () => {
return ( //-----add this
);
};
};
More please
how to do it with createBrowserRouter
if u r using next js just start from 4:49
I don't understand why but the ease-in doesn't work for me, I don't see the animation but the animation takes the good amount of time.
same!
Hi I'm new in react.. I see vulnerability problem. Is it safe to run the program?
Yes lol
the navbar disappears between transitions and everything jumps up
Make sure that your application is adaptive, your images/videos have fixed height, and for your navbar, give it higher z-index than your transition element.
I love you
🥂
Why not use AnimatePresence?
@6:30 👀
Ooh, I probably skipped the last chapter 😅, thanks
I was wondering how to make a custom component that takes another component/page as a prop and makes it animate on it's way out, this really helped
Also if possible, use your own voice or just subtitles/text, I hate the fake computer generated voice, even if used in such helpful videos, I'd much rather listen to the background music and read text or have the video completely silent than to hear any form of annoying fake voice, this is just a suggestion not some criticism, but yeah I fucking hate the fake voice
Please come with MERN stack project with gsap❤
That Router component must've changed while you've made this video. Now considering the context, Routes should be used (I think, feel free to correct me)
Everything was great until @4:15 "Uncaught Error: useLocation() may be used only in the context of a component."
same, have you managed to resolve this issue?
What about nextjs router
I think the animation approach will be the same
@@codegrid yes but I guess we can't use it with router Dom , we need to use it with useRouter , onChangeaComplet but there is only a few tutorials to do it with nextjs
Yes a nextjs version would be awesome.
that intro 💀
Most awaited tutorial ❤️, Need more React tutorial
Sure
Not even sure what's wrong but simply doing export default transition(Component) is not rendering the component.
import { motion } from 'framer-motion';
import React from 'react';
function transition(Component) {
return function TransitionComponent(props) {
return (
);
};
}
export default transition;
try to pass props like this
Why are u USING CRA
Sorry bro
Is this your voice?😅
Haha
Create react app 😂
🤡🤡🤡🤣
Hey ,what about handling animation ? In barba and highway when u leave the page u need to destroy animation (like scrolltrigger and locomotive scroll for example ) and restart them on new page ,same for this?
I'm new but late to Framer motion. It looks like Animate Presence handles it for you. It didn't take any destroy block to work.