Smooth Loading Transitions with Framer Motion | AnimateSharedLayout

[@Styyxxxx]

He returned when the world needed him the most.

[@WrongAkram]

🙏🏽

[@metroexperiments]

Yay He is back!

[@WrongAkram]

You know it

[@matthewao]

Your videos are a BLESSING. Thanks for coming back! :)

[@WrongAkram]

Holy content 🙏🏽

[@iskhakasan]

What you do is really exceptional, thank you for sharing with these tutorials and your time!

[@WrongAkram]

Glad you think so!

[@Yes-xc9sw]

What an insane video, thank you for everything you do. Hope your break went well

[@WrongAkram]

Thanks for asking! Yep went pretty well, really glad you enjoyed the video’

[@hassanbhattiOfi]

Welcome back king 👑, please always bring that kinda stuff. It really helps a lot! ❤️

[@ashwinkhode5249]

I hope you had a good break. Glad to have you back 🤗

[@clebhosh]

Welcome back dude!

[@WrongAkram]

Hey hey! Thank you!

[@londelidess]

I miss this guy so bad

[@mohnishlandge]

Quality is soo good, hope to make this level of content in future 💙

[@WrongAkram]

Your work is sick! If you want to start making tutorials, feel free to ask away on any questions you may have!

[@shamilaramachandran116]

Never knew this thing existed till I bumped into your video. Thank you for making all these videos. I'm a fan :)

[@sanjipun]

Best react tutor, finally back with a banggg!

[@alisajadahmadi978]

Thank you so much brother. My Components are now very clean using this method.

[@benreimer2090]

If anyone is getting errors when installing node packages, it's probably node-sass. In the package.json remove node-sass and install dart sass instead with a 'npm install sass'. Also Framer Motion now requires React 18 or greater, so you'll need to update your React version as well

[@Madewillarts]

I have tried this and I still can't figure it out, really hoping someone can help me out here

[@benreimer2090]

@@Madewillarts I haven't looked at this in awhile but might be able to help - what error do you get, and when in the process?

[@joeyorofino2944]

@@benreimer2090 Too many errors to describe, try to follow along with the first 3 minutes and you will see. It has something to do with create-react-app being deprecated. This is a pretty outdated build pipeline. Maybe you could redo the demo

[@dinanoya2655]

this is my fave channel, thank you for the tutorials!

[@dave_an]

Dang, its been 2 years, i hope you come back again with another great video again

[@MyGeorge1964]

Keep 'em coming they're like little gems - thank you!

[@floriankulig6929]

The framer motion series is da best!

[@WrongAkram]

Framer motion is 🔥

[@feossandon]

Thanks for coming back

[@WrongAkram]

You bet!

[@NguyenHuy-pj4qj]

you make it looks so easy -___- hats off!

[@Uncaught_in_promise]

So happy to see you back.

[@WrongAkram]

:)

[@ajaykumarreddy8841]

Great video! Will u ever do a Framer Motion - Beginner to Advanced tutorial? There are not many of them on here.

[@WrongAkram]

Been thinking about it

[@Bri8765n]

@@WrongAkram plzzzzzzzzzzzz

[@issackhant]

Please do it

[@rajusam5]

Back with a bang 💣🙌

[@WrongAkram]

Bang bang!

[@shofol3192]

Oh! Thanks, you are back!

[@jervx829]

your changing my boring webdev UI skill into something new. THANKYOU SOMUCH😇🙏🙏

[@RahulSharma-ox6se]

I love the new style of presentation. Everything is appropriately big and precise. Missed your videos the most, Akram! Thank you for your time!

[@philoo.sophical]

damn... some high quality shit right here. keep up the fantastic work !👌🏻

[@windmaomao]

This is real kool and detailed tutorial. Thank you.

[@DQime]

Hands down the best KZbin channel for coding the best designs and animations 👌

[@WrongAkram]

Appreciate that!

[@surjithctly]

🔥🔥🔥 watched some of your old videos and just came here to say its awesome. Great job 👏

[@saiteja8605]

Man, you are a magician!!!

[@marlonmarcello]

Great tutorial man, love the pace ande details. Keep them coming please!

[@WrongAkram]

Thanks, will do!

