Getting Started with Supra:

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.

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.