Codrops·47wDeconstructing the 35mm Website: A Look at the Process and Technical Details
A technical breakdown of building an interactive 3D camera website using Three.js, covering edge detection with Sobel operators, mesh highlighting through render targets and raycasting, and scroll-triggered film roll animations. The tutorial demonstrates custom shader development, post-processing effects, and advanced WebGL techniques for creating engaging 3D web experiences.
Codrops·49wFrom SplitText to MorphSVG: 5 Creative Demos Using Free GSAP Plugins
The post explores the creative potential of GSAP's newly free premium plugins through five animation demos. It provides step-by-step guides for using plugins like SplitText, MorphSVG, Inertia, DrawSVG, and Physics2D to create interactive and animated web effects, such as text smashing and glowing dot grids. These examples highlight how GSAP can enhance web design and add playful elements to user interfaces. Resources are available for further exploration on CodePen and Webflow.
Codrops·46w3D Cards in Webflow Using Three.js and GLB Models
A comprehensive guide to creating interactive 3D cards in Webflow by integrating Three.js with GLB models. The tutorial covers the complete workflow from creating 3D models in Blender, setting up Three.js scenes with proper lighting and camera controls, and embedding the functionality into Webflow projects. Each card transforms from a flat UI element into an interactive 3D environment with real-time rendering, orbital controls, and atmospheric lighting effects.
Codrops·47wAnimated Product Grid Preview with GSAP & Clip-Path
Learn to transform a simple product grid into an interactive, animated experience using GSAP and CSS clip-path. This tutorial breaks down the process into manageable steps, from setting up the initial layout to implementing hover interactions and animating clip-paths. Attention is given to enhancing usability and accessibility, ensuring a smooth user experience.
Codrops·50wOn-Scroll 3D Carousel
Explore the inspiration and process behind creating an interactive on-scroll 3D carousel using GSAP plugins. Learn about effective animation techniques and how GSAP's free availability enhances web animation possibilities. A proof-of-concept project demonstrates the use of SplitText and SmoothScroller for dynamic page transitions.