Create lovely React 3D Animated Card | Beginner REACT.JS Animation with framer-motion

CoderOne · Beginner ·🛠️ AI Tools & Apps ·5y ago

If you've seen some cool card something like a product card or an item card that has some stunning lovely animation when hovering or dragging using the mouse and ever wondered how to create something like that well, you're in the right place in this video we'll create an awesome looking animated 3D Card on React using Framer-Motion with styled-components. We are going to create a 3D Nike shoe card with 3D Animations. ⭐ Timestamps ⭐ 00:00 Getting Started and what we're going to build 01:15 Installing Dependencies 04:11 Creating the card component 17:04 Adding text and Nike shoe to the card 27:…

Watch on YouTube ↗ (saves to browser)

Chapters (7)

Getting Started and what we're going to build

1:15 Installing Dependencies

4:11 Creating the card component

17:04 Adding text and Nike shoe to the card

27:03 Adding card details

40:46 Adding 3D Animation using framer-motion

51:46 Adding 3D Shoe parallax effect

Playlist

Uploads from CoderOne · CoderOne · 0 of 60

← Previous Next →

Laravel CMS | N-01 | Getting Started and Environment Set Up

Laravel CMS | N-01 | Getting Started and Environment Set Up

Laravel CMS | N-02 | Routes, Controllers and Views

Laravel CMS | N-02 | Routes, Controllers and Views

Laravel CMS | N-03 | Dealing With Assets and Page Layouts

Laravel CMS | N-03 | Dealing With Assets and Page Layouts

Laravel CMS | N-04 | Migration, Models and Adding Categories

Laravel CMS | N-04 | Migration, Models and Adding Categories

Laravel CMS | N-05 | Showing Added Categories, and Session Messages

Laravel CMS | N-05 | Showing Added Categories, and Session Messages

6 $Laravel CMS | N-06 | Edit\Remove Categories using AJAX and Popups$

Laravel CMS | N-06 | Edit\Remove Categories using AJAX and Popups

Laravel CMS | N-07 | Add New Post

Laravel CMS | N-07 | Add New Post

Laravel CMS | N-08 | Creating a Basic Laravel Blog

Laravel CMS | N-08 | Creating a Basic Laravel Blog

HTML5 Canvas For Beginners | Getting Started | #01 with Webpack

HTML5 Canvas For Beginners | Getting Started | #01 with Webpack

HTML5 Canvas For Beginners | Drawing Basic Shapes | 02

HTML5 Canvas For Beginners | Drawing Basic Shapes | 02

HTML5 Canvas | Drawing Text With Circles | Part 01

HTML5 Canvas | Drawing Text With Circles | Part 01

HTML5 Canvas | Text Animation and Circle Collision | Part 02

HTML5 Canvas | Text Animation and Circle Collision | Part 02

Complete Guide To Web Development In 2018

Complete Guide To Web Development In 2018

AJAX & JSON Explained | Examples

AJAX & JSON Explained | Examples

Visual Studio Code Web Development Setup and Extensions

Visual Studio Code Web Development Setup and Extensions

Electron Build Desktop Apps HTML/CSS/JS - Getting Started 01

Electron Build Desktop Apps HTML/CSS/JS - Getting Started 01

Electron Build Desktop Apps HTML/CSS/JS | Creating Windows and Processes 02

Electron Build Desktop Apps HTML/CSS/JS | Creating Windows and Processes 02

18 $Electron Build Desktop Apps HTML\CSS\JS | Dialog, Sessions and Cookies 03$

Electron Build Desktop Apps HTML\CSS\JS | Dialog, Sessions and Cookies 03

19 $Electron Build Desktop Apps HTML\CSS\JS | Custom App Menu & Context Menu 04$

Electron Build Desktop Apps HTML\CSS\JS | Custom App Menu & Context Menu 04

20 $Electron Build Desktop Apps HTML\CSS\JS | Package, Build and Deploy your App 05$

Electron Build Desktop Apps HTML\CSS\JS | Package, Build and Deploy your App 05

Node.js Brief Beginners Introduction #01

Node.js Brief Beginners Introduction #01

Node.js How Modules Works & NPM #02

Node.js How Modules Works & NPM #02

