A detailed step-by-step guide to building a scroll-driven 3D cube gallery in Webflow using GSAP. Covers CMS collection setup with custom transform fields, fullscreen stacked background image transitions, staggered SplitText word animations, CSS preserve-3d cube construction driven by CMS data, scroll-triggered GSAP interactions with attribute-based targeting, and hexagonal cube movement paths. Also addresses responsiveness with viewport units, overflow fixes, and macOS overscroll behavior.
Table of contents
1. Starting from the CMS structure2. Building the scroll section3. Creating the fullscreen background gallery4. Adding the overlay and centered text5. Planning the background transition animation6. Setting up attribute-based targeting7. Creating the scroll interaction8. Building the first text-out action9. Understanding timing in scroll-driven animations10. Adding the next text-in action11. Fading the first image out12. Repeating the transition pattern13. Looking at the animation timeline14. Building the cube collection list15. Preparing the cube blueprint16. Creating the cube faces17. Turning CMS items into cube faces with CSS18. Fixing the cube position and image order19. Planning the cube animation20. Adding the first cube rotation21. Moving the cube along the hexagon22. Completing the cube animation23. Fixing horizontal overflow24. Preventing the macOS overscroll bounce25. A quick note on responsivenessFinal thoughtsSort: