Scribd
Upload
92 views3 pages

GSAP Animation Course Overview

The Gravity Coding - GSAP Animation Course consists of 10 modules with over 50 lessons and 30 hours of content, covering foundational concepts of animation in UI/UX, GSAP installation, and various animation techniques. Key topics include scroll-based animations, advanced GSAP techniques, and practical projects like interactive dashboards and portfolio websites. The course aims to equip learners with the skills to create high-quality animations for web interfaces.

Uploaded by

2023gu205
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
92 views3 pages

GSAP Animation Course Overview

The Gravity Coding - GSAP Animation Course consists of 10 modules with over 50 lessons and 30 hours of content, covering foundational concepts of animation in UI/UX, GSAP installation, and various animation techniques. Key topics include scroll-based animations, advanced GSAP techniques, and practical projects like interactive dashboards and portfolio websites. The course aims to equip learners with the skills to create high-quality animations for web interfaces.

Uploaded by

2023gu205
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

■ GRAVITY CODING - GSAP ANIMATION COURSE

■ Complete Module Topics (10 Modules | 50+ Lessons | 30+ Hours)

■ MODULE 1: Foundations of Animation in UI/UX (7 Lessons)


1. What is Animation?
2. Why Animation Matters in UX/UI
3. Types of Web Animations
4. Principles of Motion Design
5. Easing, Anticipation, Follow-through
6. Examples in Real World Interfaces
7. Awwwards Breakdown #1 – Landing Page Flow

■■ MODULE 2: Getting Started with GSAP (7 Lessons)


1. What is GSAP?
2. Why GSAP Over CSS/JS?
3. Installing GSAP (CDN, NPM, [Link])
4. Your First GSAP Animation (Live Code Walkthrough)
5. Using [Link](), [Link](), [Link]()
6. Controlling Animation with .pause(), .play(), .reverse()
7. Project: Animate a Simple Website Hero Section

■■ MODULE 3: Animation Properties Deep Dive (5 Lessons)


1. Transform Properties: x, y, scale, rotate, opacity
2. Timing: Duration, Delay, Repeat, Yoyo
3. Easing: All GSAP Eases + CustomEase
4. Callback Functions: onStart, onComplete, onUpdate
5. Project: Build a Responsive Animated Card Grid

■ MODULE 4: Timelines and Sequencing (5 Lessons)


1. Introduction to [Link]()
2. Relative Positioning ('<', '>', absolute values)
3. Nesting Timelines + Control
4. Animating in Loops
5. Project: Animated Feature Reveal with Timeline Staggering

■ MODULE 5: Scroll-Based Animations with ScrollTrigger (6 Lessons)


1. What is ScrollTrigger?
2. Pinning, Scrubbing, and Toggle Actions
3. ScrollTrigger + Timelines
4. Responsive Scroll Animations
5. ScrollTrigger Debugging & Markers
6. Project: Scroll-Synced Parallax Landing Page

■ MODULE 6: GSAP Plugins – The Power Suite (7 Lessons)


1. TextPlugin – Typewriter Effects & Text Transitions
2. MotionPathPlugin – Animate Along SVG Paths
3. Flip Plugin – Animate Layout Changes
4. Draggable Plugin – Build Drag-and-Drop UIs
5. ObserverPlugin – Create Gesture-based Animations
6. ScrollSmoother – Smoother-than-silk Scrolling Experience
7. Project: Animated Interactive Dashboard (GSAP + Flip + Draggable)

■■ MODULE 7: SVG, Canvas & Performance (4 Lessons)


1. Animating SVGs: Stroke, Path, Draw, Morph
2. SVG with ScrollTrigger & MotionPath
3. Canvas & GSAP – Where They Work Together
4. Project: Animated Hero Section with SVG Illustration

■ MODULE 8: Awwwards-Level Animation Projects (6 Lessons)


1. Portfolio Website Animation
2. Interactive Product Showcase
3. Creative Landing Page
4. Data Visualization Animation
5. Micro-interactions Collection
6. Mobile-First Animations

■ MODULE 9: Advanced GSAP Techniques (5 Lessons)


1. Custom Eases with Ease Editor
2. Handling Responsive Animations (matchMedia)
3. Integrating GSAP with [Link]
4. Custom Scroll + GSAP Syncing
5. Creating Reusable Animation Functions

■ MODULE 10: Developer Workflow & Final Projects (4 Lessons)


1. Project: [Link]
2. Project: BMW M5 Sedan
3. Project: Spylt
4. And Many More Upcoming Soon...

You might also like