How to Create Videos using React w/ Remotion | Say Goodbye to ADOBE After Effects

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

If you ever wanted to create videos using your loved web technologies and UI Frameworks using it with the composable React Ecosystem to finally render it out into a full video. Well, it is possible with Remotion. In this video, we will go through Remotion and how to use it to create a full video using React with CSS and HTML and your favorite React library, in fact, we will create my youtube channel logo intro all using React and Render it to a video with Remotion. ⭐ Timestamps ⭐ 00:00 Introduction 02:23 Getting started with Remotion 11:36 Understanding Remotion and How it works 22:55 Creat…

Watch on YouTube ↗ (saves to browser)

Chapters (8)

Introduction

2:23 Getting started with Remotion

11:36 Understanding Remotion and How it works

22:55 Creating CoderOne Logo

26:14 Putting logo SVG Paths together

40:10 Animating Logo w/ spring animations

48:47 Global Redux Store State access

56:41 Exporting React into a Video

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