Framer Update: Viewport Height Units

Summary

In this video, Benjamin introduces Framer's new viewport height feature, enhancing design flexibility for expressive landing pages. By using viewport units, designers can ensure sections fill the browser's viewable area consistently, regardless of screen size. The feature also allows pinning layers relative to the viewport and creating scrolling effects. Combining with scroll target links adds a card slide effect, enhancing user experience. Stay tuned for more updates.

Takeaways

• 🎥 Benjamin introduces a new feature in Framer: viewport height support.
• 🖥️ Viewport height units allow for more expressive landing pages by adapting to browser size.
• 🔄 Fixed height values do not control which section is in view, depending on the browser size.
• 🌐 Setting height to viewport (100vh) ensures sections occupy the full viewport height.
• 🔄 Benjamin demonstrates resizing sections with viewport height units for a consistent experience.
• 📏 Framer allows pinning or positioning layers relative to the viewport with fixed type.
• 🔄 Viewport height adapts when resizing the canvas, simulating real browser behavior.
• 🎨 Combining viewport height with position properties creates cool scrolling effects.
• 🔗 Scroll target links can be combined with viewport height for smooth scrolling experiences.
• 🔄 Benjamin shows how to link to different sections of the page for a card slide effect.

Q & A

What is the main topic of Benjamin's video?

The main topic of Benjamin's video is the introduction of viewport height support in Framer, a new feature that allows for the use of viewport height units in designs.

Why is viewport height support useful for landing pages?

Viewport height support is useful for landing pages because it allows for more expressive designs that can adapt to different screen sizes, ensuring that key content is always visible and engaging to the user.

How does using viewport height units differ from using fixed height values?

Using viewport height units allows for a design that adapts to the size of the browser window, ensuring that sections of the page occupy a consistent portion of the viewport regardless of the device. Fixed height values do not adapt and can result in content being cut off or appearing differently on various screen sizes.

What is the default value for viewport height in Framer?

The default value for viewport height in Framer is 100vh, which means it occupies the entirety of the viewport height.

How can viewport height be adjusted in Framer?

In Framer, you can adjust the viewport height by setting it to a percentage of the viewport height (e.g., 50vh for half the viewport height) or by using the default value of 100vh.

What is the benefit of pinning or positioning layers relative to the viewport in Framer?

Pinning or positioning layers relative to the viewport allows for more precise control over the layout and positioning of elements on the canvas, making it easier to create designs that adapt smoothly to different screen sizes and orientations.

How does the 'sticky' position property affect the scrolling experience in Framer?

The 'sticky' position property in Framer causes sections to remain at the top of the viewport as you scroll, creating a sticky effect that can enhance the user experience by keeping important information or navigation elements visible.

What is the purpose of the 'scroll set to smooth' feature when linking to sections of a page?

The 'scroll set to smooth' feature provides a smoother scrolling experience when navigating to different sections of a page, creating a more visually appealing and user-friendly interaction.

How can scroll target links be combined with viewport height units in Framer?

Scroll target links can be combined with viewport height units to create a seamless and interactive experience where clicking a link smoothly scrolls to a specific section of the page, each of which may be designed to take up a full viewport height.

What other Framer features can be combined with viewport height to create new use cases?

Other Framer features like animations, transitions, and interactive elements can be combined with viewport height to create unique and engaging user experiences that are responsive and adaptive to different devices and viewport sizes.

What does Benjamin suggest as the most common use case for viewport height in Framer?

Benjamin suggests that the most common use case for viewport height in Framer is setting it to 100vh, which makes each section of the design occupy the full height of the viewport.