Scroll Tile

The Scroll Tile allows you to create a Scroll Canvas on a microapp page, state or overlay. Scroll canvases can include its own hotspots, states, images and videos, just like normal microapp pages. It allows you to create content that stretches beyond the bounds of a microapp page, where your viewers engage with the tile dynamically by moving it horizontally or vertically. 

The scrolling canvas tile is a great way to display your information in an engaging and interactive way.

  1. How to create a Scrolling Canvas
  2. Scroll Settings Options
  3. Adding States to the Scroll Canvas
  4. How to configure the 'reset scroll position' feature in your scroll canvas

 

How To Create a Scrolling Canvas

Once you have placed a Scroll Tile on the page, you can add the background asset to it, and then add additional assets and other tiles onto the Scroll Canvas. 

  • In the design tool of your choice, create an asset that is a little longer (vertically or horizontally)  than your standard artboard
  • Once your assets are imported into Tiled, on the page where you want the scrolling tile to be, select the scroll tile and drag and drop it into place
  • Adjust the width and height to your preference
  • Select the asset you designed and drop it onto the top of the scroll tile
  • Use the left window to view the scrolling tile and click the ‘Edit Scroll Canvas’ at the bottom of that box to add any additional customizations

How To Customize Scrolling Canvas

Several of the tiles from the gallery can be added to a scrolling canvas just like a regular page asset.

  • Click on the Edit Scroll Canvas
  • Drag and drop the hotspot, video, gallery or Image tile of your choice
  • Size the tile accordingly
  • Use the flyout pop-up box to include any desired edits

⚠️ Important Note

In order for the Scroll Tile to import and perform as desired within the Builder, the original asset must be designed longer or wider than your standard artboard.

Navigate to the desired page of your microapp in the Microapp Builder. Drag a Scroll TileScroll_Icon.jpg ) from the Tiles panel to the desired location on the page, where you can resize it to your specifications or needs. 

Individually drag your asset from the Assets section of your Builder toolbar to the Scroll Tile or the outline section of your Gallery toolbar. The Scroll settings provide a window where you can view the entire Scroll Canvas. 

Scroll Settings Options

The Scroll Tile settings allow you to configure the following options for your Scroll Tile.

Scroll_Tile.jpg

Scrolling Direction Click the drop-down list and select the desired direction, Vertical or Horizontal, which you want your viewers to scroll the Scroll Tile.
Maintain Scroll Position Maintains the position on the scroll tile even after the viewer navigates to another state or page.

Editing the Scroll Canvas

To add additional assets or other Tiles to the Scroll Canvas, click the Edit Scroll Canvas link to open the Editing Scroll Canvas page. 

From the scroll canvas, you can add additional assets to the canvas, allowing you to create dynamic content within the scrolling content for any viewers. 

When finished, click the Back button. 

Adding States to the Scroll Canvas

From the Scroll Canvas, you can add States so viewers can scroll between states in the Scroll Tile for the specified microapp page. 

Click the Add State button at the bottom of the Scroll Canvas to add an additional state to the canvas. You can then edit it as a State. For more information, see Adding States to your Microapp Pages.

Scroll_Canvas.jpg

How to configure the 'reset scroll position' feature in your scroll canvas

The scroll tile is a great tool to enhance an end-user's experience when viewing a microapp. To improve their scrolling experience, we have introduced a feature to easily reset the scroll position using a hotspot. This feature allows microapp creators to help end-users instantly jump back to the beginning of the scroll with a single click. 

1. Add a scroll tile to the canvas

2. Add a background image to edit the scroll tile

Screen_Shot_2021-07-27_at_5.20.14_PM.png

3. Add a hotspot to the end of your scroll canvas

4. Select 'Reset scroll position' from the hotspot 'Target' dropdown

Screen_Shot_2021-07-27_at_5.24.49_PM.png

5. Publish your microapp

6. View your microapp and scroll down to the hotspot 

7. Click the hotspot
Note: You should experience an automatic scroll back to the beginning of the scroll. 

⚠️ Copy and Pasting Tiles in a Scroll Canvas

Since Scroll canvasses vary widely in size, copy and pasting tiles size across scroll tiles is not recommended.

Comments

0 comments

Please sign in to leave a comment.