SVG Essentials & Animation, v2

SVG Essentials & Animation, v2

Год выпуска: 2019
Производитель: frontendmasters
производителя: frontendmasters/courses/svg-essentials-animation/
Автор: Sarah Drasner - frontendmasters/course
Продолжительность: 4 hours, 12 min
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: Learn to build and optimize SVG - the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites. In this course, you'll learn to create immersive graphics and make them alive with animations!
Published: January 14, 2019

Содержание
Table of Contents
Introduction
Introduction & Setup

00:00:00 - 00:06:30
Introduction & Setup
Sarah gives a brief introduction, introduces the repo, giving suggestions for how to get the most out of the course, looking at the codepen setup, and reviewing Greensock plugins. - github/sdras/svg-workshop
SVG Anatomy Overview
What is SVG?

00:06:31 - 00:10:29
What is SVG?
Sarah provides an overview of what SVG is, and what it can do.
SVG Support & Performance

00:10:30 - 00:14:19
SVG Support & Performance
Sarah debunks the belief that SVG is not widely supported in the browser, and motivates the point that SVG helps a website's performance.
The Antidote to Positioning in CSS

00:14:20 - 00:16:48
The Antidote to Positioning in CSS
Sarah makes the argument that SVG takes the pain out of positioning in CSS, and also points out its' use in loaders.
Platonic Shapes

00:16:49 - 00:22:40
Platonic Shapes
Sarah breaks down the rectangle, circle, polygon, and line platonic SVGs.
viewBox & Responsive

00:22:41 - 00:24:32
viewBox & Responsive
Sarah explains what the viewBox is, and how it reacts when the width is changed.
preserveAspectRatio

00:24:33 - 00:29:09
preserveAspectRatio
Sarah introduces preserveAspectRatio's meet, slice, and none parameters.
Paths, Groups, & Polylines

00:29:10 - 00:39:42
Paths, Groups, & Polylines
Sarah introduces open and closed paths, groups, and polylines. A cheatsheet for path data, and curve commands is also reviewed.
Animated Bézier Curves & Template Literals

00:39:43 - 00:42:15
Animated Bézier Curves & Template Literals
Sarah introduces a resource to help understand animated Bézier Curves, and demonstrates how to use template literals to create animated lines.
Accessibility

00:42:16 - 00:45:03
Accessibility
Sarah details how to make an SVG readable to screen readers, and introduces several resources to read further on the subject.
CSS Animation
Optimizing & Building

00:45:04 - 00:51:23
Optimizing & Building
Sarah discusses several methods to reduce the file size of an SVG, even with many data points.
Constructing an SVG

00:51:24 - 00:59:37
Constructing an SVG
Sarah shows how to effectively group objects for animation in Adobe Illustrator.
Starting an SVG

00:59:38 - 01:03:29
Starting an SVG
Sarah walks through the process of starting an SVG
Prototyping

01:03:30 - 01:06:22
Prototyping
Sarah discusses the advantage of low resolution prototyping.
Planning an Animation Exercise

01:06:23 - 01:07:14
Planning an Animation Exercise
Students are instructed to get an SVG from the repo, and create 3 thumbnails to form a storyboard.
Planning an Animation Review

01:07:15 - 01:09:36
Planning an Animation Review
Students talk through their creations.
Animation Support Breakdown

01:09:37 - 01:11:51
Animation Support Breakdown
Sarah gives a quick refresher on keyframes in CSS animation, and warns of a few 'gotchas'.
Differences in Functionality

01:11:52 - 01:16:08
Differences in Functionality
Sarah highlights some key differences in property names, and functionality of the object in SVG versus CSS.
Why SVG?

01:16:09 - 01:18:30
Why SVG?
Sarah motivates why an SVG is better for drawing on the web.
Transform-Origin

01:18:31 - 01:20:07
Transform-Origin
Sarah demonstrates that an SVG rotates around a different axis by default than what is assumed.
Animate an SVG Exercise

01:20:08 - 01:20:22
Animate an SVG Exercise
Sarah instructs students to take the storyboard that was created in the previous exercise, and make it move.
SVG Tools and Ideas Q&A

01:20:23 - 01:23:25
SVG Tools and Ideas Q&A
Questions are asked about open source SVG animation software, and where ideas for SVGs can come from.
Sprites

