The Complete GSAP: JavaScript ,HTML and CSS Course for 2022

The Complete GSAP: JavaScript ,HTML and CSS Course for 2022

The Complete GSAP: JavaScript ,HTML and CSS Course for 2022

Create Animated Web Pages From Scratch with GSAP

Language: english

Note: 4.1/5 (76 notes) 20,282 students

Instructor(s): Martin Yanev

Last update: 2021-08-15

What you’ll learn

  • Learn the basic GSAP concepts
  • Create impressive web animations
  • Learn how to use GSAP with CSS, HTML and JavaScript
  • Build fully functional animated web page
  • Animate SVG display on your website
  • Create cursor following graphics



  • Desire to learn GSAP Web Animation Libraries
  • Google Chrome, Mozilla or Safari web browser installed
  • No prior web development skills are required!



In this course you will explore GSAP the most robust high-performance javascript animation library on the planet, recommended by Google for JS-based animations and every major ad network excludes it from file size calculations. HTML5 javascript animation built for professionals, GSAP is packed with features that make most other engines look like cheap toys. Animate colors, beziers, css properties, arrays, scrolls and lots more. Round values, smoothly reverse() on the fly, use relative values, automatically accommodate getter/setter functions, employ virtually any easing equation.

GSAP packs an amazing amount of power into a surprisingly small package. Modular, flexible, and ultra-efficient, its plugin architecture keeps the core engine tight while allowing virtually any feature to be added via optional plugins.

The course will give you a great foundation for building animated websites from scratch. Even if you are complete beginner don’t worry! We included easy to grasp introductory sections for each piece of software you need to start using GSAP. You will learn core web development languages such as CSS, HTML and JavaScript.

GSAP makes extremely easy for you to build professional animations on your web page. In fact in the past few years, the websites that recieve the annual prize for “The Best Website of the Year” are all written on GSAP.

With GSAP you will be able to:

– Create randomly movable objects

– Imitate hand drawing of SVG files

– Create cursor follow animations

– Movable web page panels

– Different ease movements


Who this course is for

  • Beginner Front End Developers
  • Beginner Web Developers
  • Professionals who wish to add GSAP animations to their website
  • Web Development Students
  • Professional Front End Developers
  • Business Owners


Course content

  • Introduction
    • Introduction to GSAP
    • Important Notes and Course Navigation
    • Source Code
  • Introduction to HTML5
    • Create HTML Files
    • Tags & HTML Page Structure
    • Headings and Texts
    • Inline, Block Level Elements and Links
    • Field Attributes: Message, Email, Age, Date
    • Buttons, Image Upload and Sizing
    • Quotations, Citations and Abbreviations
    • Page Switching
  • Introduction to CSS
    • Set Up a CSS Project
    • Set Colors with CSS
    • Design Your Fonts with CSS
    • IDs and Containers
    • Box Margin, Border and Padding
    • Creating Forms with CSS
    • Create Your First CSS Page
  • Introduction to JavaScript
    • Data Types and Console Statements
    • Methods and Arrays
    • Loops: For, While, If and Switch
    • Functions and Classes
    • Use HTML Elements in JavaScript
  • GSAP Web Animations
    • Introduction to GSAP
    • A Simple GSAP Animation
    • HTML and CSS Project Set Up
    • GSAP Movement
    • Bouncing Types
    • Adding Second Object
    • GSAP Appearance
    • Multiple Objects Synchronization
    • Advanced Synchronization
  • Building a GSAP Web Page
    • Project Set Up and Overview
    • Design Randomly Movable Object
    • Leave Size
    • Inline Leaves
    • Resize Website Background
    • Cursor Appearance
    • Drawing an SVG


The Complete GSAP: JavaScript ,HTML and CSS Course for 2022The Complete GSAP: JavaScript ,HTML and CSS Course for 2022

Time remaining or 83 enrolls left


Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate