SVG Essentials & Animation v2

Description

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

What you will learn in the SVG Essentials & Animation, v2 course:

• Getting to know the basics of working with SVG
• An overview of SVG anatomy including what it is, how it works, and learning Platonic shapes, accessibility, and more
• CSS animation training, SVG optimization and construction, prototyping, differences in different functions and why to use SVG
• Learning to work with different tools like GreenSock
• UI/UX animation, social engineering with animation and interaction
• Advanced SVG handling, including viewBox, svgOrigin, Clipping and Masking

Course details

Publisher: FrontendMasters
teacher: Sarah Drasner
English language
Training level: introductory to advanced
Number of courses: 57
Duration: 4 hours and 12 minutes

Course topics:

Introduction

introduction setup

SVG Anatomy Overview

what is svg
svg support performance
the antidote to positioning in css
platonic shapes
Responsive viewbox
preserveaspectratio
paths groups polylines
animated b‚zier 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 qa
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
curvature rotation
animating text
relative color values
creating a story exercise
morphsvg
bonus demos
shape morph exercise

Advanced SVGs

clipping masking
viewbox
svgorigin

Conclusion

thanks

Course prerequisites:

Pictures

Sample video

Installation guide

After Extract, view with your favorite Player.

English subtitle

Quality: 1080p

download link

Download part 1 – 1 GB

Download part 2 – 505 MB

Password file(s): www.downloadly.ir

Size

1.5 GB