Hook
Osmo - Dev Toolkit Built to Flex
More breakout videos from this creator.
So, you want to build a website like this? Like this? Or like this? Well, I poked around and I figured out how they're all built. The answer honestly surprised me. If you make it to the end of this video, I will share the exact tools that I would use if I was gonna build a website like this with pretty limited front-end animation experience. So this all started when I came across Josh Yolk's videos. He talks about some of the most beautifully designed websites on the web right now. And I, of course, being an engineer, had to know how they're built. I assumed most of these websites would be using some sort of 3D library, like Three.js or React Three Fiber. But actually, most of these sites are built on Webflow. I thought Webflow was mostly a tool for non-developers, but I guess I was wrong. With Webflow, you get some of these really cool animations, these scroll effects and polished transitions. You certainly don't have to touch code, but if you are inclined, there are a lot of things you can add on. Most developers layer in GSAP. Turns out it's become an industry standard for web animation. GSAP is everywhere on these websites. And many developers pair it with libraries like Lenis for smooth scrolling and Barba.js for seamless page transitions without full page reloads. So the Lando Norris site, this was built in Webflow, but they added Three.js on top to render this 3D helmet. But here's the thing, you don't need a 3D library to do some of this cool 3D stuff. Check this out, this isn't even a 3D model. This is just a WebP file, basically a compressed GIF. You could do this just within Webflow. The Shopify Editions page, this is built with React with some custom scroll animations. Tons and tons of video. Just 2D video. So if I was gonna build something like this today fast, here's what I would do. First I'd go watch a tutorial on Webflow and GSAP, and then I'd find the template that is already set up with Webflow and GSAP and start with that. Then I would leverage Osmo. I just heard about Osmo. They have this vault of a ton of pre-built components that you can just plop into your Webflow project. Look at these things. A lot of these things are just Osmo components. So cool. Anyway, that's what I would do. My name is Sahana, I'm a startup engineering leader, and I make these videos to help you thrive in tech. I will be right back, I got to go play around with this stuff.