GSAP animations in Webflow (animate a hero with 3D Spline scene)

What you will learn:

— Create an interactive transition in Spline
— Write code in CodeSandbox and use it in Webflow
— Create a GSAP timeline with smooth animations
— Animate a tween with multiple targets with some delay between the start of each animation (GSAP Stagger)
— Use GSAP’s position parameter for precise timing
— Animate multiple elements with the same class name
— Create a randomized stagger animation
— Optimize your external custom code
— and more …

Live preview:
www.dirklach.com

----

[JOIN MY NEW PATREON COMMUNITY]
  / design2code  

---

MY COURSE +

Webflow Journey / Become a Webflow professional (learn Webflow, Custom Code, and GSAP)
https://www.dirklach.com/webflow-journey
(Coming soon)

---

TOOLS I USE +

Webflow Cloneables
https://webflow.grsm.io/dirk

Fathom / Website analytics (cookie-free, GDPR compliant, privacy-first)
https://usefathom.com/ref/CTTPPQ
($10 discount)

Epidemic Sound / Music for YouTube (unlimited downloads of over 40,000 tracks and 90,000 sound effects)
https://share.epidemicsound.com/1sud8y
(30-day free trial)

Screen Studio / Beautiful Screen Recordings in Minutes:
https://screenstudio.lemonsqueezy.com?aff=mgnVo

(Affiliate links)

---

TIMESTAMPS +

00:00 Intro
00:25 What you will learn
00:36 Webflow Markup & Styling
02:59 Three Dimensions Showcase Site
03:10 Spline Build (States & Interactions)
06:53 Add Custom Code
06:54 Create a CodeSandbox
07:45 Link CodeSandbox to Webflow
09:47 Add GSAP to Webflow project
10:31 Add SplitType to Webflow project
11:47 Use SplitType
13:30 Add GSAP animations
14:03 Animating words separately
15:33 Stagger animation to animate multiple elements
16:23 Position parameter for precise timing
25:25 Animate multiple elements with same class name
26:55 Randomize stagger animation
29:56 Final animation
30:04 Optimize external custom code performance

---

#webflow #gsap #spline #webdesign #design2code