Smooth and Sticky Scrolling

Sticky positioning

To make a sticky header, select it and head over the properties panel where you’ll find the Sticky property. Here you’ll see four position properties to customize its distance from top, bottom, left, and right. These properties represent the position of the sticky element relative to its parent layer.

Sticky will only work if all parent layers have overflow set to visible, which may cause issues on mobile. Specifically, an overflowing element in the web page (like the one pictured below) can cause the site to be scrollable horizontally on a mobile device, leading to unwanted results. To prevent this from happening, make sure to double check for overflowing elements in your page and, if necessary, wrap them in a parent layer and set its overflow property to hidden.

Smooth scrolling

You can select any Layer and head over to the Scroll Section property to give it a unique name. Then, we can create new links that point to the same page, and then we’re presented with the Section property, allowing us to pick from all targets that exist on the same page. Finally, we can set Scroll to Smooth. The video below also covers how to work with components and how to mix in Scroll Speed effects to create parallax effects. If you’re interested in playing around with these features, feel free to remix my demo project here.