Presenting the videos

The next two animations, in the same Utils.delay block, both have a delay of 3.3 seconds and will, therefore, happen simultaneously.

# Start spinning the wheel after 2 seconds
Utils.delay 2.0, ->
    # spinning wheel animation
    # slide to the videos after 3.3 seconds more
    splash_screen.animate
        x: -Screen.width
        options:
            curve: Spring(damping: 0.8)
            time: 0.5
            delay: 3.3
    page.animate
        x: 0
        options:
            curve: Spring(damping: 0.8)
            time: 0.5
            delay: 3.3

The first one slides the splash screen to the left so that it’s off-screen. The second animation slides the PageComponent into position. We use a spring curve because it more closely resembles the original animation.

Under the first Delay block, we now add a second one to start the first video; it’ll start playing 0.1 seconds before the video appears.

# Start the first video
Utils.delay 5.2, ->
    Video_1_Bridge.player.play()

And after that, we can already load() the next videos, so that they’ll start instantly when triggered. (Which we’ll do later.)

# Start the first video
Utils.delay 5.2, ->
    Video_1_Bridge.player.play()
    # and preload the other videos
    Utils.delay 1, ->
        Video_2_Clouds.player.load()
        Video_3_train.player.load()
        Video_4_people.player.load()