Node.js Working With Events and Event Emitter #03

Node.js Working With Events and Event Emitter #03

Node.js File System (Read and Write) FS 04

Node.js File System (Read and Write) FS 04

Node.js Create a Basic Server Using Express 05

Node.js Create a Basic Server Using Express 05

Json Web Token Authentication JWT Explained Securing API

Json Web Token Authentication JWT Explained Securing API

CSS Flex Box Design | Practical Examples |

CSS Flex Box Design | Practical Examples |

API How It Works With Practical Examples

API How It Works With Practical Examples

MongoDB Getting Started 01

MongoDB Getting Started 01

MongoDB Working with APIs and Practical Examples

MongoDB Working with APIs and Practical Examples

Create a Command Line Interface (CLI) Using Node JS #01

Create a Command Line Interface (CLI) Using Node JS #01

Create a Command Line Interface (CLI) Using Node JS 02

Create a Command Line Interface (CLI) Using Node JS 02

Build React Apps | Introduction And Getting Started #01

Build React Apps | Introduction And Getting Started #01

Build React Apps | Working With Components And Multiple Rendering #02

Build React Apps | Working With Components And Multiple Rendering #02

Build React Apps | App State Management | Practical Examples #03

Build React Apps | App State Management | Practical Examples #03

Build React Apps | Getting Started With Flux (Intro) #04

Build React Apps | Getting Started With Flux (Intro) #04

Build React Apps | Create a Clock Timer Using React 05

Build React Apps | Create a Clock Timer Using React 05

Build React Apps | Create a Clock Timer Using React 05 | PART2|

Build React Apps | Create a Clock Timer Using React 05 | PART2|

CSS Preprocessors Getting Started | SASS and LESS | Practical Examples

CSS Preprocessors Getting Started | SASS and LESS | Practical Examples

Regex Introduction | Learn Regular Expressions 01

Regex Introduction | Learn Regular Expressions 01

PHP VS Node.js Which is Best For Web Development

PHP VS Node.js Which is Best For Web Development

Drag and Drop Using Native Javascript 01

Drag and Drop Using Native Javascript 01

Drag And Drop Using Native Javascript 02

Drag And Drop Using Native Javascript 02

Master Git (Version Control) in One Video From Scratch

Master Git (Version Control) in One Video From Scratch

Let's Learn The New Javascript ES6 Class Syntax

Let's Learn The New Javascript ES6 Class Syntax

Let's Create A BlockChain On Node.js

Let's Create A BlockChain On Node.js

Top 05 Visual Studio Code Extensions You Should Have

Top 05 Visual Studio Code Extensions You Should Have

Best Online Code Editors For Web Developers

Best Online Code Editors For Web Developers

Let's Create a Modern Login Form on React #01

Let's Create a Modern Login Form on React #01

Let's Create a Modern Login Form on React #02

Let's Create a Modern Login Form on React #02

Laravel CMS | N-09 | Admin Registration

Laravel CMS | N-09 | Admin Registration

Laravel CMS | N-10 | Login and Authentication

Laravel CMS | N-10 | Login and Authentication

Let's Create a Twitter Bot (Listen and Retweet)

Let's Create a Twitter Bot (Listen and Retweet)

Rapid Webpage Creation With Emmet (HTML & CSS)

Rapid Webpage Creation With Emmet (HTML & CSS)

Create Popups and Modals Using Native Javascript, HTML and CSS

Create Popups and Modals Using Native Javascript, HTML and CSS

Promises and Callbacks on Javascript With Practical Examples

Promises and Callbacks on Javascript With Practical Examples

Create Collapses using Native Javascript, HTML and CSS

Create Collapses using Native Javascript, HTML and CSS

Let's Learn Typescript (Javascript Devs) | Getting Started 01

Let's Learn Typescript (Javascript Devs) | Getting Started 01

Let's Learn Typescript | Interfaces and Generic Types (The Typing System) 02

Let's Learn Typescript | Interfaces and Generic Types (The Typing System) 02

Let's Learn Typescript | Work With Classes, Modules and Enums 03

Let's Learn Typescript | Work With Classes, Modules and Enums 03

I built an app to find skills employers ACTUALLY want

I built an app to find skills employers ACTUALLY want