Directional Scroll Snap

The Directional Scroll Snap is based on the idea of the scrollable item menu. Items are "snapped to" (aligned with the center of the Directional Scroll Snap) along one axis so that it either scrolls vertically or horizontally. The Directional Scroll Snap also snaps to items pivots not their centers (although you can set it to their center) to give you more options in how you animate & organize your items.

Usage

Download Link

Add the Scroll Snap to an Existing RectTransform:

Select the RectTransform.
Select the Add Component Menu.
Go to UI > Scroll Snaps.
Select the Directional Scroll Snap.
Select a RectTransform to be the Content of the Component.
Fill out any other information to your liking.

Create a Scroll Snap with the Default Layout:

Select either the GameObject Menu (Menu Bar) or the Create Menu (Hierarchy view).
Go to UI > Scroll Snaps
Select the Directional Scroll Snap.
Fill out any other information to your liking.

Dependencies:

Scroller: Wiki; Download
Directional Scroll Snap Editor: Download

Properties

Inspector Properties

Property	Description
Content	This is a reference to the Rect Transform of the UI element to be scrolled.
Movement Direction	The direction the Scroll Snap moves in (Horizontal/Vertical).
Lock Other Direction	When enabled, the position of the Content on the non-movement axis is locked. When disabled, the Content can move in both directions, but still only snaps according to the Movement Direction.
Movement Type	Elastic or Clamped. Elastic mode bounces the Content when it reaches the edge of the Scroll Rect.
Loop	When enabled, items will move relative to eachother within the Content as the user scrolls, creating the illusion that the Scroll Snap is a loop, or scrolling infinitely.
End Spacing	The distance between the end edge of the last item and the start edge of the first item when
Simulate Flings	When enabled the Scroll Snap will choose which item to snap to based on where the scroll snap would land if it were flung.
Friction	A value between .1 and .999 that affects the duration of animations (if Simulate Flings is enabled). The greater the friction the sooner animations stop.
Snap Type	Snap to Nearest, Snap to Last Passed, Snap to Next. This determines which item is snapped to when the user stops scrolling.
Interpolator	Default Interpolator. Affects how the Scroll Snap animates scrolls. See the Directional Scroll Snap example scene for more information.
Min Duration	The minimum duration in seconds for all animations.
Max Duration	The maximum duration in seconds for all animations.
Allow Touch Input	When enabled touches and mouse input drag the Content. When disabled touch/mouse input is ignored.
Button Settings - Duration	The duration for animations started by buttons.
Button Settings - Items To Move	The amount of items to move the content by when a button is pressed.
Button Settings - Go To End	When enabled the the Scroll Snap will move to the last/first item even if the Items to Move would normally send it past that item. When disabled the Scroll Snap will not move if the movement would send it past.
Button Settings - Interpolator	The Interpolator used for button animations (overrides the default interpolator, and is optional).
Button Settings - Tension	The Tension used for button animations (overrides the default tension, and is optional).
Scroll Bar Settings - Friction	The Friction used for scroll bar animations (overrides the default friction, and is optional).
Scroll Bar Settings - Interpolator	The Interpolator used for scroll bar animations (overrides the default interpolator, and is optional).
Scroll Bar Settings - Tension	The Tension used for scroll bar animations (overrides the default tension, and is optional).
Scroll Settings - Scroll Sensativity	The sensitivity to scroll wheel and touch pad scroll events.
Scroll Settings - Scroll Delay	The time in seconds between the last scroll wheel/touch pad event and when the Scroll Snap begins snapping.
Scroll Settings - Friction	The Friction used for scroll animations (overrides the default friction, and is optional).
Scroll Settings - Interpolator	The Interpolator used for scroll animations (overrides the default interpolator, and is optional).
Scroll Settings - Tension	The Tensionused for scroll animations (overrides the default tension, and is optional).
Start Item	Optional reference to a child of Content that the Scroll Snap will jump to when it is enabled.
Viewport	Reference to the viewport Rect Transform that is the parent of the content Rect Transform.
Horizontal Scroll Bar	Optional reference to a horizontal scrollbar element.
Vertical Scroll Bar	Optional reference to a vertical scrollbar element.
Back Button	Optional reference to a back button element.
Forward Button	Optional reference to a forward button element.
Draw Gizmos	When enabled, gizmos are drawn in the Scene View to help you design your Directional Scroll Snap. Will only be available when the Content is assigned.

