Published On Nov 15, 2023
In this intermediate-level GSAP tutorial we will explore a page load hero section text stagger middle-out animation combined with the GSAP ScrollTrigger plugin. We will have a look at the TextSplit library to automatically create spans for individual character which we will then animate with GSAP. GSAP + @Webflow can work well to create beautiful award-winning websites like the inspiration for this build: Alpha Tango Creative Studio.
// CLONE IT
👯♂️ https://try.webflow.com/cloneable-is-...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): https://www.creativecodingclub.com/bu...
// FREE resources
✂️ Code Snippet Library: https://code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: https://www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: https://www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): https://www.webbae.net/product/webflo...
// Connect
🙋♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
00:00 Introduction
00:15 Webflow Project Overview
01:29 Page Load Animation
03:56 ScrollTrigger Animation