Glassmorphism Card Animation in Figma | Figma + Anima | Design Weekly
HTML-код
- Опубликовано: 13 дек 2020
- Today we are making an amazing glassmorphism parallax effect in @Figma . We will use Anima plugin to make this magical effect happen. You can us other tools like Adobe Xd to make this effect as well.
Figma file: www.figma.com/file/AgcxvgmNFk...
Google docs link: docs.google.com/document/d/1o...
Dribbble shot: dribbble.com/shots/14655480-3...
For Sponsorship: punitwebdeveloper@gmail.com
Join Facebook Design Group -- / punit. .
Channel Sponsors:
1. LS Graphics - www.ls.graphics/
2. Blush: blush.design/
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.net/punitweb
#glassmorphism #uidesign #figma 
Хобби
For anyone trying this now, you will notice that Anima no longer has the 'Website' tab available in the 'Embeded code' section. Put the code provided in the Google doc into the 'Layer' tab instead
Thanks to you for the update. You spared us a lot of headaches
Thanks for the help Reuben!
The layer is disabled
This is so good,Punit!
Thank you for doing this :)
Awesome....🤍
No one explaines in this detail that you explains everytime...🙌🏻
Broke into the 100th Like as soon as the OP's source of inspiration was told. Helps some of the newbie designers like us setting foot in this domain, from the constant guilt of not feeling original and which eventually hold us back from not experimenting with the same design seen for process breakdown purposes and better understanding towards its capabilities and incapabilities.
Love the content sir as always clear, precise and easy to understand. Thank you for this amazing tutorial.
Looks beyond incredible
Awesome, thank you so much for this class... amazing !
Glassmorphism to the world ya'll, my mind is blown... this is awesome.
i was just thinking about this and you uploaded this
Hats off to you sir.... You're a great designer
omg thats awesome! thank you a lot for sharing!
Too good.. keep going
The result was worth its time
Kudos👌🏻👏🏻👍🏻
The besttttt❤️❤️❤️❤️❤️
Man I always love your content..SuperAwesome❤❤❤❤
Your explanation is great! Thank you!
Thank you for this wonderful comment!
Wow, it worked. Thanks a lot!!!🤩
I enjoy this video very informative and thanks for the code you have given... Keep Rocking. :)
You are the man … thank you so much 🔥🔥👍👍👍
cool. I learned many thing from you
This tutorial is sickk ❤
OP design sir
nice work
Your great sir
Addicted to your videos
Dil se thanku 🔥🔥🔥
Thank you so much 😀!
tnx boss
very informative
WOW
Nice tutorial topic
Always the best! Thanks Punit to all your joy to explaind this tutorial!
I've learned lot of things
Amazing. This works on a Mobile preview in Figma Mirror? Thanks!
I love this design and your tutorial! however, I have an issue, I think in the meantime Anima has been updated, and I can't find the "website" code field anymore...there are only layer, frame, and project fields to write in code...do you know where I should post your code in? thx!!
One question, why did you apply tht plugin to only card background (i.e. ractangle only) ? Why not on every elements of card ?
@Punit Chawla Hey Punit, please update in the comment section how we can do this in the latest anima after grouping elements together. It doesn't seem to be working - I tried a couple of things but still it isn't!
great video! is there a way to animate the content on the rectangle card as well? changes in code or maybe grouping the text and logos with the card perhaps?
Exactly what I was wondering, think its best if you merge it
Instead of getting the rectangle name when using inspect, just copy the group label name. Then the card features will be animated aswell
Always happy to make your tutorials in the morning :)
Hey thanks for making this video...But this is not working for me...I tried the same and pasted the code from google doc in anima & changed the class name as per shown in the video. The rectangle(card) remains there as if sticked using Fevicol
Thanks sir please make more video
thanks for the video but the text are logos are not going with the flow..can you modify and show it to us?
how did you do the over reflection
Amazing work, just one thing, the content on the card does not animate with the card like the drbbble example
I think you must group all the card parts into one component
Group all the elements and then animate.
Can it be applied to cell phone scrolling?
Is it possible to make a video template of this card? Like it doesn't require a hover effect for the card to animate rather it animates till the video lasts?
May I know why did the 3 61…. Rectangle value of the name got changed to 5…. in the inspection panel before the magical moment appears?
i Need your help how do i create that card effect but i want it to be able to turn complete to the other side and whe they want they can turn it completely to the other side?
Nice video :) But the card number figma logo and other elements on the card doesn't move with the hover effect. I assume that the respective class of those elements need also anima effect like the rectangle.
yes, it will also work, but you need to wrap all those elements and find the id of the group in code
@@pavlozhydkykh9335 at 1:55 .How are the red margins activated. Can you tell me please ?
@@rarara4111 press ALT when moving items
Any luck with this?
@@mischiefbouy I try to press ALT but card number doesn't move. Any one can help about it
anyone know why i dont have the website block showing in anima? it only shows layer, frame and project
Hello guys please help me out.
My rectangle card is not showing on @anima
I can't see the rectangle glass.
and if I only need a parallax effect, tilt it without blur, what code is needed then
What kind of software are these ? I'm quite clueless but curious too . Can someone please elaborate it ?
Very nice tutorial...however, I noticed the elements on the rectangle like Figma logo, numbers, icons don't move! Could you share how to make them move alongwith the rectangle too?
HELP! The frosted card is missing when I imported to Anima. The frosted card shows in the Anima Preview but as soon as I choose "Get the code" and click either HTML or VUE etc it will load and the frosted card will disappear. But the frosted card is on my figma. How do I solve this?
please make more tutorial on Figma .
Why isn't it working for me?
how the animation works on phone?
how can dowload it with source code with zip file. reply me as soon as possible
how export assets for glassmorphism shapes?
How u bring this kind of ideas to us?
how to make this without coding? just in figma without using anima
hey can anyone help me?! In anima I'm not getting the create option for embed code. Anyone knows why?
bro in which format to save for the website?
It's so fckng cool! Thank you for the detailed and clear explanation and additional links! Super!
The link to the google docx document is not working. Can you please provide that?
Can i preview it on figma
Thnx for ya, can u add english caption or subtitles to ur video
The Tutorial was great, just have one question, Why the card elements(LOGOs, Numbers) are not animating accordingly?
Plugin was applied only on card background (rectangle only) , so it will not affect other elements on card as you mentioned
Bit of an issue with corners for me but great video.
Actually, the class name appears 4 times in your example and there's 3 just in the last JS part and you replaced only the first one. What should i do with the 2 other occurences? Thanks
replace those aswell
Not working.
I guess because Anima has changed a bit; would be great if you could provide an update of the last step.
Punit what of XD? Cmoon man 😪
can you plz add more figma videos I'm using xd but I want to switch to figma
Such a good tutorial, but why the right sides of the card aren't round like the left sides ?
Exactly
idk why when my website loads in chrome it doesn't show the rectangle :\
DOC file is missing - how can we get this code?
Can you make same tutorial for XD for more understanding for XD user ?
Switch to figma
The code where you replace the name of the rectangle doesn't work in my case. Even after editing, it retains its original value and no animation happened.
Yeah same for me also
@@MrKiran6104 Same here. I grouped all elements inside the glassmorphism card and pasted the code. - but no animation!
Where do you get this code do you know coding or do you creat, can you make tutorial video on it
I do know how to code. However, this is from a JS plugin that i referred to
First...
Punit chawala is GOAT 🤯
I tried this out but it seems to be a bit out of date :/
Is it efficient to use a hover effect on a mobile device?
Can we use any other deisgners' designs/art for our own personal dribbble shots or ig posts?
NO, you are a designer so make yours. What you want to do is called stealing.
@@obvinpro no buddy, I didn't say I am gonna use those. I just asked cause punit chawla used some designers work in this video. That's all. I do respect art and artist❤️.
@@ajaypawriya9616 Yes, he did use some designers work and he gave them credits and said that one should not use such for commercial purpose without proper licensing. 🤝
Hi Punit, I tried to preview the design after saving the code and its not allowing me to view inspect element option when I right-click, not sure why! can you please help
Hover doesn't work unfortunately
i have problem in login
plz help
Thanks alot for explaning everything in detail, I did each step as guided by you but unfortunately the animation isn't working at all :(
Did you found a solution? My animation doesn't work too..(
I found a solution, don't put the code in "Website", instead, click on the object you want to animate and then put the code on "Selected Layer" that should work
@@CaioMunarolo many thanks! i’ll try rn
@@CaioMunarolo it doesn't work anyway :(
@@yanabessmertnaya1781 after a lot of time trying, I figured out somethings: 1 - you need to use in the "selected layer" 2 - it only works with an image in it, like he did in the video with the frosted glass and 3 - if you really want to change how it looks, you need to change the css in the code, because the effect ignore everything you did in figma
amazing but text in card are not moving along the card??????????????????????????????????????????????
now its not working at all
can anybody tell me how to do it now
I failed to make it, I don't know where the problem is and what happened. When I watched the video, I got excited and rushed to Figma to make it, but the result saddened me😢💔
We can use after delay and hover to get the sam effect without code , we will require 3 states for this
can you explain it how?
@@tadeooooooooo create 3 states , Skew the card in one state and skew in oppsite in other staer , Now you might got an idea what I am trying to say . It would be better u use uxpin instead of figma
@@gauravidesigns thanks but its hard to imagine how to usw hover/drag with after delay :(
Thank you for the amazing content, but there is a problem with the animation I made it couldn't animate like yours.
Need suggestions :( .
Hi! My animation doesn't work as well:( have you solved this problem?
@@olyaprivalova8579 Not yet sadly :(
I've done it))
@@olyaprivalova8579 That's great :)
@@KashifAli-yf7jc if you're still interested in it. Then this is the thing: you need to group all elements of the rectangle, then take the code of the group and place it in the block "selected layers"
at 1:55 .How are the red margins activated. Can anyone tell me please ?
Select the object (rectangle card in this case) and press Alt Key and move mouse cursor to the adjacent object.
@@sanjeevkedari1042 i did it and it also does the job but it also duplicates the object. what should i do to stop duplicating the object ?
@@rarara4111 it seems you are holding the mouse click while you are moving the mouse.
Only hold the Alt key, not the mouse button
5:20 Plugins You need.
Your code is not working
This is really good stuff man! But you missed a tiny bit of detail. On hover the card is reacting to the mouse movement but the components like the figma logo, card number, MasterCard logo are all static. It doesn't mimic the behaviour of the card. Once you notice it it's hard to unsee. And I believe it can be sorted easily. The original reference you are inspired from has the components also move accordingly. Great tutorial nonetheless! 👍
It's too complex for a simple effect. Also when you run the animation, the card moves but the text and other visual elements on the card don't. Therefore, its not complete I would say.
This is a great tutorial however it's incomplete... Why didn't you explain how to include the card elements into the effect? It's useless as it is...
Hi Boys 😍💋 💝💖♥️❤️
Really love your tutorials brother but everytime i watch your videos i cannot get that "Opacity" pronunciation out of my head. Anyway not trying to be a criticizer, keep up the good work with tutorials. Looking forward to next one.
ö
code is not unable bro pls provide