Non-Inspector Properties

Meaning these are public but can only be accessed through scripts.

Property	Description
horizontalNormalizedPosition	The horizontal scroll position as a value between 0 and 1, with 0 being at the left.
verticalNormalizedPosition	The vertical scroll position as a value between 0 and 1, with 0 being at the top.
velocity	The velocity of the Content on the x and y axis in pixels per second.
closestSnapPositionIndex	The Snap Index of the nearest Snap Position to the center of the View Port/Directional Scroll Snap.
closestItem	The closest snappable RectTransform item to the center of the View Port/Directional Scroll Snap.
calculateChildren	The list of all calculable children from the start (top/left) to the end (bottom/right).
snapChildren	The list of all snappable children from the start (top/left) to the end (bottom/right).

Item Filters

Item Filters.PNG

Item filters can either be set to BlackList or WhiteList. Blacklist means that any items included in the filter will not be used. White list means the only the items in the filter will be used.

Each filter also has a Add Inactive Children property, when this is enabled all disabled child objects will be added to the filter.

The Calculate Filter determines which children will be taken into consideration when calculating the size of the Content, and which items will be looped (if looping is enabled).

The Snap Filter determines which children are available for the Scroll Snap to snap to. If a child is not calculable it cannot be snapped to, even if it is whitelisted under the Snap Filter.

Events

Event	Description
On Value Changed	A UnityEvent that is invoked when the scroll position of the Scroll Snap changes. The event can send the current scroll position as a Vector2 type dynamic argument.
Start Movement Event	A UnityEvent that is invoked when the Scroll Snap begins moving, either through input from the user or programatically. The event can send the method used to start the movement (OnBeginDrag, OnScroll, ect) as a StartMovementEventType type dynamic arguement.
Closest Snap Position Changed	A UnityEvent that is invoked when the closest snappable item to the center of the Scroll Snap changes. The event can send the snap index of the new closest item as an int type dynamic arguement.
Snapped To Item	A UnityEvent that is invoked when the Scroll Snap snaps to an item. The event can send the snap index of the item that has just been snapped as an int type dynamic arguement .
Target Item Selected	A UnityEvent that is invoked when the Scroll Snap determines which item it will snap to next. The event can send the snap index of the item it will snap to as an int type dynamic arguement.

Public Functions

Type	Function
bool	GetNormalizedPositionOfChild(RectTransform child, out float normalizedPosition)
	Gets the normalized position of the scroll snap when it is snapped to the child. Returns if the child is a child of the Content.
bool	GetPositionOfChild(RectTransform child, out Vector2 position)
	Gets the position of the content in the content's local coordinates when it is snapped to the child. Returns if the child is a child of the Content.
bool	GetSnapIndexOfChild(RectTransform child, out int index)
	Gets the index of the child, based on the snappable items. Returns if the child is a child of the Content.
bool	GetCalculateIndexOfChild(RectTransform child, out int index)
	Gets the index of the child, based on the calculable items. Returns if the child is a child of the Content.
bool	GetNormalizedPositionOfSnapPosition(int snapPositionIndex, out float normalizedPosition)
	Gets the normalized position of the content when snapped to the supplied snap position. Returns if the index is valid.
bool	GetSnapPositionAtIndex(int snapPositionIndex, out Vector2 location)
	Gets the position of the content in the content's local coordinates when snapped to the snap position at the Returns if the index is valid.specified coordinates.
bool	GetChildAtSnapIndex(int snapPositionIndex, out RectTransform child)
	Gets the item at the supplied snap index. Returns if the index is valid.
bool	GetChildAtCalculateIndex(int calculateIndex, out RectTransform child)
	Gets the item at the supplied calculate index. Returns if the index is valid.
