Transitions and gestures

The goal of Marvel is to make your prototypes get as close to the real thing as possible. Whether you're creating apps or websites, it's the small details which really make the difference.

How to add a transition:

Screen transitions are a great way to replicate the interactions of real apps and sites. It allows you to see animations between screens. Everything from sliding left and right, to fades, pops and flips.

  1. Select any image in your project and click edit
  2. Once the editor opens, click and drag anywhere on the image to draw a Hotspot
  3. In the Edit menu which pops up, select the destination screen for your Hotspot
  4. Click the Screen Transitions tab
  5. Select a transition and close

 

 

How to add a gesture or action

Actions enable you to use swipes, taps or pinches to interact with your prototype, adding realism to your app. They also go perfectly with transitions.

  1. Select any image in your project and click edit
  2. Once the editor opens, click and drag anywhere on the image to draw a Hotspot
  3. In the Edit menu which pops up, select the destination screen for your Hotspot
  4. Click the Actions tab
  5. Select a gesture or action and close

Pro tip: Combine with animated GIFs

Combine transitions and gestures with animated GIFs to create an extra level of realism. Check out this example.

Was this article helpful?
3 out of 3 found this helpful

Articles in this section

See more

    Still have a question?

    Submit a help request