Codrops

PageTransitions

A showcase collection of various page transition effects using CSS animations.

SidebarTransitions

Some inspiration for transition effects for off-canvas navigations.

Animocons

Animated icons powered by the motion graphics library mo.js by Oleg Solomka. Inspiration comes from the Dribbble shot ["Like Animation"](https://dribbble.com/shots/2527200-Like-Animation) by Daryl Ginn.

ParticleEffectsButtons

A little library that can be used for bursting particles effects on buttons and other elements

SlideshowAnimations

A collection of ideas for slideshow animations.

codrops-sketches

A collection of demo variations, ideas, concepts & experiments.

GooeyTextHoverEffect

A gooey text hover effect using SVG filters

LineTextHoverAnimations

Some hover animations for a terminal-like look

CodropsTemplate

Codrops demo template. Wiki 👉

ScrollBlurTypography

Animations for revealing blurry text on scroll.

StickySections

Some ideas of how sticky sections can be animated while exiting the viewport.

KineticTypePageTransition

A concept for a kinetic typography based page transition.

astro-shop-view-transitions

Minimalist Shop with Browser View Transitions API and Astro for a smoother navigation experience.

OnScrollLayoutFormations

Layout formations on scroll using GSAP

3DStackMotion

An experimental 3D card stack animation on scroll.

OnScrollTextHighlight

Some scroll-based effects for text highlights

Staggered3DGridAnimations

A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.

IntroGridMotionTransition

A little hover motion effect on a grid and an intro animation.

OneElementScroll

A simple concept of animating one element across different waypoints on scroll using GSAP Flip and ScrollTrigger.

ContextAwareLogoAnimationScroll

Exploring how fixed elements can hide and reveal based on scroll interactions with playful, context-aware animations.

OnScrollSVGFilterText

A small set of scroll-based SVG filter animations on HTML text.

ImageExpansionTypography

An expanding image animation inside of a typographic block.

3DCarousel

An on-scroll 3D carousel

HoverGrid

A grid item reveal animation on hover inspired by Metalab

PushGridItems

Animations for grid items based on a concept by Rémi Clauss.

ElasticGridScroll

A scroll effect where each column of a grid moves at a slightly different speed, creating a soft, elastic feel as you scroll.

ReflectionScroll

An decorative reflection effect where we simulate a reflected page and scroll it along with the content.

RepeatingImageTransition

BalloonButton

coding-challenge-planner

Daily Frontend Coding Challenge Planner built with Bolt.new