The Scrolling Area component
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.
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.