This article explains how we created the various implementations of the Scroll collection in the "Scroll Collection Demo" sample experience available here in our Marketplace. It will not explain how to edit the overall design.

Simple Scroll

This scene illustrates usage of the Scroll collection when limited to scrolling in a single axis. This implementation is very similar to what you see on modern scrolling websites. In this sample, the Scroll collection is filled with many different elements like images, texts, buttons and even an asset grid.

Some elements in the collection animate in parallel with the scrolling, such as the Pin-Up Woman image. To create this effect we added triggers linked to the Vertical scroll offset" property. For example when the "Vertical scroll offset" property exceeds a 12% threshold, we move the Pin-Up image to a different region of the screen.

We use the same approach for the three stacked screens: When the "Vertical scroll offset" property exceeds a 34% threshold, we displays the three images and move them down.

Parallax

To create a parallax effect using the Scroll collection, use one Scroll collection for each visual layer. In this example we used three Scroll collections, thus three layers.

The width of each layered Scroll collection must be different. The widest is placed in front, the shortest is placed in the back while, in the middle, each layer gets progressively narrower as you move towards the back. The farther back the layer, the "slower" their movement will appear and thus the shorter distance they will move.

The shorter Scroll collections must have their "Horizontal scroll offset" bound to the longest Scroll collection through the use of binding. A value converter is applied to the binding to reduce the magnitude of the offset for each of the narrower collections. The farther back the Scroll collection, the smaller the offset in relation to the widest.

When the widest Scroll collection - the collection in front - is scrolled, the smaller collections behind it will follow. Be sure the widest Scroll collection overlaps all of the other collections to ensure it captures all onscreen swipe gestures.

Panorama

This effect is simply achieved by placing a panoramic image within a Scroll collection. Consider this the most basic use case for the Scroll collection.

Scroll Effects

Opacity Scenario

In this first scenario, the "Opacity" property of each Text asset is bound to the value of the Scroll collections's "Vertical scroll offset" property. We use a linear converter to define how much the opacity must change in relation to the offset percentage. Note, no triggers are required. The "Opacity" property simply gets its value through conversion of the value of the "Vertical scroll offset" property. For example:

When the "Vertical scroll offset" percentage is 31% then the opacity will be 0. When the "Vertical scroll offset" percentage is 48%, the opacity will be 1 (meaning 100%). Why 31% and 48%? This is the offset range corresponding to when the particular Text asset comes into view.

Layers Scenario

In the burger stacking visual you can see that the different layers come together or separate depending upon the scroll direction and scroll distance. As with the opacity scenario above, we used property bindings combined with a linear converter. For each burger layer, we bound its Y coordinate to the "Vertical scroll offset" property of the Scroll collection. Then on this binding, we use a linear converter like so:

The above picture refers to the linear converter used for the value assigned to the Y property of the top burger image, “Burger-1”. When the "Vertical scroll offset" is 50%, the Y coordinate of the burger image is set to 2589; when the "Vertical scroll offset" is 73%, the Y coordinate of the image is set to 2852. We have also checked the two "Limit" checkboxes to ensure the value assigned to the Y coordinate will not go below 2589 or above 2852.

"Come Together" Scenario

The “Come Together” scenario uses the same logic as the Opacity and Layer scenarios above. It is made possible using property bindings with linear converters. Here both the X and Y coordinates of each letter is bound to the "Vertical scroll offset" percentage of the Scroll collection.

Here is an example with the “B” letter:

That swirl icon indicates each binding has a value converter. Clicking these swirl icons will open the value converter panel: