Awesome Micro Animations With Figma Tutorial
HTML-код
- Опубликовано: 1 окт 2024
- Check out my web web design and web development courses!
developedbyed....
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/dev...
#figma
Be sure to UNGROUP the masked circle otherwise it wont work. Also BEFORE hitting play to see the animation, UNGROUP all layers. Otherwise figma will treat the group one object, negating all the masking.
IF the final result will not work and does not show the circle moving RIGHT LEFT this is your answer. The Layers have to be the SAME NAME. Ellipse 1 from one screen has to be the same as the 2nd one.
Oh yeah the name thing really fixed everything, thanks!
more animations with figma ruclips.net/video/aMFUuGZ9LEs/видео.html
Thanks for mentioning it 😊
thnx bruh!
It works. Thanks.
Now make this using Html, CSS and js
Yes please
If you do a search: hamburger button using css animations, you can find similar projects that you can adapt to look like this
You can replicate the steps in css too. Use keyframes, give start and end states. And then use the cubic bezier function for the bouncy effect.
yes right
you do it
PLs ma gorgeous teacher on the interenet, we need da HTML and CSS
Bro wassup
Check his playlist
This is what we neeeeeeeeeed
Please make a video on how to implement these designs with HTML and CSS.
You can replicate the steps in css too. Use keyframes, give start and end states. And then use the cubic bezier function for the bouncy effect.
yea
Thank you so much my gorgeous friend for teaching me programming. Today i landed my very first big job as a software engineer. You made my life. I can't thank enough. Love you. 🥰
Congrats bro, can you give me some tips on the site you applied on
@@thesouthsidedev1812Good Linkedin profile and resume
Sooooo coool ed!!✌️
Wondering how can i connect it now with my js code
Ps: background music was lit af 🔥
2:15 I don't mean to come off rude but I heard you say it like this in another video earlier and I thought it was just a one time mistake. That's an ellipse, not eclipse. I just thought I'd tell you because I really like your content and I think you're great.
We need a course for every skill you have!! No matter the cost! You teach everything in such an easy language. Python, game Dev just everything.
Hey man where have you been? Everything alright? We are waiting 🙆✊
hey Ed, and how can we create the components to our react applications with this animations?
Hey man I sort of miss seeing your videos
How we can translate these custom animations into code?
You are high as fuck...that laugh.nicest video on animation
When I change the shape (via changing the corner roundness) why does it just Fade? instead of a shape transition like in the video?
First
Ed, you probably already know what to do next...
Make a video of this by using HTML, CSS, JS, please!✌😁
"I swear I'm not high" HAHAHAHAHHAAH
How to export these kind of icon animations from figma to gif format to provide it the developers....can someone help?
When he said I swr I'm not high I knew I had to like the video
Hi Ed I’ve been watching your videos for a few months and I must say u put out great content,I’ve been struggling with creating mobile nav menus and I would really appreciate if you could do a video on that subject in react
Nice video,
How add the animation on the figma mockup ?
Whaaat, didn't know that there were such features in figma
"I swear I am not high." Can't stop laughing.
I don't have a laptop or desktop , I can't afford it .
But I keep watching your videos hoping someday buy a laptop and be able to code .
You are my idol man ..thank you .
hopefully you can buy a laptop soon
@@shandypratama2792 in couple years maybe . At this moment I just want to have food and roof over my head.
I just want Figma to enable us to use these from within Variants instead. Build this without usage of variants creates a loooooot of unnecessary duplicated elements on the project. For large projects, it's just a huge "no" atm.
Oh baby 1min 8like 8comment noicee
Thank you for a nice music in the background
I couldn't get mine to play in Figma... Im still new to it. I followed everything to a T and it looks like it might have worked :P Loving all your great videos. Thank you.
4:48 "I swear I am not high." 🤣
This got me laughing too
Du, bist du jetzt in deutchland? And was mit deinen arbeiten web dev, hast du da?
I was watch yout vidios little bit and want ask how it doing with you story about germany? I have little bit same story, now Im in Austria, just question, what about your german language, how you doing that? Thanks.
Bnal bang sangat bermanfaat sekali
I love you and the tutorial but man the music is annoying and out of place.
If anything then the instrumental music that starts at 9:35 is actually kind of nice until there's singing.
but really the video is very good.
Thank you!
Ed, idk if you're planning on doing any more coding tutorials but if you do can you make one on connecting an express/nodejs api to frontend? I watched your video on JWT auth and learned a lot and I'm currently trying to figure out how to connect it to front end.
Am with you actually 👍
Watch CJ from coding garden.
The background music is kinda annoying and distracting. I'd prefer hearing your beautiful voice as a standalone. Or at least use a soundtrack that doesn't have a voice in it.
i didnt understand how the word on and off animation was made, like how did the "on" word appear to be coming down rather than just being in the circular button? please help
bro no company is going to hire someone doing this crap hahahah. you habe to know how to code first and foremost. I get a laugh from these tutorials. you have to wear many hats. imagine showing this in an interview hahahaha omg laughed out of the room
I want to have a bet that DEV ED never had a real job in the field. actually mist youtubers talk the talk but can't walk the walk hence why they are youtubers
The point is to teach how to animate in figma, not how to design a button, and then also animate it. This whole tutorial is convoluted with the lack of direction.
do you have a full animation in figma?? i'm interested
why did you switch to mac ?
"I swear I'm not high!"... lol. I didn't think you were... now I'm like 🤔😂
ed: I hate macbooks
also ed: uses macbook😑
more evidences available here:
ruclips.net/video/vVPc00cw7Z0/видео.html
Too much helpful. I am a beginner and learning figma and this is something new and helpful for me.
dude clarified he isn't high
we need to see the HTML, CSS & JS for this......
Dr. strange is teaching UI design. multiverse madness
I made react CRUD app using node js as server and mysql for database, everything is working and all only on my pc, the problem is when I connect to my react app from my phone I can't use it, like it's not connected to server or database, all I see is the front end of react app. How can I make it works on my mobile too or any device connect to my local network?
Love the video, dude. I hate to be a grammar asshole but it's an 'ellipse' as in ee-lips - not an eclipse, meaning the partial or full obscuring of one celestial body by another.
Him: I swear I'm not high
Nah bro that caught me off guard hahaha
Thaaaaaank you so much ! It was really helpfull and really more accesfull than others tutorial we can find on youtube 🔥
5:00 yes you are high
Im glad you still find motivation to make videos. I have been fighting with upper back pain for 4 years now, i take a good amount of opioids everyday. I have gone to all kinds of back pain specialists and done all kind of exams but they cant figure out whats wrong. I suspect it might be some kind of referred pain and i am trying to change my diet and see how that affect it. I will let you know if something works with me. I hope you get better!
your funny and entertaining to listen to when learning does not get me bored and does not annoy me with bullshit that will waste my time, love your video keep it going
i need a figma file i'am tying many times but not create smooth animation
sir my smart animate is not working the same as yours(for the toggle button), can you help me with that?
why is he look a lot like Sean Murray from Hello Games?
Man, I swear I learned more from this video than I had ever learnt from over 10 hours of other content
Don't tell him it's ellipse not eclipse
Hello, Dev Ed
What's your Full Name.
Pls make a video on submit to email with html, css, javascript/php
if i put this awesome icon on a dropdown icon with instance, why is not moving as it should be?
Hi what is the extension for your Spotify in vs code ( the icon below your extensions icon)
15.04 my line doesnt disappear when i do that
turn off the music bro
I can't recreate it the off doenst disspaer same as yours
thank youuuuu, it works for me
15:10 I did the same thing even but didn't disappear, instead a small circle was created
How much cost a beef jerky in your country?
if it posible to handle voice call in react.js and if it is then make a video on how to do this
Last. Do not comment after me.
Sorry, I had to tell him we want this in code xD
i love your content so much
Guys do we need figma pro for this??
Had to pause my music to watch this video but bro has the vibes going
Let's code this Dev!!
LOL, My dude, I love your casual way of doing things. ...and who cares if you ARE high, and if that does look like a weiner. Your brand of keeping it real and being fun is why your videos are loved. THANK YOU!!!
"Make the wiener thicker" - brother you can't do me like that 😂
Hey Ed, how about making a full pledged e-commerce project and stunning us all !
It's all good but how do you apply it to a screen, the second I take it to a bigger frame (page) the interaction stops working.
Guys, does anyone know, what am I doing wrong here...? When I try to play the buttons as Ed does at 11:21 the elipse from the left does not go to the right. The left one just disappears and the right one appears. I can not figure out where is the mistake.
If anyone will have the same issue, I've figured it out: name mismatch. The shape names have to be exactly the same in both components.
It seems our John Lennon found his Yoko Ono.
"I'm digging the music
is ed really using an apple computer ???
ecllipse lol. Thanks bro, you rule
I really love Figma animations, but we still lack tools for exporting those magic to code or even video... Still can be used as a tool for awesome presentations.
Good video. But you're def high haha
Dude looks like Doctor Strange.
the music in the background 😌
How do i apply this to my website
Does figma generate a code after you save this work?
bro you are so *COOL*
can you do a bootchat html and css project please *Sir*
hey Ed, is there any coupons on your courses. Pls Tell, I am really interested in one of those. 😊
Thank you so much for this! I came here from Coursera, and I enjoyed every bit of this lesson! I followed through and got the exact results. Thank youuu!!!
Hey, It's possible to do a slider with the products floating over it, with a hover that shows the features of every product and the button add to the cart, in CSS and js?
The question is how can I use this in a real web app?
you look like trevor from suits..
😗
Can you please make some more JavaScript AI videos?
Love the humor on the video, it was easier to catch ahhaha
it didn't work for me D:
"I swear I'm not high" hahah