[@kyryloren]

Missed the videos! This is awesome, I didn't know framer motion had this to offer!

[@WrongAkram]

My man! Yep, it’s pretty wild

[@tonsofcode2478]

This is so clean

[@radomirmijovic2605]

Awesome video, great explanation. Thanks man!

[@16mehulgawhale90]

sooooo happy to see you back 💯🔥

[@WrongAkram]

Thanks for having me back

[@kevinhe8188]

Awesome video, very inspiring, so glad to learn so much. One thing i found that if i use the ease[[0.6, 0.01, -0.05, 0.95]] for Image blocks, the animation didn't happy, once i change the -0.05 to 0.05, it works...is that a bug of framer motion ?

[@mihailodukic601]

Content is flawless !

[@WrongAkram]

oof flawless.... love that word :)

[@yashrabari7495]

Super bro. I can't imagine these kind of animations done in react.

[@anavon1090]

Welcome back 🤟

[@WrongAkram]

Thank ya!

[@user-qe9cw6wg9r]

we missed you

[@nelsonfleig5024]

Awesome! The best resource for learning Framer Motion and SharedLayout. Hope you do a new Awwwards series soon!!

[@damianemmanuel9294]

i love your tutorials

[@rickybeats1919]

Thank you for this. Please more framer motion tutorials!

[@cliffy00]

I love these videos man, thanks for your hard work.

[@WrongAkram]

Glad you enjoy them!

[@vuongqtvn]

wow beautiful

[@jonathangardn]

Cool as always man!

[@WrongAkram]

It be like that

[@abishvijayan76]

Finally, You're Back.

[@WrongAkram]

Good to be back!

[@thangha7125]

Dear God, Can you make more and more and more, thank you for everything you do!!!!

[@amirhaddad5985]

Bro long time no see...welcome back

[@WrongAkram]

Glad to be back

[@Francois3k]

Omggggg your back from the dead broooooooooo I missed you so much mann. Your videos are beat in this niche in KZbin. I really appreciate the link u put for text cause sometime i get stuck with some of ur tutorials. Man keep up with the fire 🔥 #1 fan

[@WrongAkram]

My man! Always there for support! How’s life been?

[@Francois3k]

@@WrongAkram just still grinding trying build an get out of tutorial hell but I don't if I'm watching ur videos lmaoo. But bro I miss ur videos it really refreshing to see ur content. I cant for more of ur videos hell once I finally get job in the field I'll pay for the subscription. Still ur #1 fan keep up with the fireee🔥

[@IkraamDev]

Welcome back again

[@WrongAkram]

My twin, what’s good man!

[@blackgospel5474]

gald you're back

[@tridsanutaychathunyachot6952]

this such an amazing video for me it show me how the motion work in advance .I expected you would make more good video like this again 🙂

[@maxmeza4350]

Excellent video :D

[@azhar_malik]

Do a video on starter files you use like build something like this from scratch for once Please!! and more of awwwards series we want.

[@WrongAkram]

🤔

[@abdullasogay5758]

Yeah those starter files made me dizzy

[@gjb7966]

top notch as always 🔥🔥

[@WrongAkram]

Thank you!

[@ItsMrAbhay]

Welcome Back...🔥

[@WrongAkram]

Glad to be back!

[@ZEESHANJUNAID2222]

Welcome back :)

[@WrongAkram]

Thank you 🙏🏽

[@CommunityAllSeasons]

This is brilliant! Would love to see how framer and redux work together 🙏

[@WrongAkram]

Redux is pretty neat but jotai looks like super cool!

[@CommunityAllSeasons]

@@WrongAkram oh hell yeah! You reckon you'd do a tut on it? sweet-state is usually my go to but this looks hectic

[@nermeene9245]

finalllyyyyy!! hes back!

[@MaganDesigns]

You inspired me to be a better developer. Thank you 💯🔥 🚀 👏🏾 🙏🏾

[@WrongAkram]

Wow! Super happy to hear that :))

[@meeexy116]

how do you come up with those values for ease function 7:49 what tools do you use if any to find the best attributes for the animation

[@ajaysingh3519]

He bacc!

[@WrongAkram]

big bac

[@aw8951]

Do you have a tutorial showing how to click an image and it opens larger to a new page (like clicking an image of a cases study, then it transitions into the hero image of a case study page?)

[@sithumdasantha3147]

Awesome. 🤍 Need these kinds of videos. Keep It up.

[@vaibhavagrawal431]

I founded a gem today 🤩 thanks, @Wrong Akram

[@WrongAkram]

Welcome!

[@kahangadhiya369]

You are a gem♥️ my friend

[@WrongAkram]

[@luisernestoruiz4170]

Awesome ! 🙌

[@Zvyru.]

Welcome baaaack.

[@WrongAkram]

Thanks!

[@prodigymuj]

You are what they call hero.

[@WrongAkram]

Where my cape at?

[@Crevulus]

Your techniques are so valuable to learn, but more than anything in all of your videos I'm struck by how beautiful the base designs are. I'd love to get some video tutorials from you on how you design your sites, and scaffolding all the base css you put into the start code. It's all well and good knowing how to stagger children, but if you've got an ugly site then it means nothing.

[@abdullahsiam7609]

did you got one?

[@vilavg3657]

@wrongakram - thanks so much for this. Is there anyway to apply this to websites built in the Framer tool?

[@mdkhaled3226]

Another one on 🔥🔥🔥🔥🔥

[@WrongAkram]

Say it louder for the people in the back!!!

[@VCEPEGA]

Thanks for the lesson. Is it possible to repeat such an animation without using react, but using javascript? For example GSAP?

[@kacperfaligowski9162]

Love your stuff

[@WrongAkram]

Glad you love it!

[@ziacodes]

how do you get the fiels and images from dribble?

[@NikosChristoforidis]

Maybe i'm missing something but how the hidden,show, exit animations work on container variants since they've been declared inside item variants.

[@mohammedamin1995]

incredible stuff man! Can you make a tutorial on an animated vertical timeline using framer?

[@CoryTheSimmons]

Tutorial starts at 4:50

[@magdasok-f2i]

Does anybody else has the same issue: after cloning the repo and running "npm i && npm start" the page won't load, it says: "Unable to connect". Trying to figure out why.

[@ajithmoni1712]

Lovely tutorial. What is the VS Code intellisense plugin for Framer Motion to show properties/keys?

[@Rohit-go7io]

How you created the effect in terminal when you are typing the command? I really liked that.

[@ABDULMANAN-el8gr]

Ramadan Mubarak 🔆

[@WrongAkram]

Ramadan Mubarak to you too!

[@princejadiya9997]

Please do more framer motion videos

[@NimmoIsmaila]

In the framer motion container element the initial and animate prop you passed into it was not defined. I didn't see were you defined it

[@KevinMartinez-jy2sr]

Cool! how to apply this in Squarespace?

[@АндрейАндрей-у6к]

man, you are coooool Pleaseeee make more videos with react router animations

[@WrongAkram]

😎

[@zhxnrs]

ayyy my man's back again

[@WrongAkram]

back 2 back

[@basicprofile]

what is that confetti effect on your terminal?

[@damianemmanuel9294]

Wrong, i ve being trying to build something a cards,that overlaps each other from the left and right,and that can be swiped,clicked to view the contents,but i ve being struggling with it, please can you just help me out

[@usernameL1]

You're giving "cointainer" to the motionDiv, and you're also setting initial and exit properties for that div even thought "container" doesn't have those. Is that right?

[@fishmisch]

KZbin doesnt even know how to handle your quality, yet... soon 1m subs

[@andrealvaradocampos4050]

hello there will be current videos when you return to youtube are you missed in these parts?

[@joeyorofino2944]

Hey, looks like this tutorial no longer works to follow along. Anyone find out how to fix it?

[@artursradionovs9543]

How to get the displayed size of imported packages in gzip?

[@danboss9758]

hi i wanted to ask, will i be able to run this on a firebase hosted website to display everything on the video as shown here ?

[@designcoded7585]

sir can you tell whats the difference between path spacing , path offset in framer motion what the exact use of it in svg animation

[@nikilragav]

do you need to different y values for mobile?

[@sustainable-hacks]

Hi, Can you help me with creating other pages and linking them to header 🙂 ?