ValyroUI Русская версия

Twenty-four scroll effects

Twenty-four scroll effects for React: fade and slide reveals, parallax, a reading progress bar, sticky stacking cards, a horizontal scroll section, text that fills in — ScrollEffect on scroll-driven timelines, light variants for machines without a GPU. Seven presets are free in valyro-ui, seventeen more in Pro.

Enter on scroll

  • Fade in (fade-in) — A plain fade as it comes into view: text, quiet sections
  • Fade up (fade-up) — Rises a little as it fades in: the safe default for cards and blocks
  • Slide in (slide-in) — Comes in from the side the text starts on: lists, timelines
  • Scale in (scale-in) — Grows into place: figures, stats, call-to-action buttons
  • Blur in (blur-in, Pro) — Comes into focus out of a soft blur: photos, hero copy
  • Flip up (flip-up, Pro) — Swings up in 3D from its bottom edge: feature cards
  • Clip up (clip-up, Pro) — A mask rises over it from the bottom: images, headlines
  • Rotate in (rotate-in, Pro) — Dealt onto the page with a slight turn: testimonials, notes
  • Settle (settle, Pro) — Shrinks into place from slightly larger: covers, product shots

Follow the scroll

  • Progress bar (progress) — Fills with the scroll of its container: reading progress for articles and docs
  • Parallax (parallax) — Drifts against the scroll: pictures in a frame, backgrounds
  • Parallax layers (parallax-layers, Pro) — Each layer at its own depth: a hero scene with sky, hills and a headline
  • Image zoom (image-zoom, Pro) — The picture zooms out inside its frame as it passes
  • Stacking cards (stack, Pro) — Sticky cards that step back as the next one covers them: steps, plans, features
  • Horizontal scroll (horizontal, Pro) — The section pins and its track runs sideways: galleries, timelines, case studies
  • Text fill (text-fill, Pro) — The text fills in line by line as it is read: manifestos, pull quotes
  • Drift (drift, Pro) — A big headline slides sideways with the scroll
  • Tilt (tilt, Pro) — Leans back as it comes, flat in the middle, forward as it goes
  • Spin (spin, Pro) — Turns as it passes: badges, stickers, decorative shapes

Leave on scroll

  • Fade out (fade-out) — Fades as it scrolls out at the top: hints, hero copy
  • Lift out (lift-out, Pro) — Rises and fades on the way out
  • Recede (recede, Pro) — Shrinks away into the page as it leaves
  • Blur out (blur-out, Pro) — Softens into a blur as it leaves
  • Clip out (clip-out, Pro) — A mask closes over it from the bottom up

ScrollEffect