Learn SVG Animation – With HTML, CSS & Javascript

You will learn how these powerful animations are generated with HTML, CSS, & JavaScript

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

Requirements

  • An editor like Atom.io or Sublime Text should be installed on their computer
  • You can follow along if you have a vector graphics program like Adobe Illustrator, but it is not necessary. The SVG files are all provided.
  • Know how to write CSS code and style using classes
POPULAR  Blender 2.79: Complete training from beginner to pro

Description

Would you like to improve the development of your next website? What about learning one of the most popular animation skills?

Using a variety of animation techniques, you will be able to create six SVG projects in two hours. It is now standard practice for websites to use animation within the user interface. With this fast-paced and effective Learn SVG Animation – With HTML, CSS & Javascript course, we will discover new approaches to improving client projects.

SVG files are provided, but we also create the files using Adobe Illustrator (or a similar program). Our instructors screencast the lessons as we go through all of the assignments in detail and explain the concepts in depth.

POPULAR  JavaScript Basics for Beginners

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

In case you are a complete beginner, we recommend looking at our other SVG Learn SVG Animation – With HTML, CSS & Javascript courses in the series. 

Who this course is for:

  • Should already know what an SVG file is
  • You must be familiar with HTML/CSS – this job is not suitable for someone with no prior coding knowledge
  • These tutorials are for students who want to better their SVG animations and learn new techniques, but aren’t sure where to start
POPULAR  The Complete Full-Stack JavaScript Course!

Created By: Code Collective
Last updated 8/2017
English
Size: 172.92 MB

Download Course
https://www.udemy.com/course/learn-svg-animation/

Leave a Reply

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

Back to top button

We're On Telegram

Join our telegram channel and be the first to know when we post new courses, update courses and also when we share freebies.