Dynamic Viewports
Log In
Autopilot
Merged in a post:
Support for dynamic viewport units (dvh) for accurate mobile viewport behavior
S
Soyeb Ali
While building scroll-based interactions in Framer, I encountered a major limitation related to viewport height on mobile devices.
A common use case such as revealing a footer when it reaches the bottom of the viewport - works perfectly on desktop but breaks on mobile.
This happens because mobile browsers do not have a fixed viewport height. The browser UI (address/search bar) dynamically expands and collapses, meaning that 100vh does not represent the actual visible screen area.
As a result, elements relying on viewport-based triggers or positioning (like footers, sticky sections, or full-height layouts) behave inconsistently or fail entirely on mobile.
Problem:
- vh units do not reflect the true visible viewport on mobile
- Scroll triggers and animations become unreliable
- Layouts that depend on full viewport height break or require hacks
- No native way in Framer to account for dynamic viewport changes
Existing Solution (Web Standard):
- Modern CSS already solves this with dynamic viewport units:
dvh → Dynamic viewport height (actual visible screen)
svh → Small viewport height
lvh → Large viewport height
Among these, dvh is especially important for scroll-based interactions, as it adapts in real-time to browser UI changes.
Proposed Feature:
- Add support for dvh (and optionally svh / lvh) within Framer for advance user.
- Allow users to select dynamic viewport units in sizing and layout controls
- Ensure scroll triggers and viewport-based animations use the correct visible viewport on mobile
Use Cases:
- Reveal-on-scroll interactions (e.g., footer reaching viewport bottom)
- Sticky headers and pinned sections
- Full-screen hero sections
- Accurate scroll animation timing
- Mobile-first responsive layouts
Why This Matters:
This is not an edge case, it affects a wide range of real-world designs.
Without dynamic viewport support:
- Developers rely on workarounds (spacers, offsets, trial-and-error)
- Interactions feel inconsistent across devices
- Mobile UX suffers significantly
Supporting dvh would:
- Improve accuracy of scroll-based interactions
- Reduce hacks and manual adjustments
- Align Framer with modern CSS standards
- Enable more reliable mobile experiences
Current Workaround:
Users currently rely on:
- Spacer helper elements
- Framer overrides
- Trial-and-error adjustments
These approaches are unreliable and increase development time.
G
Garry Andreano
Yes please.