Learn SVG Animation - With HTML, CSS & Javascript

Discover how to create stunning animations using HTML, CSS, and JavaScript! This fun course covers everything from SVG projects to CSS properties.

  • Overview
  • Curriculum
  • Instructor
  • Review

Brief Summary

This course is all about making web animations super easy and fun! In just two hours, you'll whip up six cool SVG projects and learn the basics of animation techniques. It's perfect for sprucing up your web projects!

Key Points

  • Create engaging animations using CSS and JavaScript.
  • Work on real projects with provided SVG files.
  • Learn techniques for optimizing SVG files for online use.

Learning Outcomes

  • Understand basic animation techniques for web development.
  • Create and optimize SVG files for use on websites.
  • Gain skills in CSS and JavaScript for animating web elements.

About This Course

Learn how these powerful animation are created using HTML,CSS & Javascript

Looking to enhance your next web development project? Or learn one of the most sort after animation skills?

Within two hours you will have created Six SVG projects looking at a number of different animation techniques. Using animation within the user interface of a website is now standard practise. This fast and effective course will introduce use to new ways to improve your client projects.

All SVG files are provided but we do also work through creating the SVG files in Adobe Illustrator(or Similar). Lessons are taught with video screencasts, explained in detail as we work through real projects created directly for this course.

Projects Include

- Animating Logos

- Animating Social Icons

- Hand Drawing Text

- CSS animation properties explained

- Using Gradients over Text and Icons (Cross Browser)

- Using Masks

- Using CodePen

- Introduction to SVG Optimisation Online

For a complete beginner to SVG we recommend taking our other course in the series. 


  • Optimise SVG files for use online

  • Prototype animations in the online tool Codepen

  • Use Javascript to calculate the length of an SVG Path

Instructor

Profile photo of code withsam
code withsam

Get ahead in the developer world. Learn new skills that will help take your career to the next level. Over 1000 positive reviews and 20k students enjoy my courses. If you need a specific course please contact us and we can create courses on anything related to coding.

More Courses By code withsam
Review
4.9 course rating
4K ratings
ui-avatar of IRIMANANA Henikaja Andriamahay
Irimanana H. A.
4.0
7 months ago

It's pretty good but I need more explanation for the general animation possible for svg you present.

  • Helpful
  • Not helpful
ui-avatar of Roni Lockwood
Roni L.
4.0
7 months ago

a bit out dated, I had to adjust a few things but overall a great way to start learning svg animation!

  • Helpful
  • Not helpful
ui-avatar of Ctrachte
Ctrachte
5.0
7 months ago

Sam did a really nice job.

The first project alone gave me everything I needed to get started with something relevant - a path animation (I'm not a graphics designer, but, rather, a geologist who would like to animate the downhole trace of a drillhole).

I would liken working through the exercise to watching a several second guitar riff tutorial on youtube. You end up using the pause key a lot and watching the lesson repeatedly before you get it, but it's worth it. Sam is British; his original English speech is a little fast the American ear, but, again, it's just a matter of adapting.

The other animations Sam covers show just how easy it is to do a number of attractive animation and text effects seen in film and the internet. The code is made available.

Even if you're new to CSS and SVG, this little course can provide really useful content quickly. Nice job.

  • Helpful
  • Not helpful
ui-avatar of Tristan
Tristan
5.0
11 months ago

Very nice course with great explanations!

  • Helpful
  • Not helpful
ui-avatar of Wayne Davenport
Wayne D.
5.0
1 year ago

Yes

  • Helpful
  • Not helpful
ui-avatar of Juan Sebastian Orozco Lozano
Juan S. O. L.
2.5
1 year ago

Demasiado Basico

  • Helpful
  • Not helpful
ui-avatar of Ali Hadi Falakah
Ali H. F.
5.0
1 year ago

Well explained! Thank you!

  • Helpful
  • Not helpful
ui-avatar of Syed Ali Abbas Rizvi
Syed A. A. R.
5.0
1 year ago

it's amazing short course to how know about the svg with best examples

  • Helpful
  • Not helpful
ui-avatar of Scott Hulet
Scott H.
5.0
1 year ago

Great content. I really like the pacing of the course. I gets the information across quickly ans with enough detail.

  • Helpful
  • Not helpful
ui-avatar of Tulio Macedo
Tulio M.
4.5
1 year ago

Good content, direct to the point, a bit shallow sometimes, but very good.

  • Helpful
  • Not helpful
Leave A Reply

Your email address will not be published. Required fields are marked *

Ratings

Courses You May Like

Lorem ipsum dolor sit amet elit
Show More Courses