Lessons: 27Length: 2.8 hours
SVG is a powerful way to create vector-based graphics that resize flawlessly. In this course, you will learn how to use the Snap.svg JavaScript framework to create, control, and animate your SVGs with ease.
Learn how to use Gulp to build an SVG sprite system in our Coffee Break Course:
1.Introduction
1.1Introduction00:52
1.1
Introduction
00:52
1.2Downloading Snap.svg07:42
1.2
Downloading Snap.svg
07:42
2.Creating Graphics in a Snap
2.1Creating Basic Shapes09:38
2.1
Creating Basic Shapes
09:38
2.2Complex Shapes08:16
2.2
Complex Shapes
08:16
2.3Shape Attributes05:57
2.3
Shape Attributes
05:57
2.4Grouping Shapes07:23
2.4
Grouping Shapes
07:23
2.5Shape Transformations08:37
2.5
Shape Transformations
08:37
3.Animating in a Snap
3.1Animation Basics06:58
3.1
Animation Basics
06:58
3.2Animation Callbacks04:53
3.2
Animation Callbacks
04:53
3.3Easing06:26
3.3
Easing
06:26
4.Basic Interactivity
4.1Installing MAMP03:33
4.1
Installing MAMP
03:33
4.2Using an External SVG08:46
4.2
Using an External SVG
08:46
4.3Targeting Individual Shapes08:58
4.3
Targeting Individual Shapes
08:58
4.4Basic Interaction06:32
4.4
Basic Interaction
06:32
4.5Hover Events03:32
4.5
Hover Events
03:32
5.SVG Clock Animation
5.1Importing the Clock SVG06:08
5.1
Importing the Clock SVG
06:08
5.2Targeting Individual Clock Shapes08:30
5.2
Targeting Individual Clock Shapes
08:30
5.3Pulling the Current Time08:30
5.3
Pulling the Current Time
08:30
5.4Organizing the Code05:32
5.4
Organizing the Code
05:32
5.5Time Is Circular07:26
5.5
Time Is Circular
07:26
5.6Staying Current03:08
5.6
Staying Current
03:08
5.7Animating the Second Hand03:11
5.7
Animating the Second Hand
03:11
5.8Fixing the Second Hand Animation08:51
5.8
Fixing the Second Hand Animation
08:51
5.9Minutes and Hours09:43
5.9
Minutes and Hours
09:43
5.10Adjusting the Hour Hand03:44
5.10
Adjusting the Hour Hand
03:44
5.11Finishing Touches05:31
5.11
Finishing Touches
05:31
6.Conclusion
6.1Conclusion00:54
6.1
Conclusion
00:54
