A few days ago, I was updating our Michael Bay website concept and remembered this bracket effect I always wanted to turn into a tutorial. Each name scales up in the center while the brackets animate in. It’s a simple effect, but it adds a really nice flow. And yes, classic Webflow tutorials might feel a bit old-school with everyone talking about AI. But I still work a lot directly in Webflow, especially for client projects. I’ll also bring more AI coding workflows to the channel soon and show how both worlds can work together. But for today, let’s build this effect with the Webflow GSAP Timeline.

Ever wanted a CMS grid that looks completely custom but is still powered by Webflow CMS? Normally this is hard to do because every CMS list item uses the same layout and styling by default. But in my new tutorial, you'll build exactly that. You'll learn how to: – Create a unique testimonial layout from a single Collection List – Target individual items with :nth-child() directly in the Webflow Designer – Use container query units to keep everything perfectly responsive The result is a flexible CMS layout that's hard to recreate with AI.

When animating a hero section, it actually helps to ask one pretty obvious question: What is the hero of the animation? In this testimonial layout, it was clearly the counter. There’s already a lot going on around it in the design, so animating everything at once would have been way too much. Instead, I built the animation step by step. The counter comes in first. As it slows down, the collage and gradients start to fade in around it, followed by all the little dots. And when the full layout is there, the testimonial loop starts. The cards swap with a 3D perspective and a small elastic bounce, while the names and roles stagger in and out line by line. A few other details I cover in my new tutorial: → Why I split the entrance and the infinite loop into two GSAP interactions → How I stagger the cards from the outside towards the center instead of simply left to right → How to add real perspective directly inside the GSAP action step → How I pause the loop when the section leaves the viewport Everything is built visually with the @greensock timeline in @webflow. I recorded the full process, link in the comments.

I’m slowly starting to explore the animations for my new FORMBURG site. This was actually the very first section, but it already sets the tone for the overall feel. Check out the article for the story behind it!

I’m a Webflow Awards finalist! Nominated for Educator of the Year. And honestly, a nomination like this only happens because people actually watch the tutorials, take the courses, ask questions, share my work, and keep me excited about teaching @Webflow. So: thank you!!! 🥹 And if you think I deserve the title, voting is open until August 8.

New teaser video for the upcoming FORMBURG homepage, featuring a few highlights from recent projects to get everyone hyped as soon as they land on the site. 🙂