I teamed up with @olivergareis to work on a website for the new #WebflowChallenge.
There are a few special details we’ll reveal over the next days. Right now, I’m working on a page transition built with the new Webflow GSAP Interactions timeline.
Each film page is powered by the CMS and clicking an item loads a new subpage, and the transition bridges the hard page reload so it feels completely seamless.
We also decided to link the background video to scrolling while moving through the film list.
It’s the first time I’ve tried this and it feels pretty nice.
Can’t wait to share more soon!
@webflow@contra #Contra #webdesign
You can now build 3D orbit animations in @webflow with the new @gsap_greensock interactions! And it’s insanely easy!
Something that wasn’t possible before: with just 2 action steps, you can change the perspective of child elements and create really interesting shapes like this!
Part of my #webflowchallenge NOVA build.
🚀 Webflow-Zauberei: Wie man mit 3 Spalten jongliert und dabei nicht ins Schwitzen kommt!
Mein neues Webflow Tutorial: Eine 3-Spalten-Scroll-Animation!
💻 Klon das Projekt kostenlos in dein Webflow-Dashboard. Echt leicht anzupassen und passt zu vielen Kundenprojekten.
Ergebnis anschauen:
https://column-image-scroll-animation.webflow.io
Tutorial jetzt online über mein YouTube Kanal.
Most Webflow designers still set up Marquee animations wrong.
The common mistake: using a page load animation.
That means it runs in the background the entire time, even when the user has scrolled far past the section.
That puts unnecessary load on the GPU and CPU.
The smarter approach is a scroll trigger. You start the animation when the element enters the viewport, and pause it when it leaves.
The new GSAP Timeline in Webflow makes this cleaner than ever. No custom code needed.
Built a clean hero scroll effect in Webflow using GSAP.
Sticky background with move + scale for a subtle parallax, plus a staggered title. All native with the new GSAP timeline.
Free cloneable in the comments.
And don’t forget: you can now copy
@gsap_greensock animations between
@webflow projects.
Over the next few weeks, I’ll be dropping more videos for this fictional high-end outdoor performance brand VYRO® 👌
Webflow’s native Lightbox is fast, reliable, and great for simple galleries. The downside: you barely have any real control over the design. Until now, the only real way to customize it was with a bit of custom CSS for small tweaks.
That’s exactly why I built a free Lightbox Customizer tool.
It lets you customize different parts of the native Webflow Lightbox, export the code, and paste it straight into an Embed element in your @webflow project.
If you find it useful, I’d really appreciate you sharing the tool or the video with your network. And if you have ideas for improvements, drop them in the comments.
Modern interfaces are no longer defined by clean layout and typography alone. Motion often makes the difference between a design that feels average and one that feels premium, dynamic, and current.
That’s exactly where this new tutorial comes in: A contact stage animation in Webflow.
The overall look is similar to current trends where motion feels more physical, and slightly bouncy. What makes this setup especially strong is the combination of 3D depth, Split Text, stagger effects, and elastic bounce.
If you’re already part of my Webflow GSAP Interaction Masterclass, you can copy this setup directly out of the course file and use it in your client projects.
First time using GSAP inside Webflow for a slider. @olivergareis had some very special requirements (of course 😄) but it turned out beautifully.
Before this, I spent way too long trying it with Swiper with autoplay, free mode, draggable options etc. But once you add loop, it never felt truly buttery. Even with autoplay delay set to the minimum, it still didn’t feel “free”. It stutters and get stuck. Swiper is great, but this type of always-smooth loop just isn’t what it’s built for.
I honestly had never heard of GSAP’s Inertia Plugin before but wow it feels so good. Together with Draggable Plugin you can grab it and glide it back and forth like butter.
Little detail I love: when you hold the mouse down, I toggle an active/pressed class on the slider list, and CSS slightly scales down all items in 1000ms → instant “pressed” feedback. Super simple, super satisfying.
The best part: I converted the whole thing into a reusable component, so it works with images, CMS items, and even videos.
I originally found the idea from an cloneable on the Webflow Showcase site of osmosupply, then extended it with the help of AI:
- added autoplay (still loops nicely)
- added the scale-on-drag interaction
- kept everything smooth + independent (even with multiple sliders on one page)
- added options in the JS to simply change speed of autoplay etc
Entrance animation:
As soon as the slider enters the viewport, I animate the slides in using native Webflow GSAP interactions. Key trick: wrap the media inside each slide with an extra inner div and animate that wrapper so you don’t mess with the loop/autoplay measurements.
I have to say, I’m genuinely blown away by how good GSAP interactions in Webflow have become.
Incredibly powerful, way fewer steps to build complex animations and on top of that, it’s just a lot of fun.
Thanks @webflow for taking this next step.
The video shows a few animation previews from my Webflow GSAP Masterclass.
You Won’t Believe This 3D Line Globe Interaction Was 100% Built in Webflow.
You have maybe seen similar motion in Spotify’s Year in Review.
What interested me was not the look, but the interaction model behind it.
Nothing moves unless you scroll.
The globe is a static 3D structure built entirely with div elements.
Styled with pure CSS in Webflow — no additional custom code required.
Animated with the new GSAP timeline inside Webflow.
I broke the full system down step by step and published it as a complete tutorial.
When I first saw the layouts from @olivergareis TypoMonday Club, I knew I wanted to rebuild one of them in Webflow someday.
At the end of last year, it actually happened and I got to help him build his new course site with a strong focus on typography in Webflow 💪
