How to create Typeform type of scroll and focus?

advanced-prototyping
#1

Hi!,

I’m trying to create an experience similar to typeform. Once a question is answered, it scrolls up, fades out and the next question is unhidden, and scrolled to the front and center position. Is this possible in Axure? I wasn’t able to figure out how to push the original panel up.

Here is a type form example:

https://www.typeform.com/examples/

Thanks!

#2

I think you could accomplish this by laying out the entire form the way you like it in one long scrolling page, then use the Scroll to Widget action on each successful form field completion. The fading can be done by creating an interaction style for the text, or by putting a semi-transparent box over the text to be faded.

#3

I’ll try that. Thanks!

#4

Yes, the movement in those Typeform site examples comes from automatically scrolling the page on the input form submit/button click.

Here is an example. Not perfect–the Scroll to Widget action didn’t work quite as I intended…maybe because the widget is a dynamic panel pinned to the browser? At any rate it is close… would be better if the items enabled/disabled themselves on scroll --either with (if This is over area of ) or (if [[This.y]] is equal to [[widget.y]]) or some range like that.

TypeFormType.rp (97.1 KB)

#5

I’ll try it. Thanks!

#6

Hey mbc66, that example is exactly what I was looking for trying to show different types of form interaction. Can you help me I’m not sure what [[Target.x]] is or how it works, or [[This.bottom+1]] Can you help? Basically I need to do replicate the same thing but each of my sections are longer in length…i.e. more questions before you get to next section. Thanks

#7

@kemberexp, there are many “hidden” variables in Axure. [[This]] is a pointer to the widget on which your interaction code is placed, like and OnClick event, and [[Target]] is a pointer to the widget on which an action is aimed, for instance, in “Move myPanel by (0, 100)” the widget named “myPanel” would be the Target. The double square brackets, [[ … ]] are used in Axure programming to refer to a variable.

Now, widgets have various properties, like their text content, their location, size, etc. Location is defined in typical Cartesian coordinates with two variables, x (horizontal distance in pixels from the left edge of the viewport, or container) and y (vertical distance from the top edge.) So, [[Target.x]] refers to the location of the left side of the target widget, relative to its container. (Usually this is the browser window, but if that target widget is in a dynamic panel, the x value is relative to that panel.) The dot (period) is a way to “chain” variables together, so [[Target.x]] literally means, return the value of the variable x contained in the variable Target which points to the widget myPanel. The end result is that the location of the left side of myPanel is known.

Axure provides several alternate variables for x and y which include top, bottom, left, right so your code can be easier to read.

  • [[This.left]] = [[This.x]]
  • [[This.top]] = [[This.y]]
  • [[This.right]] = [[This.x + This.width]]
  • [[This.bottom]] = [[This.y + This.height]]
  • [[This.bottom+1]] = One pixel below this widget

Essentially, [[This]] and [[Target]] are shorthand for setting up a local variable, like the venerable “LVAR1”. You could set up a local variable where LVAR1 refers to the widget, “myPanel” and then refer to that widget’s properties.

  • List item [[Target.x]] = [[LVAR1.x]] where LVAR1 = widget ‘myPanel’ …as in this interaction code:

image.png1088×636 28.8 KB

So, [[Target.x]] and [[This.text]] are not only easier and faster to code, They are reusable. That same action can be copied and pasted to refer to other widgets (targets) and/or used for other events. As you code more and more in Axure you’ll find this is very powerful and time-saving. Also, a statement like, Move myPanel to ( [[Target.x]] , [[This.bottom+1]] provides a great way for a widget to essentially say, “move myPanel to the same x-location where it already is and tuck it just below wherever I am,” or in other words, “don’t move it horizontally, only vertically.” You don’t have to know or calculate the x-location of the target widget, nor do you need to know or calculate the height of “This” widget.

At this point, you should be thinking, “AHA! So now it doesn’t matter if my sections are longer in length, or even if they change in length (height).” You can just use the relative variables, [[This]] and [[Target]] and refer to .height or .bottom, etc.

For more info, take a look at this reference page:
https://www.axure.com/support/reference/variables

Here is a list of the supported javascript variables in RP7 and RP8:

Also, look at the screenshot above and find the link for “Insert Variable or Function…” Click that and browse through all the available “hidden” variables. You can select any of them to ensure you get the correct spelling and syntax without having to type them out manually. To get more info and examples for any of them, just search for it in the forum here.