Demos by Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

← Back to all demos

elastic grid GSAP scroll

Elastic Grid Scroll: Creating Lag-Based Layout Animations with GSAP ScrollSmoother

5 days ago

3D carousel GSAP page transition

On-Scroll 3D Carousel

1 month ago

grid GSAP page transition repetition

Animating in Frames: Repeating Image Transition

1 month ago

hover typography

Hover Animations for Terminal-like Typography

12 months ago

clip-path GSAP hover typography

Coding the Sliced Image Hover Effect from Quai Network

2 years ago

css-mask hover typography

Recreating the Gradient Mask Hover Effect from Evervault

2 years ago

From our sponsor

Master JavaScript animation with GSAP—free access to 34 video lessons, projects, and hands-on demos for all levels.

Shuffling Typography Animation

2 years ago

Getting Creative with Infinite Loop Scrolling

2 years ago

Sketch 029: Infinite Loop Scrolling (3D Animation)

2 years ago

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

2 years ago

Sketch 027: Infinite Loop Scrolling (ScaleY and Opacity Animation)

2 years ago

Sketch 026: Infinite Loop Scrolling (Animation)

2 years ago

Sketch 025: Infinite Loop Scrolling (Horizontal)

2 years ago

From our sponsor

Learn to build web apps with Next.js, the world's most popular full-stack framework, in this course on Scrimba.

GSAP page transition

How to Create a Cover Page Transition

3 years ago

GSAP morphing scroll shape svg

How to Animate SVG Shapes on Scroll

3 years ago

intro page transition

Image Trail Animation for an Intro

3 years ago

page transition svg

Sketch 022: SVG Path Page Transition (Horizontal)

3 years ago

page transition svg

Sketch 021: SVG Path Page Transition (Vertical)

3 years ago

distortion filter svg

Sketch 020: Image Motion Effect with SVG Filter

3 years ago

distortion filter svg

Sketch 019: Image Motion Effect with SVG Filter

3 years ago

From our sponsor

Generate & deploy to Vercel with 1 click. Next.js 14, Typescript, TailwindCSS + Shadcn UI

cursor distortion filter svg

Sketch 018: Custom Cursor (two circles with filter and delays)

3 years ago

cursor distortion filter svg

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

3 years ago

cursor distortion filter svg

Sketch 016: Custom Cursor (filled circle with filter effect)

3 years ago

cursor filter Motion Trail svg

Sketch 015: Custom Cursor (multiple circles with filter effect)

3 years ago

cursor filter svg

Sketch 014: Custom Cursor (filter effect and delayed motion)

3 years ago

cursor filter svg

Sketch 013: Custom Cursor (two circles with filter effect)

3 years ago

Sketch 012: Custom Cursor (two circles, one filled)

3 years ago

From our sponsor

Codrops is hosted by Liquid Web — trusted dedicated servers built for speed and reliability. Get yours today.

Sketch 011: Custom Cursor (One Circle)

3 years ago

menu typography

Letter Shuffle Animation for a Menu

3 years ago

3D hover Motion Trail repetition stack

Sketch 010: Image Motion Trail (Perspective)

3 years ago

3D hover Motion Trail repetition stack

Sketch 009: Image Motion Trail (Perspective)

3 years ago

hover Motion Trail repetition stack

Sketch 008: Image Motion Trail (Circle)

3 years ago

hover Motion Trail repetition stack

Sketch 007: Image Motion Trail (Rotation)

3 years ago

hover Motion Trail repetition stack

Sketch 006: Image Motion Trail (Semi-transparent)

3 years ago

hover Motion Trail repetition stack

Sketch 005: Image Motion Trail (Opaque)

3 years ago

filter hover magnetic

Hover Preview Effect with Mini Map

3 years ago

1 2 3 … 9 Next »