• Post category:StudyBullet-7
  • Reading time:6 mins read


Create Animated Web Pages From Scratch with GSAP

What you will 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

Description

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:


Get Instant Notification of New Courses on our Telegram channel.


– Create randomly movable objects

– Imitate hand drawing of SVG files

– Create cursor follow animations

– Movable web page panels

– Different ease movements

English
language

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