Smooth Loading Transitions with Framer Motion | AnimateSharedLayout
Вставка
- Опубліковано 19 чер 2024
- Hey guys! Hope you have all had a great time so far. I've been on a long break and coming back with some heat for this episode! Hope you enjoy :)
Code FIles:
github.com/wrongakram/pageloader
Preview:
pageloader-3cf2b.web.app/
Written Tutorial:
www.notion.so/Framer-motion-A...
Framer Motion:
www.framer.com/api/motion/
Dribbble post used:
dribbble.com/shots/15317840-c...
▬ Timestamps ▬▬▬▬▬▬▬▬▬▬
0:00 - Intro
1:30 - Project Breakdown
3:25 - Framer Motion Basics
5:40 - Loader Animations
14:40 - Banner Animations
#FramerMotion #React #WebAnimations
Social Links:
/ wrongakram
github.com/wrongakram
dribbble.com/wrongakram
New to the channel?
Hey there my name is Akram, I am a Front end developer and UI Designer. I'm here to hopefully educate people on how to code projects that actually look good. My stack mainly consist of react.js and node.js. For UI design I like to use adobe XD as my go to. If you have any suggestions on tutorials you would like to see feel free to DM me :)
He returned when the world needed him the most.
🙏🏽
I love the new style of presentation. Everything is appropriately big and precise. Missed your videos the most, Akram! Thank you for your time!
Keep 'em coming they're like little gems - thank you!
Welcome back king 👑, please always bring that kinda stuff. It really helps a lot! ❤️
What you do is really exceptional, thank you for sharing with these tutorials and your time!
Glad you think so!
What an insane video, thank you for everything you do. Hope your break went well
Thanks for asking! Yep went pretty well, really glad you enjoyed the video’
Your videos are a BLESSING. Thanks for coming back! :)
Holy content 🙏🏽
I hope you had a good break. Glad to have you back 🤗
Don't you ever disappear like that again!
Oops :)
He did it again
Yay He is back!
You know it
🔥🔥🔥 watched some of your old videos and just came here to say its awesome. Great job 👏
this is my fave channel, thank you for the tutorials!
Never knew this thing existed till I bumped into your video. Thank you for making all these videos. I'm a fan :)
Great tutorial man, love the pace ande details. Keep them coming please!
Thanks, will do!
Quality is soo good, hope to make this level of content in future 💙
Your work is sick! If you want to start making tutorials, feel free to ask away on any questions you may have!
Oh! Thanks, you are back!
Best react tutor, finally back with a banggg!
Awesome video, great explanation. Thanks man!
you make it looks so easy -___- hats off!
This is so clean
I love these videos man, thanks for your hard work.
Glad you enjoy them!
your changing my boring webdev UI skill into something new. THANKYOU SOMUCH😇🙏🙏
This is real kool and detailed tutorial. Thank you.
Thank you for this. Please more framer motion tutorials!
Missed the videos! This is awesome, I didn't know framer motion had this to offer!
My man! Yep, it’s pretty wild
sooooo happy to see you back 💯🔥
Thanks for having me back
Awesome! The best resource for learning Framer Motion and SharedLayout. Hope you do a new Awwwards series soon!!
Hands down the best UA-cam channel for coding the best designs and animations 👌
Appreciate that!
Dang, its been 2 years, i hope you come back again with another great video again
Welcome back dude!
Hey hey! Thank you!
So happy to see you back.
:)
finalllyyyyy!! hes back!
Man, you are a magician!!!
Super bro. I can't imagine these kind of animations done in react.
wow beautiful
Thanks for coming back
You bet!
damn... some high quality shit right here. keep up the fantastic work !👌🏻
Awesome ! 🙌
gald you're back
i love your tutorials
Omggggg your back from the dead broooooooooo I missed you so much mann. Your videos are beat in this niche in UA-cam. 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
My man! Always there for support! How’s life been?
@@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🔥
Back with a bang 💣🙌
Bang bang!
Content is flawless !
oof flawless.... love that word :)
I miss this guy so bad
Excellent video :D
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 🙂
Cool as always man!
It be like that
top notch as always 🔥🔥
Thank you!
Welcome back 🤟
Thank ya!
The framer motion series is da best!
Framer motion is 🔥
we missed you
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.
did you got one?
The Best 👌
Dear God, Can you make more and more and more, thank you for everything you do!!!!
Love your stuff
Glad you love it!
Another one on 🔥🔥🔥🔥🔥
Say it louder for the people in the back!!!
incredible stuff man! Can you make a tutorial on an animated vertical timeline using framer?
Great video! Will u ever do a Framer Motion - Beginner to Advanced tutorial? There are not many of them on here.
Been thinking about it
@@WrongAkram plzzzzzzzzzzzz
Please do it
You inspired me to be a better developer. Thank you 💯🔥 🚀 👏🏾 🙏🏾
Wow! Super happy to hear that :))
Thanks for the lesson. Is it possible to repeat such an animation without using react, but using javascript? For example GSAP?
This is brilliant! Would love to see how framer and redux work together 🙏
Redux is pretty neat but jotai looks like super cool!
@@WrongAkram oh hell yeah! You reckon you'd do a tut on it? sweet-state is usually my go to but this looks hectic
Finally, You're Back.
Good to be back!
Thanks
ayyy my man's back again
back 2 back
He bacc!
big bac
Welcome back :)
Thank you 🙏🏽
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 ?
Welcome back again
My twin, what’s good man!
Welcome baaaack.
Thanks!
🔥
Yay!
Bro long time no see...welcome back
Glad to be back
BAM!
Bam Bam 💥
🔥🔥🔥🔥🔥🔥🔥
Wow!
Big wow
Lovely tutorial. What is the VS Code intellisense plugin for Framer Motion to show properties/keys?
Welcome Back...🔥
Glad to be back!
@wrongakram - thanks so much for this. Is there anyway to apply this to websites built in the Framer tool?
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?)
You are a gem♥️ my friend
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
I have tried this and I still can't figure it out, really hoping someone can help me out here
@@ayomideadejumo2068 I haven't looked at this in awhile but might be able to help - what error do you get, and when in the process?
@@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
how do you get the fiels and images from dribble?
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
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.
🤔
Yeah those starter files made me dizzy
10/10
I founded a gem today 🤩
thanks, @Wrong Akram
Welcome!
How you created the effect in terminal when you are typing the command? I really liked that.
Awesome +++++++++++++++++++++++ Thank You
How do I make animations load once on the initial page load?
Can you give some info about the weight of framer motion on the project. Can FM be a performance concern ? It would help a lot get a perspective on the app’s performance from you :) Already learned so much from you , thank you!
In my experience it does not run well on some low end mobile devices, so you might want to disable the animations.
Awesome. 🤍 Need these kinds of videos. Keep It up.
❤
man, you are coooool
Pleaseeee make more videos with react router animations
😎
sir can you tell whats the difference between path spacing , path offset
in framer motion what the exact use of it in svg animation
You are what they call hero.
Where my cape at?
Thank you very much! I love your videos. 🔥
Teacher, do you want to share with us one of your latest projects?
Watching his videos, I am curious to see a project in which he applied everything he teaches :D
Don’t have too many public work, a lot of them are for companies, behind paywalls
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 ?
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?
what is that confetti effect on your terminal?
do you need to different y values for mobile?