The greatest animated landing page with GSAP | Web Dev Challenge S3.E5

Build a landing page that makes us all stop and pay attention. Join the hackathon: build your own landing page and win prizes and swag: https://codetv-gsap-cloud.webflow.io/ Every so often a website catches the eye of the internet at large and ends up making the rounds as something to be appreciated, emulated, and studied as a great example of what the web can be when we put our hearts into the work. We want you to pull out all the stops and build a landing page that makes the viewer stop and say, “Wow.” The landing page can be for anything: a fictional business, an imaginary product, a piece of media you wish existed, or anything else you’re interested in. Sponsored by Webflow (https://codetv.link/webflow) The Tool: GSAP Your app must use GSAP as part of the build. GSAP is a JavaScript animation library that has a huge number of tools and plugins that make it possible to do just about anything you can imagine with your website. The full GSAP suite of tools is now available for free thanks to the support of Webflow. To make it easier than ever to deploy your GSAP creations, Webflow Cloud lets you deploy any repo, including fullstack custom applications. GSAP: https://gsap.com/ Starter repo: https://github.com/webflow-examples/a... Webflow Cloud: https://webflow.com/feature/cloud THE DEVS The Keyframers David Khourshid   / davidkpiano   Stephen Shaw https://shaw.city Team Osmo Ilja van Eck   / ilja-van-eck   Dennis Snellenberg   / dennissnellenberg   The US Mint & Treasury Henry Desroches https://bsky.app/profile/strange.website THE ADVISORS Cassie Evans   / cassie-codes   Jason Lengstorf https://bsky.app/profile/jason.energy https://jason.energy/links THE APPS Team Osmo site: https://osmo-world-cup-26.webflow.io/ The Keyframers source code: https://github.com/keyframers/landing... site: https://lunarland.ing/ The US Mint & Treasury source code: https://github.com/xdesro/sell-your-soul site: https://sell-your-soul.webflow.io/ ---------------------------------------------------------------------- Get early access to new videos, exclusive bonus content and other perks, and join me in building a happier, healthier, friendlier web dev community! https://codetv.dev/support ---------------------------------------------------------------------- Chapters: 0:00 In this episode... 0:30 Welcome + the challenge 0:44 Rules of the challenge + required tool + meet your advisor 2:00 Planning phase starts 2:40 Meet The Keyframers + their app idea 4:15 Meet Team Osmo + their app idea 6:25 Meet The US Mint & Treasury + their app idea 8:25 Advisors weigh in on the plans 9:13 Build phase starts 10:23 Progress check ins 16:10 Late stage check ins 19:10 Join the Webflow + GSAP hackathon! 19:45 Team Osmo's site demo 23:13 The US Mint & Treasury's site demo 25:25 The Keyframer's site demo 28:05 Reflections on the challenge 29:31 Outtakes and credits