starwars.js

// Android does not support Matrix3D so it will use rotationX instead
if (OS_IOS) {

  // this code rotates the text and changes perspective
  let matrix = Ti.UI.createMatrix3D();

  // Alter the perspective of the view
  matrix.m34 = -1 / 200;

  // Rotate the image around the x-axis
  matrix = matrix.rotate(50, 1, 0, 0);

  // Scale the image down to fit
  matrix = matrix.scale(0.7, 0.7);

  // Apply the transformation
  $.wrapper.transform = matrix;

  // This code moves the background image further back
  // on z-index so that text does not go behind image.
  let matrix2 = Ti.UI.createMatrix3D();

  // Move the background image further back (z-axis)
  matrix2 = matrix2.translate(0, 0, -100);

  // Apply the transformation to the ImageView
  $.backgroundImage.transform = matrix2;

}

// Preload the intro music
const music = Titanium.Media.createSound({
  url:     '/audio/starwars-intro.mp3',
  preload: true,
});

const executeAnimation1 = () => {

  const animation = Ti.UI.createAnimation({
    opacity:  1,
    duration: 6000,
    curve:    Ti.UI.ANIMATION_CURVE_LINEAR,
  });

  // Set the visibility of the different views
  $.galaxy.visible = true;
  $.starwars.visible = false;
  $.wrapper.visible = false;
  $.backgroundImage.visible = false;

  animation.addEventListener('complete', function onComplete1() {
    animation.removeEventListener('complete', onComplete1);

    // Execute the next animation sequence
    executeAnimation2();
  });

  // Begin showing first view
  $.galaxy.animate(animation);

};

const executeAnimation2 = () => {

  // scale the title text out and then bring it back in
  const matrix = Ti.UI.createMatrix2D({ scale: 14 });
  $.starwars.transform = matrix;
  const matrix2 = Ti.UI.createMatrix2D({ scale: 1 });

  const animation = Ti.UI.createAnimation({
    opacity:   1,
    duration:  7000,
    curve:     Ti.UI.ANIMATION_CURVE_LINEAR,
    transform: matrix2,
  });

  // Set the visibility of the different views
  $.galaxy.visible = false;
  $.starwars.visible = true;
  $.wrapper.visible = false;
  $.backgroundImage.visible = false;

  animation.addEventListener('complete', function onComplete2() {
    animation.removeEventListener('complete', onComplete2);

    // Wait for a bit before executing the next animation sequence
    _.delay(executeAnimation3, 2000);
  });

  // Start playing the intro music here
  music.play();

  // Begin showing the title screen
  $.starwars.animate(animation);

};


const executeAnimation3 = () => {

  // Animation to scroll the text up
  const animation = Ti.UI.createAnimation({
    top:      -1400,
    duration: 120000,
    curve:    Ti.UI.ANIMATION_CURVE_LINEAR,
  });

  // Animation to show the background image (stars)
  const animation2 = Ti.UI.createAnimation({
    opacity:  0.8,
    duration: 10000,
    curve:    Ti.UI.ANIMATION_CURVE_LINEAR,
  });

  // Set the visibility of the different views
  $.galaxy.visible = false;
  $.starwars.visible = false;
  $.wrapper.visible = true;
  $.backgroundImage.visible = true;

  // Begin showing the background stars
  $.backgroundImage.animate(animation2);

  // Start the text crawl
  $.intro.animate(animation);

};

// Execute the first animation sequence
executeAnimation1();

starwars.xml

<Alloy>
  <Window
    id="window"
    layout="composite"
    backgroundColor="black"
  >

    <ImageView
      id="backgroundImage"
      image="/images/starwars-bg-vertical.jpg"
      height="fill"
      zIndex="100"
      visible="false"
      opacity="0"
    />

    <View
      id="wrapper"
      layout="vertical"
      ios:top="-400"
      android:top="0"
      rotationX="40"
      height="fill"
      visible="false"
      zIndex="200"
    >

      <Label
        id="intro"
        font.fontWeight="bold"
        font.fontSize="20"
        color="yellow"
        android:textAlign="Ti.UI.TEXT_ALIGNMENT_CENTER"
        ios:textAlign="Ti.UI.TEXT_ALIGNMENT_JUSTIFY"
        verticalAlign="top"
        ios:top="900"
        android:top="500"
        ios:width="40%"
        android:width="50%"
        backgroundColor="transparent"
      >
        EPISODE MMXX

        It is a period of confusion. Medical personnel, striking from hospitals and makeshift camps, have won their first victory against the evil Coronavirus Empire.

        During the battle, Medical heroes managed to find the secret plans for the Empire's ultimate weapon, the FEAR-19, a weapon with enough power to destroy an entire planet.

        Pursued by the Empire's sinister viruses, our heroes race against time to ensure that everyone can be trained in the secret art of hand washing and good hygiene and restore freedom to the galaxy....

      </Label>

    </View>

    <Label
      id="galaxy"
      text="A long time ago in a galaxy far, far away...."
      visible="false"
      zIndex="300"
      color="#33b2c5"
      font.fontSize="35"
      left="8%"
      right="8%"
      opacity="0"
    />


    <Label
      id="starwars"
      text="may the 4th\n2020"
      visible="false"
      font.fontFamily="StarJediHollow"
      font.fontSize="40"
      color="yellow"
      zIndex="400"
      textAlign="center"
      font.fontWeight="bold"
      opacity="0"
    />

  </Window>

</Alloy>