Creative Hub

Explorations in code and design from the creative web community

Featured Picks

Sticky Grid Scroll

Mar 2, 2026 by Theo Plawinski

grid GSAP scroll sticky

Cinematic 3D Scroll Experiences with GSAP

Nov 19, 2025 by Joseph Santamaria

3D GSAP React Three Fiber scroll Three.js WebGL

3D Text Scroll Animations

Nov 4, 2025 by David Faure

3D GSAP scroll typography

Hand-drawn Papercraft Portfolio

Dec 29, 2025 by Andrew Woan

Grid Layout Transitions with GSAP Flip

Jan 20, 2026 by Iqbal Muthahhary

Skeleton Fluid Reveal

Mar 23, 2026 by Cullen Webber

hover Three.js WebGL webgpu x-ray

Pixel Image Effect with Three.js

Feb 2, 2026 by Chakib Mazouni

astro GSAP scroll Three.js WebGL

On-Scroll Horizontal Parallax Gallery

Feb 19, 2026 by David Faure

parallax scroll Three.js WebGL

The Creative Hub is a growing showcase of open source web demos, design experiments, interactive concepts, and creative ideas. It highlights original work by Codrops contributors alongside standout projects from around the web. Have something inspiring to share? Let us know.

Codrops Originals

Push Animation on Grid Items

Jun 5, 2024 by Manoela Ilic

Experimental CSS-Only Carousels with Scroll-Driven Animations

Jan 24, 2024 by Maxwell Barvian

carousel CSS Only css scroll scroll

Hover Motion Intro Animation

May 29, 2024 by Manoela Ilic

filter grid GSAP hover intro page transition

How to Code an On-Scroll Folding 3D Cardboard Box Animation with Three.js and GSAP

Dec 13, 2022 by Ksenia Kondrashova

GSAP scroll Three.js WebGL

Fullscreen Clip Animation

Mar 14, 2023 by Manoela Ilic

clip-path GSAP page transition

shining particles mask by dominik fojcik

Crafting a Dreamy Particle Effect with Three.js and GPGPU

Dec 19, 2024 by Dominik Fojcik

3D gpgpu postprocessing Three.js WebGL

Origami: 12 Free Animated 3D Objects

Jul 30, 2024 by deadrabbbbit

3D React Three Fiber Three.js WebGL

On-Scroll Perspective Grid Animations

Aug 3, 2023 by Manoela Ilic

3D grid GSAP scroll

Divi

Automatically Generate an Entire Divi Website in 2 Minutes

Create a complete website in seconds with AI-generated content or Starter Sites—fully styled, dynamic, and easy to customize with Divi’s intuitive builder.

Learn with Tutorials

Matrix Sentinels

May 5, 2025 by MisterPrada

GSAP particles Three.js TSL WebGL

The Aviator 2

Apr 20, 2022 by Michel Helms

3D game Three.js WebGL

Create an Abstract Image Slideshow with OGL, GLSL, and GSAP

Aug 16, 2021 by Francesco Michelini

glsl GSAP OGL slideshow WebGL

Scroll-Driven 3D Image Tube with R3F

Feb 17, 2026 by Matis Dené

3D infinite React Three Fiber scroll Three.js WebGL

Building an On-Scroll 3D Circle Text Animation with Three.js and Shaders

Feb 3, 2025 by David Faure

3D circular GSAP Three.js typography WebGL

Getting Creative with Infinite Loop Scrolling

Jan 11, 2023 by Manoela Ilic

GPU Galaxy Simulation

Nov 19, 2025 by Dan Greenheck

Three.js TSL webgpu

Emissive Dissolve Effect with Three.js

Feb 17, 2025 by Jatin Chopra

3D glsl Three.js WebGL

GSAP Highlights

8-Bit Snake Game

May 21, 2025 by Filip Zrnzevic

exploding game GSAP physics

On-Scroll Text Motion

Dec 19, 2025 by Manoela Ilic

GSAP scroll typography

Pixel Image Effect with Three.js

Feb 2, 2026 by Chakib Mazouni

astro GSAP scroll Three.js WebGL

wonjyou (hero and h2 guides)

Sep 27, 2025 by Carl Schooff

GSAP typography

Elastic Grid Scroll

Jun 3, 2025 by Manoela Ilic

elastic grid GSAP scroll

Custom Slider with GSAP

Dec 2, 2024 by Osmo

draggable GSAP slider

On-Scroll 3D Stack Motion Effect

Mar 6, 2024 by Manoela Ilic

3D GSAP scroll stack

Scroll-Synced Image Slideshow with Timed Cues and Keyhole Effect

