Scrolling, fixed headers & footers and timers

Marvel automatically scrolls any long designs you upload so you don't need to do a thing ūüéČ

If you're importing your screens, your prototype will automatically scroll if the length of the screen is longer than the viewport of the device you're viewing it on. We have a guide to the correct screen sizes for your device here.

If you're using our Design tool to create your screens, learn how to change your screen size here.

Note: we don't currently support horizontal scrolling but if its something you want, get voting here.

Keep scroll position

The 'keep scroll position' feature allows you to set-up a hotspot on one screen, and have the destination screen load at the exact same scroll position as the user was on the previous screen. This is a great tool for creating chat and messaging prototypes, where the conversation often loads at the bottom of each screen. 

To keep the scroll position:

  1. Select any image in your project and click View
  2. Once the editor opens, click and drag anywhere on the image to draw a hotspot
  3. In the image selector pop up, select a destination screen > then select the Keep scroll position on the left
  4. Hit close to save your changes
  5. When you play your prototype and click on the hotspot, it'll keep the same scroll position as it transitions to the next screen.  

Automatically land on a certain position of your screen using Anchors

If you want to link to another section on the same screen, anchors are a great way to automatically scroll to that area.

How to create an anchor:

  1. Hover over any image in your project and click view
  2. Once the editor opens, click and drag anywhere on the image to draw a hotspot
  3. In the Edit menu at the bottom, click scroll to anchor
  4. Using the target, select the area you would like the Hotspot to jump to when it's clicked on 
  5. You can also toggle the 'smooth scroll' option to add a smooth transition to the scroll

Create static headers & footers

 

 Fixed headers and footers are areas of your screen which remain static, while you scroll the rest of your screen. They're useful for things like action bars on Android or header bars on iOS, or a row of tabs along the top or the bottom of a screen. 

How to set a fixed header and footer:

  1. Open Marvel Editor by clicking on any of your images
  2. Slide the 'fixed header' and 'fixed footer' bars, located on the left hand side of the image
  3. You can choose any length of header or footer for either one - the px indicator on the right hand side of the image, level with the bar, shows how many pixels are fixed 

Timers 

You can automatically transition between screens of your prototype after a select amount of time without any user interaction using the Timer feature.

It’s perfect for creating loading screens and onboarding flows. You can even use it to create an automated slideshow of your screens.

To use the Timer:

  1. Open the Editor by clicking on any of the images in your project
  2. Select Timer in the top left-hand menu
  3. Input the duration of your timer
  4. Select Pick Destination and choose a screen
  5. Close the menu for choosing the destination screen 
  6. Hit Play to see this in action 
  7. You can also use transitions with timers: once you've selected the Destination Screen, simply click on the Screen Transition tab and select transition you want to add to it. 
 


Check out the Home Away prototype below to see how you can use timers to automatically move between screens:

Interested in our premium features? Check out our plans page.