Animating With Snap.svg

Craig CampbellOct 13, 2015Lessons: 27Length: 2.8 hours

HTML/CSS SVG

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

1.1 Introduction

Welcome to Animating With Snap.svg. In this course, you will learn how to create, control, and animate SVG graphics using the Snap.svg JavaScript library.

1.Introduction
2 lessons, 08:34

1.2
Downloading Snap.svg
07:42

2.Creating Graphics in a Snap
5 lessons, 39:51

2.1
Creating Basic Shapes
09:38

2.5
Shape Transformations
08:37

3.Animating in a Snap
3 lessons, 18:17

4.Basic Interactivity
5 lessons, 31:21

4.2
Using an External SVG
08:46

4.3
Targeting Individual Shapes
08:58

5.SVG Clock Animation
11 lessons, 1:10:14

5.1
Importing the Clock SVG
06:08

5.2
Targeting Individual Clock Shapes
08:30

5.3
Pulling the Current Time
08:30

5.7
Animating the Second Hand
03:11

5.8
Fixing the Second Hand Animation
08:51

5.10
Adjusting the Hour Hand
03:44

6.Conclusion
1 lesson, 00:54

1.1 Introduction

Hello and welcome to animating with Snap.svg. My name is Craig Campbell and I will be your instructor for this course. In this course we're going to learn about the Snap.svg javascript framework. This framework allows you to very easily load SVG files, draw your own SVG files with code, and to manipulate the shapes within SVG files, and animate them very, very easily. You can also create user interactions. So you can create animations that will respond to click events and hover events, and things like that. So over the next few videos we're gonna get started talking about what the Snap SVG framework is, how it works, and then as we move forward, we're gonna create some really fun projects using this framework. So thank you so much for watching and in the next lesson we'll get started.

Back to the top

Craig Campbell

Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

craigsoup

Animating With Snap.svg

Next lesson playing in 5 seconds

1.1 Introduction

1.Introduction
2 lessons, 08:34

1.1
Introduction
00:52

1.2
Downloading Snap.svg
07:42

2.Creating Graphics in a Snap
5 lessons, 39:51

2.1
Creating Basic Shapes
09:38

2.2
Complex Shapes
08:16

2.3
Shape Attributes
05:57

2.4
Grouping Shapes
07:23

2.5
Shape Transformations
08:37

3.Animating in a Snap
3 lessons, 18:17

3.1
Animation Basics
06:58

3.2
Animation Callbacks
04:53

3.3
Easing
06:26

4.Basic Interactivity
5 lessons, 31:21

4.1
Installing MAMP
03:33

4.2
Using an External SVG
08:46

4.3
Targeting Individual Shapes
08:58

4.4
Basic Interaction
06:32

4.5
Hover Events
03:32

5.SVG Clock Animation
11 lessons, 1:10:14

5.1
Importing the Clock SVG
06:08

5.2
Targeting Individual Clock Shapes
08:30

5.3
Pulling the Current Time
08:30

5.4
Organizing the Code
05:32

5.5
Time Is Circular
07:26

5.6
Staying Current
03:08

5.7
Animating the Second Hand
03:11

5.8
Fixing the Second Hand Animation
08:51

5.9
Minutes and Hours
09:43

5.10
Adjusting the Hour Hand
03:44

5.11
Finishing Touches
05:31

6.Conclusion
1 lesson, 00:54

6.1
Conclusion
00:54

1.1 Introduction

Animating With Snap.svg

Next lesson playing in 5 seconds

1.1 Introduction

1.Introduction2 lessons, 08:34

2.Creating Graphics in a Snap5 lessons, 39:51

3.Animating in a Snap3 lessons, 18:17

4.Basic Interactivity5 lessons, 31:21

5.SVG Clock Animation11 lessons, 1:10:14

6.Conclusion1 lesson, 00:54

1.1 Introduction

1.Introduction
2 lessons, 08:34

2.Creating Graphics in a Snap
5 lessons, 39:51

3.Animating in a Snap
3 lessons, 18:17

4.Basic Interactivity
5 lessons, 31:21

5.SVG Clock Animation
11 lessons, 1:10:14

6.Conclusion
1 lesson, 00:54