Essential course

Scenes

This course explores scenes and their different behaviour options. We'll also cover sticky scenes that enable you to keep content in view across the entire page.

What are scenes

Scenes are great to separate your page into different sections. Especially when you're using the 'fullscreen' type, you can make sure that viewers are only viewing a specific section (or scene) of your page, regardless of their screen size.

Scene behaviour

Via the 'Scenes' tab in the panel on the left side of the editor, you can find many different scene settings. Here you can also find the different ways in which scenes can be transitioned between:

  • Standard scrollpage
    This is the default behaviour, where you're naturally and seamlessly scrolling from one scene to another.
  • Transition effect
    This allows you to set up an animation that plays when navigating between the scenes of a page.
  • Direct transition
    The direct transition instantly switches between scenes. This option only allows viewers to navigate between scenes via click interactions.

Side note: scenes will always perform as the 'standard scrollpage' on mobile.

Sticky scenes

In the scenes panel, you can also find an option called 'first scene sticky on top'. This places the first scene on your page on top of all the others. This option is often used for menus and similar elements that need to be visible at all times.

Pro tip: don't forget to make your first scene transparent if you're using sticky scenes, in order for the rest of your content to show.

Build along with us

Want to build the complete example page in this essential course along with us? You can download all the course assets here:

Follow us

To get notified about new courses and tutorials