Animating an SVG Cat with React.js
Offered By: JSWORLD Conference via YouTube
Course Description
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
Related Courses
10x Your Teamwork Through Pair ProgrammingJSWORLD Conference via YouTube Usability Testing for Developers
JSWORLD Conference via YouTube Data Driven Design Systems in Practice
JSWORLD Conference via YouTube Setting Up ESLint and TypeScript for React
JSWORLD Conference via YouTube React as a Developer Health Tool
JSWORLD Conference via YouTube