Scroll

What is a scrollview?

A scrollview is a window or viewport for viewing content. Think of it like an elevator with windows; it changes your view without having to move the building. A scrollview changes your view of the content you're looking at, without moving the content.

This article will help clarify the concept of scrollviews and how they're set up and used in Pixate.

Why not use Drag?

While the expectation of how Drag and Scroll work, could be similar, they are vastly different interactions.

Drag is used to move a layer from position to position and does not have any inertial properties. The drag interaction is best used for a "drag-and-drop" type of action or for simply moving a layer. An example of drag can be seen here.

Drag is generally not a suitable replacement for a scrollview. For starters, you don't get the same movement. A set of layers that are being dragged, feel stiff and don't have any inertia. This means you can't flick to speed up the movement.

Scroll also has the option for paging, which snaps the view in intervals based on the content. This is achievable with drag, however advanced conditions, like the ones in this video, would need to be used to emulate the same animation scroll has as a built in option.

Drag and Scroll values in Pixate

The main difference that seems to cause a bit of confusion, is what values to use in animations, when basing them on drags or scrolls. A layer that is dragged to the left or up, will have its X or Y positional value decreased. This is because the top left corner of the canvas is (0,0). If you move up and to the left, past the bounds of the canvas, the value changes to a negative number.

Still lost? Maybe these illustrations (made in Pixate) will help.

This is a representation of a layer that is dragged up and down. The red area to the right is for negative Y vaules and green is for positive.

As mentioned, the top of the screen is Y=0. This is used as the main reference point for the animation. A condition would check a layer's top edge and compare it to the top of the screen. Because of this, when layer is dragged down, it's Y value increases. The opposite occurs when the layer is dragged up.

A scroll is different. Instead of using the top of the screen as the reference, a scroll uses the top of the content. The top edge of a layer is always going to be Y=0 when it's in a scrollview and there's no way for the scroll to go past that.*

In animation conditions, you can check against the content's X or Y offset with contentX or contentY. This is effectively checking to see how far away the top edge of the layer is from the top edge of the scrollview. Since the scroll can't go past the bounds of the content, the X or Y value is always going to be positive.*

*A scroll can go past the upper and lower limits of the content, but only as a part of overscroll. For instance, if you scrolled all the way back to the top of content, you could pull the scroll past the content's upper bounds. This would make the contentY a negative number. Overscroll and scroll bounce are features built into iOS and aren't available on Android.

Feedback and Knowledge Base