Search

Learn How to Animate the Twitter Intro In Adobe Xd


Twitter is my favourite social media app.


I use it quite frequently, but it wasn't until recently I stumbled across the really cool intro animation that appears when launching the iPhone application.


The Twitter bird slightly bounces and then jolts outside of the screen in one swooping motion before the news feed launches.


Naturally, I wanted to try this for myself in Adobe Xd. Only, I wanted to also mock it up on an actual phone like you will notice in this example. That is totally optional, so if you are going to this tutorial for yourself, creating a regular iPhone X artboard is just fine.



In this tutorial, I will take you through some steps and show you how to recreate the Twitter intro animation in Xd. We'll design an interface with a clickable Twitter app icon, which will launch the intro. Once again, we'll also focus on how to use the Auto-Animate tools to put it all together.


Here's a step by step process on how to Prototype this project.


Artboard 1

In the Prototype tab, click on the Twitter icon and drag the blue indicator handle to Artboard 2

Set the Trigger to Tap

Set the Action to Auto-Animate

Set Easing to Ease In and Duration to 0.1 seconds


Artboard 2

Click on the Artboard and drag the blue indicator handle to Artboard 3

Set the Trigger to Time

Set the Delay to 0s

Set the Action to Auto-Animate

Set the Easing to None and Timing to 0.2s


Artboard 3

Click on the Artboart and drag the blue indicator handle to Artboard 4

Set the Trigger to Time

Set the Delay to 2s

Set the Action to Auto-Animate

Set the Easing to Ease In-Out and Timing to 0.2s


Artboard 4

Click on the Artboard and drag the blue indicator handle to Artboard 5

Set the Trigger to Time

Set the Delay to 0s

Set the Action to Auto-Animate

Set the Easing to None and Timing to 0s


Artboard 5, 6 and 7

Click on the Artboard and drag the blue indicator handle to following Artboards

Set the Trigger to Time

Set the Delay to 0s

Set the Action to Auto-Animate

Set the Easing to None and Timing to 0s


Artboard 8

Click on the Artboard and drag the blue indicator handle back to Artboard 1 to complete loop

Set the Trigger to Time

Set the Delay to 0s

Set the Action to Transition

Set Animation to Dissolve

Set the Easing to Ease In-Out and and Timing to 0.2s


With all of these Prototype settings, this is the result you should have:


iPhone Mockup

To download the mockup in this tutorial, visit Anthony Boyd Graphics.

113 views

Follow

  • Black YouTube Icon
  • Black Facebook Icon
  • behance-logo

Contact

519-564-1981

©2018 BY MONTILLA DESIGN