Beautiful Scroll Effects

GSAP - SVG Clip Path

Amazing scroll effect using GSAP and SVG clip paths.

// First star
var svg1TL = gsap.timeline({scrollTrigger: {
  trigger: "#clip1 .clip__inner",
  scrub: 2,
  pin: true,
  pinSpacing: false,
  invalidateOnRefresh: true
}})

svg1TL.fromTo("#svg1 video, #svg1 img", {y: "30%"}, {y: 0}, 0)
svg1TL.to("#svg__star", {morphSVG: {shape: "#svg__rec", origin: "50% 50%"}, ease: "none"}, 0);
svg1TL.fromTo("#svg1", {width: () => {if(window.innerWidth < 600) {return 70} else {return 200}}}, {width: () => {if(window.innerWidth < window.innerHeight){return "100vh"} else {return "100vw"}}, ease: "none"}, 0);

Demo and Code

CSS Scroll-Snapping

Beautiful scroll-snapping effect using only CSS.

.section {
  /* Creating a snapping rule on the section element */
  scroll-snap-align: start;
  scroll-snap-stop: always;

  /* Attach the timeline to the section element*/
  view-timeline: --section;

  /* Set each section to the full dynamic height of the viewport */
  height: 100dvh;
}

Demo and Code

CSS-Only Stacking Cards

Stacking card effect created with only CSS.

.card {
  position: sticky;
  top: 10vh;
  height: var(--card-height);
  padding-top: calc(var(--index) * var(--card-top-offset));
  perspective: 1000px; /* 3D context */
}

.card__content {
  box-sizing: border-box;
  padding: 50px;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background: #1c1c1c;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;

  /* Transform config */
  transform-origin: 50% 0%;
  will-change: transform, filter;
  transform-style: preserve-3d;

  /* Animate based on viewport visibility */
  animation: scale-card linear forwards;
  animation-timeline: view();
  animation-range: exit-crossing 0% exit-crossing 100%;
}

Demo and Code