Webflow Infinite Scroll + Three.js Shader Effects

I developed a custom horizontal infinite scroll slider enhanced with shader-based image deformation using Three.js, GSAP, and custom GLSL shaders. As each image enters the viewport, it reacts with a smooth distortion effect—creating an immersive and dynamic web experience. Perfect for showcasing creative portfolios, visual products, or any brand looking to leave a bold digital impression.

LIVE URL https://franco-showcases.webflow.io/slider-loop

🛠️ My Role: Creative Developer – Custom interaction design and Webflow implementation.

🧪 Technologies Used: Webflow, Three.js, GSAP, GLSL, JavaScript

🧠 Project Goals: To explore how custom shaders and interactive scrolling can elevate the storytelling of a modern website.

This is part of my ongoing research on combining Webflow with WebGL to push creative boundaries without sacrificing performance or scalability.

⚙️ Technical Highlights:

Horizontal infinite scroll built with GSAP + ScrollTrigger

Real-time shader deformation on image focus using GLSL

Integrated smoothly in Webflow with custom code

Performance-optimized with lazy loading logic

Flexible structure, reusable for future Webflow projects

Want your website to look and feel like this? Let’s build an interactive experience that gets remembered. 📬 DM me or connect via LinkedIn | Twitter Portfolio

https://franco-portfolio-site.webflow.io/ #Webflow #ThreeJS #GSAP #CreativeDeveloper #ScrollAnimation   #WebDesign #ShaderEffects #FrontendDevelopment #ImmersiveWeb #GLSL