Scrolling

The Scrolling Area component allows you to add a scrollable element: it can be an object (a paragraph, a scroll bar, a slider, an image) or even a page. In concrete terms, it is content that is not visible on the screen and for which you have to slide your finger or mouse vertically or horizontally to display it

In this article

If you want to make something scrolling, you need to add it into a Scrolling Area component. If you want your entire screen to be scrolling, you must make this component full screen. 

💡 If you want to create a scrolling list from dynamic content, insert a Collection List. component

Insert a Scrolling Area

To add a scroll area, click on Components and insert the Scrolling Area
Adjust the size of the visible area and double click on it to edit its content. Insert the objects you want to scroll: a text block, an image etc...
Go to the Properties to choose the type of scrolling: Horizontal or Vertical or both.

Size of the area

Depending on the type of scrolling (Horizontal or Vertical), choose the size of your scrolling. 
By clicking on the Adjust button, you define the size of the area according to the objects inside.  

Other properties

User scrolling: This option allows the user to scroll the scroll area with their finger or mouse. 
Scroll bar: you can choose whether or not to display a scroll bar. 
Bounce: You can enable or disable a bounce effect at the end of the scroll.
Fast deceleration: you can add a fast slowdown effect.

Create markers

Markers allow you to mark a position on your scrolling area and associate an action to it:
  • Display this position by default
  • Trigger an action from this position
  • Change the position 
To create a marker, enter the Scrolling Area component. You can create a marker visually by placing the zone at the right level and clicking on the + button or by clicking on the + button and manually editing the position.
Once you have created your markers, hover over each marker to bring up the settings, options and the Pin icon which allows you to set a default marker.
Magnetism allows you to impose a scroll stop at each marker

Add an action

Trigger an action from the Scrolling Area

Go to the Actions window and click on + Add.
Choose your trigger from the list:  
  • Positions [markers]
  • Tap / Click
  • Double tap / click
  • Touch down
  • Touch up
  • Swipe up/down/right/left
  • Mouse over/out
  • Start scrolling
  • End scrolling

Change position

To act on the scroll zone, you must have created markers. 
Select a trigger and the I nteract with a component > Scrolling Area 
You can choose from several actions: 
  • Change position
  • Next position
  • Previous position

Synchronize a Scrolling Area

Synchronization allows you to synchronize your Scrolling Area component with another component. To create a Parallax effect, you just have to create at least scrolling zones of different sizes and synchronize them. 

Here are the parameters to synchronize a scroll zone:

  • Positions in x
  • Positions in y
  • Markers

These parameters are accessible from the Properties window of the Synchronization component.

Still need help? Contact Us Contact Us