Feature: Sync backdrop animation with sheet

[varseb]

Hi! First of all, great library! I'm using it in different projects.

Currently, when a sheet opens or closes, the backdrop uses its own independent animation that is out of sync with the sheet animation.

The backdrop has a fixed transition of duration: 1 while the sheet uses tweenConfig with a default duration: 0.2, this creates a noticeable desync.

Desired behavior

The sheet animation should control the backdrop animation.

• The backdrop opacity should be derived directly from the sheet's position (y)
• On open: the backdrop should appear in sync with the sheet movement
• On close: the backdrop should fade out in sync with the sheet closing
• During drag: the backdrop opacity should follow the finger position in real time

Technical context

• Current backdrop: uses initial/animate/exit with transition: { duration: 1 } independent animation
• Sheet: uses y (MotionValue) to control position, the context already exposes y to children
• Proposed solution: use useTransform to derive backdrop opacity from y, with the formula opacity = 1 - (y / closedY). This would require exposing closedY in the context.

Benefits

• Coherent and smooth animation
• Better user experience
• Backdrop automatically respects the sheet's tweenConfig and prefersReducedMotion
• During drag, immediate and synced visual feedback

[Temzasse]

Hey @varseb 👋

This is a great idea 👍

One question tho: how should this behave with snap points? Should the backdrop animate to the final opacity value based on first snap point or the last one? It could be argued that the sheet is already "open" when it's at the first snap point so I'm not sure what the default behavior should be 🤔

[varseb]

Hello @Temzasse

That's a good point

For the opening, I think the most important thing is that the timing matches (the backdrop reaches its final opacity at the same moment the sheet finishes the opening animation)

For the closing, the same, the backdrop disappears at the same moment the sheet completes the closing animation.

During the drag, it is more complex when there are snap points, the default could be the first snap point as you mentioned, but IMO it should be configurable.

In your example example-apple-maps I would use [0, 0, 1], the backdrop animates from point 2 to point 3.

Plus: If the backdrop has opacity 0, add pointer-events: none; so the content behind remains interactive.

[Temzasse]

@varseb I've implemented the backdrop animation sync with the sheet drag position in v5.6.0. Please give it a try 😊

[varseb]

Good work on this feature, the behavior feels great and the implementation is really clean, thanks for shipping it so quickly.

I did run into a small intermittent backdrop flicker on open (first frame sometimes flashes before opacity ramps up), so I opened a tiny fix PR #237

Please take a look when you have a moment, thanks!