Page four: Fading in the light trails and scaling them
We’ll move on to the app icons soon. But first: the light trails, they also have a bit of animation.
The light trails fade in. When they first appear at the bottom of the screen, they’re hardly even visible.
They’re also thinner in the beginning and grow to their full width while moving up.
We’ll animate their width by changing their horizontal scale, scaleX
, from 10 to 100 percent.
The light trails are trail_left
, trail_c_left
, trail_c_right
and trail_right
, and again we use a loop to adjust them all at the same time.
for trail in [trail_left, trail_c_left, trail_c_right, trail_right]
trail.scaleX = Utils.modulate page.scrollX,
[page.width * 2, page.width * 3],
[0.1, 1], yes
Their width changes from only one-tenth to full width. Most of it will happen off-screen, though.
And in the same loop, we can fade them in by changing their opacity
.
trail.opacity = Utils.modulate page.scrollX,
[page.width * 2.4, page.width * 3],
[0, 1], yes
Note that the opacity animation starts later; by adding .4
, the transition will begin at 40% of the scrolling distance between the two pages.