Glassmorphism Card with 3D hover effect | React Spring | Styled Component | ReactJS |
Glassmorphism card in website is very new trend. This video includes building 3D animated card with glassmorphism effect using React JS.
Glassmorphism is a new trend in UI and Front end design communities. In this video, I am demonstrating on how to create a card to showcase information which will have glassmorphism effect and also will have 3D hover effect. I am building this react app from scratch so you will also learn about how to position elements so that they follow proper scalable approach for writing CSS in JS.
Github Repository for Demo: https://github.com/ashutosh1919/glass...
React Spring: https://www.react-spring.io/
Styled Components: https://styled-components.com/
Follow me on below social media,
Discord: / discord
LinkedIn: / ashutosh-hathidara-88710b138
Github: https://github.com/ashutosh1919
Behance: https://www.behance.net/devsense19
Dribble: https://dribbble.com/ashutosh1919
Facebook: / laymanbrother.19
Instagram: / developer_sense
YouTube : / devsense19
Patreon: / devsense
To know more about me,
Checkout my website https://ashutoshhathidara.com/
Drop me mail if you need any help,
[email protected]
Important Timestamps
00:00 Introduction
00:38 Creating React App
01:15 Editing App.js to include styling
04:10 Wring GlassCard Component
07: 15 Understanding CSS in Javascript
08:01 Styling elements with Styled Components
13:08 Creating Glassmorph Card
16:04 Understanding Physics based animations
19:55 Animating the card
24:14 Use Default Config of spring for animation
#glassmorphism #reactjs #reactspring #styledcomponents