Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Animating an SVG Cat with React.js

JSWORLD Conference via YouTube

Overview

Discover how to animate an SVG cat using React.js in this 27-minute conference talk from React Live 2019. Learn about SVG fundamentals, including its definition, unique characteristics, and file size advantages. Explore different methods of incorporating SVGs into React components, including direct imports and the use of Sketch. Gain insights into shading techniques, configuration files, aspect ratio considerations, and the implementation of Frame Emotion and Motion libraries for creating captivating animations. Presented by Elizabet Oliveira, this talk offers practical knowledge for developers looking to enhance their React projects with engaging SVG animations.

Syllabus

Intro
About Elizabet
What is an SVG
Wikipedia definition
Why is SVG different
SVG file size
How to use the SVG
Why would you do this
Importing React components
Inspecting SVG
Importing as React components
The bad thing about this method
The second way
Sketch
Shading
Config file
Aspect ratio
Frame Emotion
Motion

Taught by

JSWORLD Conference

Reviews

Start your review of Animating an SVG Cat with React.js

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.