void	InsertChild(RectTransform child, int calculateIndex, float nonAxisPosition, float startSpacing, float endSpacing, LockMode lockMode, bool snappable)
	Insert a new child into the Scroll Snap by supplying the calculate index, the non-axis position, the start spacing, and the end spacing.
void	InsertChild(RectTransform child, Vector3 worldPos, float startSpacing, float endSpacing, bool snappable)
	Insert a new child into the Scroll Snap by supplying the worldPos, the start spacing, and the end spacing.
bool	JumpToSnapIndex(int snapIndex)
	Sets the content's position to be aligned with the Snap Position at the snapIndex. Does not animate just "jumps". Returns true if the snapIndex is a valid index
bool	JumpToSnappableChild(RectTransform child)
	Sets the content's position to be aligned with the Snap Position of the child. Does not animate just "jumps". Returns true if the child is a valid (snappable) child.
void	RemoveChild(RectTransform child)
	Delete the child, leaving the spacing the same.
void	RemoveChild(RectTransform child, float calculateSpacing, LockMode lockMode)
	Delete the child, setting the spacing to calculateSpacing.
void	RemoveChild(RectTransform child, RectTransform newParent)
	Remove the child, leaving the spacing the same and parenting the child to the new parent.
void	RemoveChild(RectTransform child, RectTransform newParent, float calculateSpacing, LockMode lockMode)
	Remove the child, setting the spacing to calculateSpacing and parenting the child to the new parent.
bool	ScrollToSnappableChild(RectTransformChild, float duration, Interpolator interpolator)
	Scrolls to the position of the supplied snappable child in the supplied duration of time with the supplied interpolator. Returns true if the child is a valid (snappable) child.
void	ScrollToSnapPosition(int index, float duration, Interpolator interpolator)
	Scrolls to the supplied index in the supplied duration of time.
void	ScrollToNearestSnapPosition(Vector2 endPos, float duration, Interpolator interpolator)
	Scrolls to the nearest snap position to the end position in the supplied duration of time.
void	ScrollToNearestSnapPosition(float normalizedPos, float duration, Interpolator interpolator)
	Scrolls to the nearest snap position to the normalized position in the supplied duration of time.
void	SetChildSnappability(RectTransform child, bool snappable)
	Tells the Scroll Snap whether it should snap to this child. If the child is not calculable it cannot be snapped to. Used for "Locking" or "Unlocking" Items that are already included in the Scroll Snap. (e.g. in a level/map menu). If you would like to add/remove a child use the Insert/Remove child functions.
void	SetRectTransformUncalculable(RectTransform transform)
	Used only in the case of adding a decorative object at runtime (an item that never has been and never will be calculable). If you would like to remove a calculable item use the RemoveChild functions.
void	SetItemEndSpacing(RectTransform child, float spacing, LockMode lockMode)
	Sets the spacing between the child and the next calculable item.
void	SetItemEndSpacing(int calculateIndex, float spacing, LockMode lockMode)
	Sets the spacing between the child at the calculateIndex and the next calculable item.
void	SetItemStartSpacing(RectTransform child, float spacing, LockMode lockMode)
	Sets the spacing between the child and the previous calculable item.
void	SetItemStartSpacing(int calculateIndex, float spacing, LockMode lockMode)
	Sets the spacing between the child at the calculateIndex and the previous calculable item.
void	UpdateLayout()
	Updates the Scroll Snap. Use only if you need updated info about the Scroll Snap before it has updated itself (e.g. first frame). If you need to modify the Scroll Snap (e.g. adding items, manipulating spacing, changing an item's snappability, removing items) please use the provided functions.

Gizmos

Gizmo	Meaning
White Box Around Content	Shows the current size of the Content.
Blue Line	Indicates a Snap Position. The lines will either be vertical (if the Movement Direction is horizontal [like this example]) or horizontal (if the Movement Direction is verical). This line will align with the center of the Scroll Snap when the Snap Position is snapped to.
Blue Box	When Looping is enabled and Draw Gizmos is enabled the Scroll Snap will show where the first item would be in relation to the last item if the first item was looped to the end. This is to help you decide what End Spacing works best for your situation.

Wiki

UnityUIScrollSnaps / Components / DirectionalScrollSnap