thisis the parent layer that scriolls

Yes. Looking at your screenshot, I can see the likely problem.

The Scroll Section name is currently on the text layer itself — the selected layer is the paragraph (Tag: p, content starts “Our name, Shokun…”). That is not the layer you want to use as the section driver.

Do this:

• Select the parent container that actually moves through the page — probably Brand Statement or Editorial Content in your layer stack.

• Put Scroll Section → Name: fadecontent on that parent.

• Then select the text layer you want to fade.

• On that text layer:

  • Scroll Transform → Trigger: Section in View

  • Section → fadecontent

  • From → Opacity 30% (or 0% for testing)

  • To → Opacity 100%

The important distinction is:

Parent/scrolling container = Scroll Section
Child/text = Scroll Transform

Right now you effectively have the text watching itself, and because its own range is relatively small, Framer can sit at the From state or move through the range in a way that looks like nothing is happening. Section in View is specifically meant to let one section drive transforms on other layers.

Also, in the panel you showed, the three little icons next to Viewport matter. They determine whether Framer measures the section against the top / center / bottom of the viewport. Start with the center option you currently have selected.

So I would move #fadecontent up one or two levels in your Layers panel. From your screenshot, I’d try putting it on Brand Statement first.

Yes — you already did. I misread the first screenshot.

Your setup is actually:

• Parent Editorial Content = Scroll Section #overlay

• Text layer = Scroll Transform

• Trigger = Section in View

• Section = #overlay

That part is correct.

The next thing I’d test is the Viewport setting in the Scroll Transform. Right now you have the middle viewport position selected. Change it to the bottom viewport position and preview again. Section in View maps the transform based on the named section crossing that chosen viewport reference point.

Also, your parent has Overflow: Clip, which is fine. Framer specifically recommends Clip because it does not interfere with scroll-based effects the way overflow: hidden can.

So I would do exactly this next:

Viewport → bottom icon
From → Opacity 0%
To → Opacity 100%
Transition → none

Then test in Preview.

If that still stays at 0, the next thing I want to inspect is what you have inside the From Effect and To Effect panels themselves, because the section wiring in your screenshots looks right.

Good. That tells us the transform itself is not firing, so I would stop changing the section/opacity settings for the moment.

Do one clean diagnostic:

1. On that text layer, change Trigger from Section in View to On Scroll.

2. Set:

   • From → Offset X = -300

   • To → Offset X = 0

3. Test it in Preview, not on the Framer canvas.

Framer says On Scroll maps the transform directly to overall page scroll, so it removes your #overlay section from the equation entirely.

If it moves with On Scroll

Then we know your Scroll Transform works and the problem is specifically the Section in View / #overlay connection. We can fix that next.

If it STILL doesn't move

Then this is not a setup problem. Check:

Site Settings → General → Accessibility / motion settings.

Framer has a setting that can disable transform/movement animations, and device Reduced Motion / Low Power Mode can also affect effects.

This one test will tell us which direction to go. Try On Scroll and tell me whether the text moves.

nope it doesnto move in fact it doesn't start at -300

Ah — that detail changes it.

The From = -300 will not move the text on the Framer design canvas. The canvas continues to show the layer at its normal/base position. Scroll Transform states are evaluated when the site is actually running.

So test it like this:

1. Leave the text's normal position at 0.

2. Scroll Transform:

   • From: X -300, opacity 0.3

   • To: X 0, opacity 1

3. Click Preview / Play in Framer (⌘P).

4. In the actual Preview window, go to the top and scroll.

If in Preview it still never starts at -300 and never moves, then check Site Settings → General → Accessibility → “Disable movement animations and custom cursors.” Make sure that is off. Framer specifically says this setting, combined with the device/browser's Reduced Motion preference, suppresses transform animations.

Your screenshots are showing the editor canvas, so not seeing -300 there is normal. The key question is: does it move in the separate Preview window?

it's off

Then the Framer accessibility toggle is not the issue.

And because even On Scroll + X: −300 → 0 produces absolutely nothing, I would stop touching your current layer. Your opacity setup is fine. We need to determine whether Framer is ignoring scroll transforms globally or only on that text/container.

Do this 30-second isolation test:

1. Drop a brand-new Frame directly onto the page, outside Editorial Content.

2. Make it something obvious, like 200 × 200.

3. Add Effects → Scroll Transform.

4. Trigger: On Scroll

5. From:

   • X = −300

   • Scale = .5

   • Opacity = .2

6. To:

   • X = 300

   • Scale = 1

   • Opacity = 1

7. Publish the site and test the published URL, rather than only Preview.

Framer's current troubleshooting guide actually recommends publishing when verifying whether effects are working.

What this tells us

If the new square animates, then your original Editorial Content hierarchy is preventing the effect from being applied. We can isolate exactly which parent is doing it.

If the new square does not animate either, this is project/browser-level. At that point check Low Power Mode on the Mac, because Framer explicitly says it can prevent animations from working.

But don't rebuild your fade yet. Your 0.3 → 1 Scroll Transform is valid.

Try the loose square outside the stack. That one result will tell us where the problem actually is.

even I placea

1Password menu is available. Press down arrow to select.