01:23:26 - 01:34:07
Sprites
Sarah briefly discusses what SVG Sprites are, and how they can be used.
Atmospheric & Elemental Motion

01:34:08 - 01:39:15
Atmospheric & Elemental Motion
Sarah explains how elemental motion can allow what seems like a complicated image to be animatable, and addresses a limitation of CSS animation.
GreenSock
Tools Overview

01:39:16 - 01:51:32
Tools Overview
Sarah discusses the pros and cons of both the DOM, and Canvas. CSS/SCSS, CSAP (GreenSock), and React Spring/React-Motion are mentioned as good tools to use for specific use cases.
Performance & GSAP

01:51:33 - 01:59:22
Performance & GSAP
Sarah discusses hardware acceleration versus control, and introduces GreenSock by introducing several ways that it improves workflow.
TweenMax Syntax

01:59:23 - 02:03:16
TweenMax Syntax
Sarah introduces basic GSAP syntax.
Stagger

02:03:17 - 02:06:28
Stagger
Sarah compares how to implement stagger in CSS, SASS, and GSAP. It's demonstrated how simple it is to implement a stagger in GSAP.
GSAP Monster Demo

02:06:29 - 02:07:32
GSAP Monster Demo
Sarah uses a CodePen to demonstrate how to utilize the TweenMax library.
Cycle Stagger

02:07:33 - 02:09:07
Cycle Stagger
Sarah walks through the code to produce cycle stagger.
Setting CSS Properties

02:09:08 - 02:10:52
Setting CSS Properties
Sarah talks through how to set CSS properties in GSAP, and why it might be advantageous to do this instead of writing it in the CSS file.
Comments on D3

02:10:53 - 02:12:12
Comments on D3
Sarah briefly discusses the usage of using D3 while using GreenSock.
Timeline

02:12:13 - 02:24:59
Timeline
Sarah discusses what timelines can do, the position parameter, nesting timelines, prevent momentary display, and percentage based transforms.
GSAP Demo

02:25:00 - 02:34:07
GSAP Demo
Sarah live codes the animation of several boxes using GreenSock.
GSAP Exercise

02:34:08 - 02:34:32
GSAP Exercise
Students are instructed to take an SVG and animate it with GreenSock.
UI/UX Animation
UI vs Standalone Animation

02:34:33 - 02:42:54
UI vs Standalone Animation
Sarah discusses the purpose of a UI Animation that differentiates it from a standalone animation.
Social Engineering with Animation

02:42:55 - 02:44:54
Social Engineering with Animation
Sarah explains how to use animation to help improve the user experience with anticipatory cues, color accents, and standalone SVGs.
Context Switching

02:44:55 - 02:46:36
Context Switching
Sarah shows some examples where animation helps to switch the context of what the user is viewing.
Improving an Existing UI Demo

02:46:37 - 02:50:45
Improving an Existing UI Demo
Sarah demonstrates how a travel website's UI could be improved, and uses animation to improve it.
Interaction, JS Detection, & Scaling

02:50:46 - 02:53:28
Interaction, JS Detection, & Scaling
Sarah discusses the importance of showing the difference between states, using JavaScript to detect when an animation should start, and how to think about applying animations across a site.
Interaction & GSAP Timeline Functions

02:53:29 - 02:55:02
Interaction & GSAP Timeline Functions
Sarah gives an overview of commonly used useful functions.
Interaction Demo

02:55:03 - 02:57:55
Interaction Demo
Sarah demonstrates how interaction and timeline functions could be used to create a machine that puts a teddy bear together.
Draggable

02:57:56 - 03:05:33
Draggable
Sarah introduces a plugin that allows for actions such as testing whether objects are touching each other, momentum effects, and locking movement to an axis.
Interactive Exercise

03:05:34 - 03:06:17
Interactive Exercise
Sarah instructs students to take the last exercise, and make it interactive.
GSAP Extras
DrawSVG

03:06:18 - 03:12:49
DrawSVG
Sarah introduces a plugin for GSAP that allows the user to progressively reveal (or hide) the stroke of an SVG.
Motion Along a Path

03:12:50 - 03:15:52
Motion Along a Path