Scroll Fade Hero

Fade and lift a hero section as the page scrolls, with configurable threshold and easing.

scrollherofadeanimation

By Kaiborg · Verified author

D/01//Description

A drop-in override for hero sections. As the user scrolls past a configurable threshold, the section gently fades out and translates upward, creating a parallax-adjacent feel without committing to a full parallax library. Threshold, distance, and easing are all override props. Works on any Framer frame. No dependencies beyond framer-motion (which ships with Framer).

P/02//Source preview · locked

import type { ComponentType } from "react"
import { useScroll, useTransform } from "framer-motion"

export function withScrollFade(Component): ComponentType {
  return (props) => {
    const { scrollY } = useScroll()

// … purchase to unlock the full source

Source locked

R/03//Related · same category

OVERRIDESnap Scroll

Snap Scroll

$15

Vertical section-snap scroll for landing pages. Configurable bounce + arrow nav.

scrollsnapsections

By Kaiborg