Jun 19, 2025 by Luis Riancho

GSAP scroll slideshow

WebGL

Mascot 3D

Dec 28, 2025 by Sabo Sugi

3D glass refraction Three.js WebGL

Liquid Effect

Oct 7, 2025 by Kevin Levron

cursor fluid glsl Three.js WebGL

Stats-gl Version 3 Demo

Nov 7, 2024 by Renaud Rohlinger

Building Efficient Three.js Scenes: Optimize Performance While Maintaining Quality

Feb 11, 2025 by Niccolò Fanton

postprocessing React Three Fiber Three.js WebGL

Drops

Jan 8, 2025 by saharan

fluid haxe physics wasm water WebGL

How to Create a Sticky Image Effect with Three.js

Apr 10, 2019 by Daniel Velasquez

distortion draggable hover menu Three.js WebGL

Realtime WebGL origami simulator

Oct 21, 2018 by Amanda Ghassaei

3D origami WebGL

Broken Glass Effect (on click, WebGL)

Nov 20, 2024 by Ksenia Kondrashova

Scroll-driven Animations

Draggable grid

Sep 18, 2023 by nemutas

astro draggable grid infinite scroll Three.js WebGL

CSS view-timeline shine effect

Mar 20, 2025 by Ryan Mulligan

CSS Only scroll

Sketch 028: Infinite Loop Scrolling (ScaleX and ScaleY Animation)

Jan 11, 2023 by Manoela Ilic

On-Scroll Text Repetition Animation

Apr 13, 2022 by Manoela Ilic

GSAP repetition scroll typography

Crafting Scroll Based Animations in Three.js

Jan 5, 2022 by Bruno Simon

scroll Three.js WebGL

Exploration of On-Scroll Layout Formations

Sep 18, 2024 by Manoela Ilic

grid GSAP scroll

Sketch 024: Infinite Loop Scrolling

Jan 11, 2023 by Manoela Ilic

grid GSAP scroll

Orbit Gallery

Sep 7, 2021 by Michal Zalobny

grid infinite scroll

Grid-based Layouts & Effects

Direction Aware Hover Effect

Direction-Aware Hover Effect with CSS3 and jQuery

Apr 9, 2012 by Manoela Ilic

direction aware grid hover

“Design Samsung” Grid Loading Effect

May 15, 2014 by Manoela Ilic

Grid To Full Preview

May 27, 2025 by Gwen Bogaert

clip-path ecommerce grid GSAP

Orbit Gallery

Sep 7, 2021 by Michal Zalobny

grid infinite scroll

Infinite Layers Grid

Jun 11, 2025 by Jorge Toloza

grid GSAP infinite parallax

Grid View Switch Animation

Apr 12, 2023 by Manoela Ilic

Smooth Flexbox Filtering with Flip

Dec 4, 2020 by GSAP

filtering grid GSAP

Kinetic Typography Page Transition

Sep 29, 2021 by Manoela Ilic

grid GSAP intro page transition typography

State-to-state Animations

Medium-Style Page Transition

Oct 30, 2013 by Brian Gonzalez

page transition

Repeating Image Transition

Apr 28, 2025 by Manoela Ilic

grid GSAP page transition repetition

Thumbnail to Full Width Image Animation

Aug 19, 2020 by Manoela Ilic

grid hover locomotive scroll page transition scroll

A Collection of Page Transitions

May 7, 2013 by Manoela Ilic

3D page transition

Collapsing Logo Effect

Jun 5, 2018 by Manoela Ilic

page transition

Gallery to Overlay Transition

Dec 23, 2024 by Osmo

GSAP page transition

Some Ideas for Fullscreen Image Slideshow Animations

Sep 27, 2023 by Manoela Ilic

GSAP page transition slideshow

Animated Image Columns

May 16, 2019 by Manoela Ilic

grid hover menu page transition typography

Slideshows

Vertical Showcase Slider with jQuery and CSS Transitions

Vertical Showcase Slider with jQuery and CSS Transitions

Oct 1, 2012 by Manoela Ilic

slider slideshow

Animated Fragment Slideshow

Feb 21, 2018 by Luis Goncalves

canvas slideshow

Color Extraction Effect

Jun 4, 2015 by Manoela Ilic

color filter slideshow svg

Playful Trampoline Effect

Mar 4, 2015 by Manoela Ilic

draggable elastic slideshow stack svg

Some Ideas for Fullscreen Image Slideshow Animations

Sep 27, 2023 by Manoela Ilic

GSAP page transition slideshow

Creative WebGL Image Transitions

Nov 5, 2019 by Yuri Artiukh

