Learn GSAP for Webflow

GSAP is a popular Javascript library to create performant and smooth animations on your Webflow site.

In this episode, Cassie Evans from GSAP will teach us the basics of how to use this GSAP in your Webflow builds.

Get the cloneable & more resources: http://wfl.io/gsap-livestream


Chapters:

0:00 Starting soon
2:48 Introduction
4:15 What is GSAP?
6:22 Webflow websites that use GSAP
7:40 Animation built during the livestream
9:30 How to install GSAP
12:00 Animating in loading paragraph with GSAP Tweens
17:42 Staggering the letters using GSAP Stagger
23:02 Adding ease to the animation
26:05 Animating out loading paragraph with GSAP Timeline
29:10 Understanding the position parameter
31:40 Animating the background
37:37 Animating the images
52:19 Getting a GSAP badge
53:02 [Q&A] Why not use gsap.fromto instead of gsap.from and then gsap.to?
53:41 [Q&A] Does GSAP affect page load speed?
55:38 [Q&A] How to handle a user's preference around motion?
55:47 [Q&A] Do you need to be an expert at Javascript before starting GSAP?
57:40 [Q&A] Where to go if you're interested in learning GSAP?
59:05 Credits!