Animating With Snap.svg

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

HTML/CSS SVG

Next lesson playing in 5 seconds

Cancel

Overview
Transcript

6.1 Conclusion

SVGs are a powerful and flexible way to create and animate resizable vector graphics in HTML. Hopefully, you’ve learned a lot in this course about how to make this process easier using the Snap.svg framework. Thanks for watching, and I’ll see you next time.

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

6.1 Conclusion

Hello and welcome back to animating with Snap.svg. Over the duration of this course we've learned a lot about how to use the Snap.svg JavaScript framework to create some amazing SVG's and animations using JavaScript. And this video has only touched the surface of what we can really do using the snap SVG framework. So once you've worked through this course and gotten your feet wet with the snap SVG framework I really want to encourage you to start experimenting. Play around with the framework. Learn JavaScript more, if you don't already know JavaScript, so that you can really enhance your ability to create some amazing animations and amazing user interactions using this framework. So once again, I want to thank you so much for watching. My name is Craig Campbell. And I'll see you next time.

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

6.1 Conclusion

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

6.1 Conclusion

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