Udemy

Learn SVG Animation - With HTML, CSS & Javascript

Enroll Now
  • 20,233 Students
  • Updated 8/2017
4.2
(2,186 Ratings)
CTgoodjobs selects quality courses to enhance professionals' competitiveness. By purchasing courses through links on our site, we may receive an affiliate commission.

Course Information

Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
1 Hour(s) 23 Minute(s)
Language
English
Taught by
code withsam
Rating
4.2
(2,186 Ratings)

Course Overview

Learn SVG Animation - With HTML, CSS & Javascript

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. 


Course Content

  • 8 section(s)
  • 22 lecture(s)
  • Section 1 Welcome To The Course
  • Section 2 Workflow setup and tools for course project
  • Section 3 SVG Project - Animating a Logo
  • Section 4 Animation Properties
  • Section 5 Hand Drawn Text Animation Project
  • Section 6 Social Icons Project
  • Section 7 Masking & Gradients
  • Section 8 Course Close

What You’ll Learn

  • Optimise SVG files for use online
  • Prototype animations in the online tool Codepen
  • Use Javascript to calculate the length of an SVG Path
  • Create SVG's that make use of Masks & Gradients


Reviews

  • A
    Alex ONG
    5.0

    This course really sets the bench mark the most easiest to learn working with SVG and CSS with lots of technics involve and keeps me wanting to have more fun!!.

  • 이현우
    1.0

    too simple

  • A
    Anchit Kawaatra
    3.5

    It said powerful animations, but not quite so. Will have to purchase some good advanced animations. Its good for just checking to see.

  • J
    Jean-René Lagacé
    5.0

    Great, super informative and excellent pacing.

Start FollowingSee all

We use cookies to enhance your experience on our website. Please read and confirm your agreement to our Privacy Policy and Terms and Conditions before continue to browse our website.

Read and Agreed