Animated Page Transition

Hi Wai Lee,

You could implement the animation by using the Change Location action. You can place the Change Location action in a conditional loop, to simulate the slide in/out effect.

Thanks. Is there a way to change the location of a page, or all element in a page, without doing individual Change Location action? Say I have 3 pages with about 10 elements per page, and I want users to be able to slide back and forth between those pages…?

In fact, to slide page 3 into view, I will have to change the location of page 2 as well (to slide it out), so I’ll have to do change location for 20 elements. Just wonder if there are better ways to do this, since this kind of page/group transition animation is pretty common nowadays.

Perhaps more generally, is there a way to apply an action to a group of elements?

Sure, you can change the location for a group of elements with just one Change Location action.

First you will need to select those elements and group them together. Then in the element selector of “Operate on Element…” action, you can choose the entire group as target element (you can press “next” or “previous” button to select the group if you feel hard to do so with mouse).

Thanks. I can select a group of element using the ‘select element..’ function. But to set property for all of them…do I have to first ‘pack selection as custom element’ to create a group? Sorry I wasn’t clear…

Hi Wai Lee,

When I said “group them together”, I mean the “Grouping” feature mentioned in this article: http://www.foreui.com/doc/html/conjoi…

After grouping the elements, you can treat them like a single one, and you can change its location with just one Change Location action.

Got it, thanks!

Hi Xavier,

One more question related to this. Say I want to increment or decrement the X or Y location of a group or element in a loop….like X = X – 1….how do I do that? Looks like I can only change the location X,Y o literal value…how do I assign x,y to variable and set x,y to variable?

Wai

The X and Y variables are built-in for any element, and their are called “element property”, you can use them in expression. The example below shows how to move the group down for 10 pixels a time.

You can always insert element property into expression when you see the “…” button after the editing field.

Thanks!