Not sure what a scrolling area is? Learn all about it here, but beware, it’s addictive! :-)
1. What's a Scrolling Area for?
The scrolling area is a key component in your app's design: it lets you create and display an area that’s larger than the one users actually see. Users simply have to “scroll” (horizontally or vertically) with their finger to access all contents.
Its most obvious purpose is to let users scroll through a long text. But the area can include all kinds of objects (text, image, components) of any size you want, to bring to life various effects, such as Parallax. However, you need to clearly grasp the notion of “object synchronization” for this effect (see Use synchronization).
2. Edit a Scrolling Area
To create a scrolling area, click on Components in the top menu. Double-click on the transparent zone or click on Edit scrolling area in the Properties window to edit its content.
The Properties window displays various options:
Edit scrolling area: to edit its content or create markers, i.e. define specific positions in your scrolling area to which you can link specific actions (also available by double-clicking on this component).
User interaction: this option allows users to activate all interactivities based on or in this component.
Scrolling: you can choose either a vertical or horizontal scrolling depending on your needs.
Options: you can choose to hide the scroll bar, activate user scrolling (to scroll the component), remove bounce when scrolling or add fast deceleration.
Content size: use this to define the size of the area containing content and adjust its width and height. The size of the visible area is defined in the toolbar.
Default position: use this to select the position displayed when loading the state (based on predefined markers). If you don’t define anything and go back to this state, it will remain at the last displayed position.
When you click on the Edit Scrolling Area button, you can edit markers.
Tip: Once you've created markers, you can select the snap option. It's signaled with a magnet. If you activate this option, you force your users to stop at this point and they won’t be able to scroll the entire area in one go. It allows you to structure your content, break it into chapters, so that your users better digest the information you're displaying.
You can set a default marker with the pin icon.
3. Create interactions based on scrolling
There are 2 ways to create interactions based on scrolling: using markers or synchronization.
- You can create markers at specific position of scrolling and trigger something (text or picture apparition for example).
- You can also synchronize your scrolling with another component (another scrolling area, gallery) so that you display something while scrolling.
Have a look also at the Multi-state component. To display an image for example, you can create a first empty state and a second state with image. Scrolling will make you go from state 1 to state 2: this is how you create animations :)