CenteredStrip storyboard

All scenes show a CenteredStrip with 10 items labeled "0" through "9".

0
1
2
3
4
5
6
7
8
9

Default state

0
1
2
3
4
5
6
7
8
9

Beginning swipe to left. Item 0 begins to fade out, item 1 begins to fade in.

0
1
2
3
4
5
6
7
8
9

Select first item. Since that item can't be centered without creating a gap on the left, the strip remains left-aligned.

0
1
2
3
4
5
6
7
8
9

Select 3rd item. Item can now be centered.

0
1
2
3
4
5
6
7
8
9

Halfway to selecting 4th item.

0
1
2
3
4
5
6
7
8
9

4th item selected and centered.

0
1
2
3
4
5
6
7
8
9

Select last item. Strip is right-aligned.

0
1
2
3
4
5
6
7
8
9

Right to left languages reverses order of items

0
1
2
3
4
5
6
7
8
9

Right to left

0
1
2
3
4
5
6
7
8
9

Right to left during swipe to right