Description

With the Scroll Collection you can place a large canvas behind a small window (aka "viewport"). Put any combination of assets and collections in your canvas and then, at runtime, scroll the canvas in any direction behind the viewport, revealing different parts of the canvas through that viewport.

A variety of engaging visual effects can be achieved through use of the Scroll Collection including the parallax effect and a scrolling webpage effect. The sample experience Scroll Collection - Examples illustrates these effects and more in action.

How It Works

Adding elements to the Scroll Collection

In Composer's Edit Mode, using either the Collections panel or the right-click menu of the active scene, place a Scroll Collection into your experience. The box you see is the viewport. At the moment, the canvas behind the viewport is identical in size.

With the Scroll Collection selected, place assets and/or collections into the Scroll Collection by either drag-and-dropping them from the Content Library, drag-and-dropping them from other parts of the active scene by selecting items in the Assets or Collections panel. By adding content or by double-clicking the Scroll Collection, you enter the canvas editing mode, creating the look you see below. (Note diagonal lines outside the Scroll Collection.)

To enlarge the canvas, drag any item in the Scroll Collection canvas outside the edges of the viewport. Note the scrollbar on the right of the image below. This scrollbar indicates that there is content above/below the top/bottom edge of the viewport. Of course, you could drag any canvas content in any direction beyond the edges of the viewport.

The upper left-hand corner of the viewport is considered the "offset origin". The position of every item in the canvas is relative to the offset origin. For example, an item below and to the left of the offset origin has a center point with a negative X coordinate and a positive Y coordinate.

While editing the canvas you can drag it in any direction using your mouse. When you do so, the offset origin moves with the canvas (i.e. remains over its original canvas position) and thus is no longer associated with the upper left-hand corner of the viewport. This is done to ensure offset values remain unchanged when the canvas is scrolled.

Item offset vs. canvas offset

Each item in the Scroll Collection's canvas has an offset value relative to the offset origin. As noted above, the offset origin remains fixed over a particular point on the canvas so no mater how the canvas is scrolled, the offset an item in the canvas remains unchanged. This offset is represented by an X,Y coordinate: X for the number of pixels from the offset origin on the X axis, and Y for the number of pixels from the offset origin on the Y axis.

The canvas itself has an offset on the horizontal and vertical axes, and their values refer to how far the canvas is from aligning one of its edges with the viewport. This offset can be measure in pixels or percentage.

• If measured in pixels: Number of pixels from an edge of the canvas to an edge of the viewport.
  • Horizontal offset
    • If the left edge of the canvas and the left edge of the viewport are aligned, the "Horizontal offset" is 0 pixels.
    • If the right edge of the canvas aligns with the right edge of the viewport, the "Horizontal offset" is the number of pixels separating the left edge of the canvas from the left edge of the viewport.
  • Vertical offset
    • If the top edge of the canvas and the top edge of the viewport are aligned, the "Vertical offset" is 0 pixels.
    • If the bottom edge of the canvas aligns with the bottom edge of the viewport, the "Vertical offset" is the number of pixels through which the canvas has been moved from top edge alignment.
• If measured in percentage: Percentage of total possible offset from the canvas edge to the view port edge
  • Horizontal offset
    • If the left edge of the canvas and the left edge of the viewport are aligned, the "Horizontal offset" is 0%.
    • If the right edge of the canvas aligns with the right edge of the viewport, the "Horizontal offset" is 100%.
  • Vertical offset
    • If the top edge of canvas and the top edge of the viewport are aligned, the "Vertical offset" is 0 pixels.
    • If the bottom edge of the canvas aligns with the bottom edge of the viewport, the "Vertical offset" is 100%.

No actual scrolling limits

As long as your assets are into your Scrolling Collection, there are not real limits to the scrolling itself.

You can set an Asset X axis above 20000 (39900 in this example) by entering the X value manually.

Then to access any Assets located beyond the canvas (over 20000) you just need to adjust the Canvas, Horizontal/Vertical offset in the Scrolling Collection Viewport property.

Properties, Triggers & Actions

Properties

Triggers

Actions

Usage Sample

Download the sample experience Scroll Collection - Examples to see the Scroll Collection in action.

 

Limitations

• Binding the scroll offset to the position of one of the items nested inside the scroll collection generates an infinite loop since the collection constantly tries to re-compute its size to accommodate the new layout. To avoid this, you can limit the Binding value using a Linear Converter.
• Show/Hide actions targeting asset out of visible area will bring them into focus