Lessons: 17Length: 2.3 hours
- Overview
- Transcript
4.8 Animating the Button
Using some of the techniques we covered in the previous lessons, we'll animate our final SVG element in order to finish up this project. Our button will contain a looping animation based on hover and then revert back to a static presentation during no mouse activity.
1.Introduction
1.1Introduction03:36
1.1
Introduction
03:36
2.Learn How to Create an Animated Loading SVG
2.1Designing in Adobe Illustrator05:09
2.1
Designing in Adobe Illustrator
05:09
2.2Saving and Setting the SVG Settings03:51
2.2
Saving and Setting the SVG Settings
03:51
2.3Animating the SVG with CSS13:19
2.3
Animating the SVG with CSS
13:19
2.4Making the SVG Responsive03:39
2.4
Making the SVG Responsive
03:39
3.Learn How to Create Responsive SVG Icons
3.1Design in Adobe Illustrator13:26
3.1
Design in Adobe Illustrator
13:26
3.2Making the SVG Icons Responsive06:43
3.2
Making the SVG Icons Responsive
06:43
3.3Adding Interactivity to Our Icons09:04
3.3
Adding Interactivity to Our Icons
09:04
4.How to Create a Website with Multiple SVG Elements
4.1Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 114:32
4.1
Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 1
14:32
4.2Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 213:15
4.2
Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 2
13:15
4.3Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 307:40
4.3
Mockup Design in Adobe Photoshop & Adobe Illustrator: Part 3
07:40
4.4Writing the HTML10:11
4.4
Writing the HTML
10:11
4.5Writing the CSS09:42
4.5
Writing the CSS
09:42
4.6Animating the Top Pencil03:55
4.6
Animating the Top Pencil
03:55
4.7Animating the Notepads in Edge Animate10:37
4.7
Animating the Notepads in Edge Animate
10:37
4.8Animating the Button05:20
4.8
Animating the Button
05:20
5.Conclusion
5.1Course Overview01:23
5.1
Course Overview
01:23
