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
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
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.