Codrops

The main idea is to switch the layout view while scrolling and keep the section pinned. We achieve this by combining GSAP’s ScrollTrigger and Flip which seamlessly transition the layout to a new design. This is partly inspired by this demo made by the folks of Framer University.

Scroll-Based Layout Animations

The demo is to animate a mask shape that has a turbulence filter applied to it. Magically, this results in an apparent animation of the whole distortion around the image. We also use the Flip plugin to animate the split title to another place in the content while doing this.

On-Scroll SVG Filter Effect

Codrops stands at the forefront of innovation in web design, serving as a boundless source of inspiration and knowledge for designers and developers alike. Through a captivating array of tutorials, demos, and showcases, Codrops invites creatives to embark on a journey of exploration, pushing the boundaries of what's possible in web development. From  CSS techniques and JavaScript animations to immersive user interfaces and experiential storytelling, Codrops empowers designers and developers to unleash their creativity and craft unparalleled digital experiences that captivate and engage audiences.

Best of Codrops — July 2023