FrontendMasters – SVG Essentials & Animation, v2 2019-1

Description

SVG Essentials & Animation, v2, is a training course for creating and optimizing graphic images in SVG format for the web, which allows you to access a website with light files and fast downloads. In this course you will learn how to make immersive graphics and how to animate them.

What you will learn in SVG Essentials & Animation, v2

Familiarity with the basics of working with SVG

Overview of SVG anatomy including what it is, how it works, and learning Platonic forms, accessibility, and more

CSS animation training, SVG optimization and construction, prototyping, differences in different functions and why SVG is used

Learn to work with different tools like GreenSock

UI / UX animation, social engineering with animation and interaction

Work with advanced SVG, including viewBox, svgOrigin, Clipping and Masking

Course information

Publisher: FrontendMasters Instructor: Sarah Drasner English language Level of training: basic to advanced Number of courses: 57 Duration: 4 hours and 12 minutes

Topics

Introduction

Introduction setup

SVG Anatomy Overview

What is svg svg support performance the antidote to positioning in css platonic shapes viewbox responsive preserveaspectratio paths groups polylines animated bzier curves template literals accessibility

CSS Animation

Optimizing building constructing an svg starting an svg prototyping planning an animation exercise planning an animation review animation support breakdown differences in functionality why svg transform origin animate an svg exercise svg tools and ideas q a sprites atmospheric elemental motion

GreenSock

Tools overview performance gsap tweenmax syntax stagger gsap monster demo cycle stagger setting css properties comments on d3 timeline gsap demo gsap exercise

UI/UX Animation

Ui vs standalone animation social engineering with animation context switching improving an existing ui demo interaction js detection scaling interaction gsap timeline functions interaction demo draggable interactive exercise

GSAP Extras

Drawsvg motion along a path curviness rotation animating text relative color values creating a story exercise morphsvg bonus demos shape morph exercise

Advanced SVGs

Clipping masking viewbox svgorigin

Conclusion

Thanks

Installation

After Extract, watch with your favorite Player.

English subtitle

Quality: 1080p