Scroll Collection

Table of Contents

    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%.

    Properties, Triggers & Actions

    Properties

    See Common collection properties for details about the properties shared in common by all collection types

    Appearance

    Viewport

    • Offset Unit   specifies whether the canvas offset should me measured in pixels or percentage
    • Canvas, horizontal offset   distance the left edge of the canvas is from the left edge of the viewport
    • Canvas, vertical offset   distance the top edge of the canvas is from the top edge of the viewport

    Triggers

    See Triggers Overview to get the details about the triggers shared in common by all assets and collections

    General

    • Horizontal scroll is less than   Raised when the canvas is scrolled to a position whose horizontal offset is less than a specified distance.
    • Horizontal scroll is more than   Raised when the canvas is scrolled to a position whose horizontal offset is more than a specified distance.
    • Is being scrolled   Raised when the canvas is being scrolled.
    • Scroll is completed   Raised when the canvas is no longer being scrolled.
    • Vertical scroll is less than   Raised when the canvas is scrolled to a position whose vertical offset is more than a specified distance.
    • Vertical scroll is less than   Raised when the canvas is scrolled to a position whose vertical offset is more than a specified distance.

    Canvas Boundary

    • Reaches bottom boundary   Raised when the bottom edge of the canvas aligns with the bottom edge of the viewport.
    • Reaches left boundary   Raised when the left edge of the canvas aligns with the left edge of the viewport.
    • Reaches right boundary   Raised when the right edge of the canvas aligns with the right edge of the viewport.
    • Reaches top boundary   Raised when the top edge of the canvas aligns with the top edge of the viewport.

    Actions

    See Actions Overview to get details about the actions shared in common by all assets and collections

    Canvas Boundary

    • Scroll to bottom boundary   Scrolls the canvas so its bottom edge aligns with the bottom edge of the viewport.
    • Scroll to left boundary   Scrolls the canvas so its left edge aligns with the left edge of the viewport.
    • Scroll to right boundary   Scrolls the canvas so its right edge aligns with the right edge of the viewport.
    • Scroll to top boundary   Scrolls the canvas so its top edge aligns with the top edge of the viewport.

    Canvas Content

    • Scroll by   Modify the existing canvas offset by the specified distance
    • Scroll to a point   Scroll the point represented by a specified offset to the upper left corner of the viewport.
    • Scroll to an item   Scroll the specified item in the canvas to the center of the viewport. Use the Name property of the item for identification.

    Usage Sample

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