SVG Animation

With SVG you can combine the small size with modern and impressive design. I will teach you how to work efficiently with SVG elements, use them to create an immersive and animated UI.

Course Curriculum

40 Videos - 4 Hours - 7 Sections

  • 1

    SVG Basics

    • Introduction
    • Support and Performance
    • SVG Platonic Shapes
    • SVG Text
    • SVG Path
    • Tags Attributes

  • 2

    Important Concepts

    • ViewBox and ViewPort
    • Preserve Aspect Ratio
    • Transform Origin
    • Positioning
    • SVG structuring tags
    • Nested SVGs
    • SVG vs. CSS Properties
    • Round Up

  • 3

    SVG Filters

    • Blur Effect
    • Shadow Effect
    • Light Effect
    • Gradients
    • Blending

  • 4

    GSAP 3

    • Introduction - GSAP Syntax
    • GSAP Functions (10 Parts)
    • The Timeline
    • The Timeline Functions (6 Parts)
    • Quick look to older versions
    • Round Up

  • 5

    GSAP Plugins

    • GSDev Tools
    • DrawSVG
    • Physics2D
    • Scramble Text
    • CustomBounce & CustomWiggle
    • morphSVG
    • Inertia
    • Split Text
    • Motion Path

  • 6

    GSAP and Frontend Frameworks

    • Angular Example
    • React Example
    • VueJS Example
    • GSAP with jQuery

  • 7

    Round Up

    • Course Round Up
    • Help Files
    • Important References