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
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.
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.
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?
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!!
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?
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.
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
@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!
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?
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?
@@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. 🤝
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
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
@@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
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?
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😢💔
@@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
@@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"
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
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.
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.
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
Awesome....🤍
No one explaines in this detail that you explains everytime...🙌🏻
Glassmorphism to the world ya'll, my mind is blown... this is awesome.
Your explanation is great! Thank you!
Thank you for this wonderful comment!
i was just thinking about this and you uploaded this
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.
Hats off to you sir.... You're a great designer
Wow, it worked. Thanks a lot!!!🤩
Addicted to your videos
Dil se thanku 🔥🔥🔥
Thank you so much 😀!
Too good.. keep going
Man I always love your content..SuperAwesome❤❤❤❤
This is so good,Punit!
Thank you for doing this :)
Looks beyond incredible
This tutorial is sickk ❤
The result was worth its time
Kudos👌🏻👏🏻👍🏻
Always happy to make your tutorials in the morning :)
omg thats awesome! thank you a lot for sharing!
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
You are the man … thank you so much 🔥🔥👍👍👍
I enjoy this video very informative and thanks for the code you have given... Keep Rocking. :)
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.
The besttttt❤️❤️❤️❤️❤️
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?
Awesome, thank you so much for this class... amazing !
One question, why did you apply tht plugin to only card background (i.e. ractangle only) ? Why not on every elements of card ?
tnx boss
very informative
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!!
Punit chawala is GOAT 🤯
Always the best! Thanks Punit to all your joy to explaind this tutorial!
nice work
cool. I learned many thing from you
OP design sir
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
I've learned lot of things
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!
and if I only need a parallax effect, tilt it without blur, what code is needed then
Your great sir
Nice tutorial topic
Why isn't it working for me?
Bit of an issue with corners for me but great video.
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
@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!
Hello guys please help me out.
My rectangle card is not showing on @anima
I can't see the rectangle glass.
Such a good tutorial, but why the right sides of the card aren't round like the left sides ?
Exactly
please make more tutorial on Figma .
Can you make same tutorial for XD for more understanding for XD user ?
Switch to figma
How u bring this kind of ideas to us?
how to make this without coding? just in figma without using anima
The link to the google docx document is not working. Can you please provide that?
Thanks sir please make more video
WOW
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?
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?
thanks for the video but the text are logos are not going with the flow..can you modify and show it to us?
Not working.
I guess because Anima has changed a bit; would be great if you could provide an update of the last step.
Hover doesn't work unfortunately
idk why when my website loads in chrome it doesn't show the rectangle :\
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. 🤝
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
Can it be applied to cell phone scrolling?
Amazing. This works on a Mobile preview in Figma Mirror? Thanks!
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?
how did you do the over reflection
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
can you plz add more figma videos I'm using xd but I want to switch to figma
First...
anyone know why i dont have the website block showing in anima? it only shows layer, frame and project
Thnx for ya, can u add english caption or subtitles to ur video
how can dowload it with source code with zip file. reply me as soon as possible
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
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?
Punit what of XD? Cmoon man 😪
amazing but text in card are not moving along the card??????????????????????????????????????????????
DOC file is missing - how can we get this code?
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😢💔
I tried this out but it seems to be a bit out of date :/
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 :(
how the animation works on phone?
Can i preview it on figma
What kind of software are these ? I'm quite clueless but curious too . Can someone please elaborate it ?
how export assets for glassmorphism shapes?
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
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"
bro in which format to save for the website?
i have problem in login
plz help
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
It's so fckng cool! Thank you for the detailed and clear explanation and additional links! Super!
Your code is not working
now its not working at all
can anybody tell me how to do it now
Is it efficient to use a hover effect on a mobile device?
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
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...
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! 👍
5:20 Plugins You need.
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.
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
ö
thanks for the video but the text are logos are not going with the flow..can you modify and show it to us?