Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Igor

How to scroll horizontally and vertically?

Hey,

 

I am planing to create one project but I cannot figure out how to set horizontal and vertical scrolling on one Artboard. 

Does any one know how to make that effect? Please check a link below at 1:25 to see what I mean exactly :)

 

https://www.youtube.com/watch?v=YteVEb2AsgM

 

Thank you for help in advance!

 

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


Vitaly
InVision ambassador Vitaly , ambassador Edited
Comment actions Permalink

You can do also in Principle. You can do also in Flinto. You can do also in Protopie. You can do also in Kite Compositor. You can do also in Drama...
But alas, you cannot do this in InVision Studio.

1

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Igor, 

Thanks for reaching out here in Community about this! At this time, it is possible to set your prototype to scroll horizontally in Studio. To learn about how to set this up, check out this Help Article.

Based on the video example that you shared though, it appears as if you're attempting to set certain areas of the artboard to scroll horizontally. That being said, we are currently tracking a feature request that would enable users to set horizontal or vertical scrolling on layers, elements, components in Studio instead of only on the artboard level. If this sounds like more of what you're looking for, please let me know and I will open a ticket to track your interest for this.

Hope this information helps, and I look forward to hearing from you!

Shaina

0

bruno
InVision ambassador bruno , ambassador
Comment actions Permalink

omg, yes! I had to abandon a prototype in Invision because of this. Judging by the sample videos, one would think that it would be already included since this pattern is extremely common. 

I really like Invision, you guys are totally awesome, but this was a bit of a bummer :/

0

FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Bruno,

You can actually do this now and it is quite simple to achieve.

For Vertical scrolling,

  • First create your artboard with a standard artboard size (very neccessary)
  • Add contents to your art board as you would normally
  • Once the artboard is filled and you need to add more content, just increase the height of the artboard to accomodate as many contents as you want (picture attached)
  • Duplicate your artboard. You could drag to display the rest of the contents on the new artboard that are not visible on the first artboard or just leave it as it as.
  • Add your transition from first artboard to new artboard: Use drag up/down option (picture attached) and set other conditions as you deem fit.

You'll have a vertical scrolling transition that works perfectly. 

P.S: The main trick is making sure that the viewport settings is: 

  • Scrolling: Vertical (You can also have horizontal or both)
  • Viewport: the standard artboard size you started with before increasing the height (it remains the initial by default).


For Horizontal scroll,

The approach to achieving this is a little bit different but is also simple to achieve. The approach is different because you do not want to scroll through the entire artboard but a section of the artboard, like a selected group of contents.

To achieve this:

  • First create the contents.
  • Make sure to group the contents together and name them uniquely. Especially if you already have other similar contents.
  • Duplicate the group containing the contents on a new artboard. Be sure that elements in each group have unique names and are alike on both artboards.
  • Drag and adjust the position of group on the new artboard so that the contents visible on both artboards are different.
  • It is important that the contents visible on the first artboard are different from the visible ones on the new artboard.
  • Select the group and add your transition from the first artboard to the new artboard.
  • Use drag left/right option and add conditions as deem fit. (picture attached)
  • Select the group on the new artboard and create another transition to the first artboard using the drag left/right option (if you initially used drag left first, you'll be using drag right here and vice versa).

You should have a smooth horizontal transition.

It is important that the contents visible on the first artboard are different from the visible ones on the new artboard. (Why! Because you are trying to display a different part of the group).


Feel free to ask questions if you encounter any issue,

Regards,
Wurah.

0

join the conversation

to comment, sign up or sign in.