Smooth Scrolling Links with Scroll Targets

We're diving deep into how to set up smooth scrolling websites in Framer. We'll leverage scroll targets to animate to page-specific sections, with a kiss of Parallax for extra flair.

Creating Your Basic Setup

The demo project starts with a stack page containing three sections, each with filling width and a height set to 100 VH. This setting allows your sections to occupy the full height of the viewport. It also includes a sidebar pinned to your screen's bottom-left corner with a fixed position.

Linking to Specific Sections

The essence of smooth scrolling revolves around linking text items to corresponding sections. By selecting a text item, you head into the link section where you'll specify your home page. But before you carry on any further, you need to assign scroll targets to your sections. These are unique identifiers you can assign to any layer on your web page. For instance, our first section's scroll target might be named 'Horizon'.

Once you do this and return to your link, you'll find a new property named 'Target', allowing you to select assigned scroll targets. By connecting each of your sidebar's text items with the respective scroll targets, you get a page smoothly scrolling to each section as desired.

Working with Component Links

But, what if your links are part of components? Let's use our simple item component as an example. On hover, this component animates to the right, adjusting the left padding to 10 pixels and the opacity from 0.6 to 1.

When you replace text layers with components and add links as usual, all links point to a single section. This happens because of the absolute path defined for each item within the component. Instead, you need to create variables for link properties to allow overrides and definitions from outside the component. With variables in place, each component can now be set to point to its unique scroll target.

Adding Scroll Speed Effects for a Parallax Impact

The cherry on top of your smooth scrolling design is the parallax-like effect you can achieve with scroll speed effects. With images contained within each section, you can add a scroll speed effect for a cascading effect. For instance, setting speed to 50% on an image and adjusting the position to scroll lets you control cropping for the images to enhance the visuals. Play around with these values to get your desired effect.

Finally, let's give it a spin. When you publish and preview your design, the scroll speed addition generates a cascading effect, delivering a parallax-like feel to your website. Of course, you can fine-tune this to align perfectly with your preference.