Building a Fluid Transition Experience

how-to

#1

Hello IntuiFace community,

New guy here, developing an experience for the company i’m an intern in (we’ll get a licence as soon as all testing is successful)

I am interested in building an experience that allows the user to seamlessly and fluidly navigate around the scenes without having to wait for transitions - by using gestures to left,right, up and down.

An example of what i mean can be seen in the “7 Trends of Interactive Experience Design” experience that can be found in the Marketplace. In it, you are able to scroll vertically, but not horizontally. Ideally, i would like to be able to do both.

What are the elements that i should be looking into to create this? Essentially, I guess what i want is to create something like an interactive Prezi.

Please throw any ideas you have and thanks in advance for your help!

Regards,
Stefan


#2

Hi Stefan,

It seems you will be one of the future users of the Scroll Collection that should be released in our next major release. This collection wasn’t fully ready for the 5.6 release of this week but should be ready for the next one.

In the meantime, you can always put all your content into groups and used animations to make them come into / out of the screen, while staying in the same scene.

Seb


#3

Hey @sslavov,
@Seb is right, animations and binding converters may be the way to go.
I assume you’re talking about the parallax menus in the trends?

In the design trends, they use a transparent rectangle used as a slider…which other elements and menus are bound to with a linear converter. This gives the look of independently moving units whenever scrolled.

But you’re correct, I’m not sure of a way to bind BOTH horizontally and vertically moving sliders.

So off the top of my head, maybe there’s three solutions that apply to your situation:

  1. Full screen with button to switch: Create a transparent slider that goes vertical, and another that moves horizontal. Bind each set of menus and elements to their appropriate slider. If you’re doing fullscreen elements, you could only move one at a time…ie; vertical movement or horizontal element. Set a button to “show” each slider, which will allow the user to scroll that direction…for example (Touch here to scroll right!)
  2. Home screen to “Jump off” - You could have your portrait and horizontal menu sliders showing on only PART of the home screen. For example, a rectangle on the bottom 100px and a rectangle on the right 100px. Each of these are the sliders that your menus are bound to. When you start swiping/pulling-up the bottom one, it will then hide the other and start showing the vertical menus. When you swipe back to the main screen, the user can then start swiping the right-rectangle to start showing the horizontally bound menus/assets.
  3. Use Scroll-Bars - a scroll bar with a slider across the bottom and a scroll bar across the side. Bind all of your elements to each, and you could in theory…navigate dynamically moving each. PLus, the sliders allow more real-estate for interactivity on the screen…ie; there’s no transparent rectangle to ‘cover up’ buttons, etc.

Just my two cents - good luck!


#4

Hey @Seb, @AlexB,

Thank you both for your replies!
@Seb I think you answered the same question during a Webinar on 3rd of August where i asked it, but since i didn’t see the Scroll Collection in the 5.6 update, i wanted to check whether I was missing something :slight_smile:

@AlexB
Thank you for your suggestions! I’ll look into the elements and play around a bit with the transparent rectangles and share my results…if they are worth sharing at the end.

Cheers,
Stefan


#5

Hi @StefanS,

I did, and it was supposed to be in 5.6, but we decided to delay its release until it’s more mature.