distortion page transition slideshow Three.js WebGL

Flip Caterpillar With Controls

Sep 7, 2024 by GSAP

Crossroads Slideshow

Apr 3, 2019 by Manoela Ilic

page transition slider slideshow

Typography

Animated Verbs II

Sep 2, 2019 by Ryan Mulligan

Some More On-Scroll Typography Animations

Feb 22, 2023 by Manoela Ilic

GSAP scroll typography

Three.js Runic Alphabet

Apr 16, 2024 by Anton Bobrov

particles Three.js typography WebGL

Repetitive Typography Animation

Oct 20, 2021 by Manoela Ilic

intro loading repetition typography

Hover Animations for Terminal-like Typography

Jun 19, 2024 by Manoela Ilic

hover typography

Interactive Text Destruction with Three.js, WebGPU, and TSL

Jul 22, 2025 by Lolo Armdz

Three.js TSL typography WebGL webgpu

Gradient Mask Hover Effect from Evervault

May 17, 2023 by Manoela Ilic

css-mask hover typography

Decorative Letter Animations

Jan 10, 2018 by Manoela Ilic

slideshow svg typography

GSAP Course

Ready to take your GSAP skills to the next level?

Learn "must know" features of GSAP3 that will open your eyes to new ways of creating and controlling your animations. Use "cdrps" for 20% off!

Hover Interactions

IconHoverEffects

Simple Icon Hover Effects

May 30, 2013 by Manoela Ilic

Gradient Mask Hover Effect from Evervault

May 17, 2023 by Manoela Ilic

css-mask hover typography

Organic SVG Shape Morph Ideas

Sep 19, 2017 by Manoela Ilic

hover morphing page transition svg

Organic Shape Animations with SVG clipPath

Jun 28, 2017 by Manoela Ilic

clip-path hover morphing shape

3D Perspective Glitch Hover Effect

Sep 7, 2022 by Manoela Ilic

glitch GSAP hover

How to Code a Crosshair Mouse Cursor with Distortion Hover Effect

May 26, 2021 by Manoela Ilic

crosshair cursor distortion hover menu svg

Grid Layout with Motion Hover Effect and Content Preview

May 23, 2018 by Manoela Ilic

grid hover page transition

How to Create Motion Hover Effects with Image Distortions using Three.js

Oct 21, 2019 by Niccolò Miranda

distortion glsl GSAP hover Motion Trail Three.js WebGL

Cursor Fun

Show cursor image on hover

Jul 3, 2025 by GSAP

cursor GSAP hover

Canvas cursor

Dec 14, 2017 by Jesper Landberg

GSAP Cursor Trailer Effect

Aug 31, 2025 by Nemanja Kočović

cursor GSAP Motion Trail

Animated Custom Cursor Effects

Mar 24, 2020 by Manoela Ilic

cursor distortion filter hover svg

Custom Cursor Effects

Jan 31, 2019 by Stefan Kaltenegger

cursor GSAP hover

Pixi Sprite Bubbles

Aug 20, 2019 by Juan Fuentes

bubble cursor draggable pixi.js

Sketch 017: Custom Cursor (stroke circle with filter effect)

Apr 10, 2022 by Manoela Ilic

cursor distortion filter svg

Ideas for Image Motion Trail Animations

Oct 18, 2023 by Manoela Ilic

clip-path cursor GSAP Motion Trail

Creative

Hub

Discover more

3D214 ASCII4 astro4 audio27 blender4 blur8 book4 button44 calendar3 canvas46 carousel12 checkbox8 christmas5 circular9 clip-path29 clock4 cloth4 CSS Only32 cursor50 distortion52 Dithering5 draggable53 dropdown10 elastic21 exploding2 filter51 fire4 flip14 fluid20 form26 Framer Motion2 game20 generative art4 glass10 glitch7 glsl74 gooey9 grid137 GSAP190 halloween2 haxe6 hover141 infinite29 input16 instrument2 intro14 line9 link18 loading9 locomotive scroll10 magnetic6 marquee3 mask4 menu109 metaballs3 modal11 morphing37 Motion Trail25 navigation49 noise5 OGL9 overlay22 page transition126 parallax20 particles36 perlin-noise5 physics21 pixi.js4 postprocessing15 preloader15 progress9 rain4 react18 React Three Fiber37 reflection9 refraction5 repetition19 retro6 scroll170 search7 shape11 shopping cart10 slider29 slideshow116 sphere3 stack29 svg177 tabs9 Three.js255 tooltip11 TSL26 tunnel5 typography110 video8 video transition1 visualizer9 warp6 water14 web audio api7 WebGL312 webgpu29 zoom6