Add a scroll-fade hero to your Framer site (free override)

Scroll-linked animations are one of the most-asked-for Framer effects, and the easiest hook is a hero section that gently fades and lifts as the user scrolls down. Subtle, fast to ship, and reads as "this site cares about the details."

In this short tutorial, we'll build a scroll-fade-hero override from scratch, then point you at a free production-ready version with extra polish (configurable threshold, easing, distance).

The effect

When the page loads, the hero section sits at full opacity. As the user scrolls past ~400px, the section's opacity drops to 0 and it translates upward 80px. By the time they're a screen-and-a-half down, it's gone — replaced by whatever the next section is.

It's a 4-line effect once you know the trick. The trick is useScroll + useTransform from framer-motion (which ships with Framer, no extra install).

The override

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

export function withScrollFade(Component): ComponentType {
  return (props) => {
    const { scrollY } = useScroll()
    const opacity = useTransform(scrollY, [0, 400], [1, 0])
    const y = useTransform(scrollY, [0, 400], [0, -80])

    return <Component {...props} style={{ ...props.style, opacity, y }} />
  }
}

A few things going on:

• useScroll gives you a motion value that tracks how far the page has scrolled. scrollY updates on every scroll event without re-rendering the component.
• useTransform maps that motion value into another range. We map scroll position [0, 400px] to opacity [1, 0] — fully visible at the top, fully faded by 400px.
• The second useTransform does the same for vertical translation — [0, 400px] scroll maps to [0, -80px] Y position. Negative = upward.
• We spread props.style first so any base styles from the frame still apply, then layer our motion values on top.

That's it. Drop it into a code overrides file in Framer, apply it to your hero frame, scroll.

Why this version is the bare minimum

Production hero animations usually want:

• A configurable threshold (some sections want to start fading at 200px, others at 600px)
• Easing (linear opacity transitions feel cheap; ease-out reads as intentional)
• Distance + direction options (some heroes lift up, some drift down)

The marketplace version of this override has all three as props you can tweak from Framer's right sidebar, no code edits required. It's free — claim it and skip the boilerplate:

How to actually install it in Framer

If you haven't applied an override before, we wrote a step-by-step install guide that walks through the Code Overrides panel, common gotchas, and how to verify it's working.

When the AI is faster

Writing this override from scratch took us 4 lines. But what about the next variation you need — fade + scale instead of fade + lift? Reverse direction? Trigger on a different element?

The Forge writes overrides from plain-English prompts. "Fade and scale my hero as the user scrolls past 300px" gets you the code in a few seconds, ready to paste. Faster than searching Stack Overflow for the right combination of useScroll + useTransform args.