Scroll Animations

We are thrilled to introduce our new feature in Framer: Scroll Animations! It's all about bringing the magic of Framer motion to the Framer app that enables you to do a lot more. Let's delve into the intricacies of this exciting feature.

Understanding how Scroll Animations Work

The first thing you'll notice in the demo project is a top bar attached to the viewport's top. Then, there is a header covering the entire viewport's height, followed by a few sections each with its unique name. The names are reflected in the layers panel, making them easy to identify.

While previewing, you observe that the top bar is fixed on the screen, accompanied by a header that takes up the full viewport height. Often, for landing pages, you might want to animate your navigation when scrolling fast or within a specific section.

Developing an Appealing Top Bar

Creating an appealing top bar can enhance the user interaction with the webpage. Having variants for different sections would facilitate changing the bar's color as per the section's theme. With Framer, you can not only maintain their visibility through your webpage but also exhibit stunning top bar transitions as users navigate from one section to another.

You start by setting the 'Appear Animation' for the top bar by choosing 'section in view' as the triggering point. It triggers the animation as you scroll past a specific section. Also, the top bar's visibility adjusts as you scroll down, courtesy of the replay property. The top bar would continue to stay in view on and post the banner.

Optimizing the Top Bar Variants

With the toolbar variants, you can make it more engaging by using the scroll variant. It enables you to select a variant to animate within specific sections. You can adjust the variant color that suits the theme of your current scrolling section. An added advantage is crafting a little sequence for your top bar. It starts with a light variant, switches to yellow as you scroll past the bundle section, and moves to the dark variant as you scroll beyond the bundle section towards the spec section.

Creating this fully functional sequence using scroll animations and scroll variants makes web designing much more fun. And these features are fully compatible with smooth scrolling. By adding links to each section using the 'smooth scroll' setting, your webpage would not only look pleasing but also provide a smooth navigation experience.

Accommodating a Scroll Animation for Videos

Scroll animations are not just limited to text and images. You could effectively use them in videos as well. For instance, you have a video component with two variants - one with a paused video and another with the video playing. You might want to engage your viewer by playing the video when he/she scrolls to the video section.

By adding a scroll variant effect to the feature video, you enable the video to play as the user scrolls onto that section. As soon as the 'video' section enters the viewport, the video starts playing. And when the 'video' section scrolls out of view, the video goes back to the paused state. This flawless video play-pause on scrolling is so seamless to include thanks to Framer.