Splash screen

We’ll now finish off by adding the splash screen, so that you can optionally add the other modes (‘Sign in’ and ‘Reset password’) to the sixth page.

The splash screen is in a separate artboard, which is currently placed somewhere below our screen. We reposition it by setting its x and y to zero, and then bring it to the front, so that it’s on top of all other layers.

# SPLASH SCREEN
Splash.point = 0
Splash.bringToFront()

The (full screen) image on this artboard is given a ‘flexible height’ in Design, so it’ll automatically resize to bigger screen sizes.

Fading out the Splash screen

We did not add any events to the splash screen (you can’t tap or swipe it), so its ignoreEvents property will still be yes. (Because that’s the default before you add an event to the layer.)

This means that the user can interact with the PageComponent while the splash screen is still visible. They could, for instance, already swipe a few pages forward before even seeing them.

So we’ll set Splash’s ignoreEvents to no so that it will grab all user gestures.

# Disable scrolling or swiping when
# the splash screen is still visible
Splash.ignoreEvents = no

After a two-second ? Delay, we animate it to zero opacity, while also scaling it to twice its size.

Utils.delay 2, ->
    Splash.animate
        opacity: 0
        scale: 2
        options:
            time: 0.5
    # Let the PageComponent react to events
    Splash.ignoreEvents = yes

And then we can let Splash ignore all events again.