DESIGN

Animated 3D Grid Template for Webflow

A clean scroll experience built with native components and custom code, ready to clone and customize

Release
May 24, 2025
reading time
min
min

Published my first Webflow template yesterday and its already cloned a few times, liked by the official Webflow account and even got a thank-you email from one of the founders of Memberstack. Wild.

The template is a light, neutral starting point designed to be easy to build on, also working with themes. The core concept comes from a project on Codrops by Manoela Ilic, which I reworked to fit into Webflow.

I stripped away most of the CSS so the layout can be edited directly inside the Webflow Designer, then tweaked the original GSAP and vanilla JS to make it fit my vibe, the design, and have it a a bit more responsive. The goal was to keep it as Webflow-native as possible without compromising on motion.

The layout, structure and animations are all set up in a way that’s easy to clone, remix and make your own.

If you are comfortable with code, feel free to dive in and tweak it to you liking, I left a few comments in there to help you test things out.


What’s inside:

  • 3D grid animation using translate3d
  • Scroll-triggered transitions with GSAP
  • Layout built with components and the Lumos framework
  • Subcomponents for each element, making it easy to show or hide what you need
  • Minimal CSS
  • All code embedded within the component for easy control

Find it here
https://webflow.com/made-in-webflow/website/3d-grid-template


Original idea and source code by Manoela Ilic, you can read here article about the project here
https://tympanus.net/codrops/2024/10/16/staggered-3d-grid-animations-with-scroll-triggered-effects/