Learn GSAP for Webflow
HTML-код
- Опубликовано: 5 июн 2024
- 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: 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!
Ohh, Awesome! Why don't you guys integrate it directly into webflow? That was the best bundle of all time.
really amazing. I'll try to learn it :)
Loved the video, very helpful for beginners, you guys need to shoot another live explaining the second part of gsap, you left out the most important thing: ScrollTrigger.
This video was really helpful for hero animations, but won't work in sections of the page that are not in view.
Great episode
Hum, muito interessante. Gostei desse canal no YT! Vou assistir mais videos como este.
Thanks!
thanks mate
great stream! I'll be over here working on my Javascript certificate 😆
If anyone is looking for the KING of GSAP, it's this guy!
❤❤
Will this be compatible for use with DevLink?
DevLink syncs component by component so page level custom code (like GSAP) doesn't carry over.
Cassie is the closest thing to a Fairy Codemother
🥹🫶
howd you get text block inside a paragragh?
Hey Robert, I imagine you mean that loading text. I added a span tag to each letter so I can target each letter separately!
@@Webflow thank you for responding.is that when i double click to highlight the letter and among the choices is "wrap in span."
@@robertfigueroa425 Yes young lord, wrap in span indeed
"Squiggly boys"
I prefer the other guy and his whole energy way more.. Did you guys fire him or what?
The guy with the jokes?
16:42 Casually mocks our maker....be careful young lady....Mordor is still taking offerings....JK good video except that part