IF by IFTTT » Page four: Fading in the light trails and scaling them

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
Download Framer project

Note that the opacity animation starts later; by adding .4, the transition will begin at 40% of the scrolling distance between the two pages.

The light trails scale up horizontally while fading in