Problem with tab and content reference point animation

Sorry for the confusing title.

Basically, I have 2 tabs side by side that toggles two content. The tabs also have a marker below the active tab.

I’m able to make everything work.

Except the animation of content and tab marker is weird. They slide from one direction only.

I want the animation to start where the active link and content is.

How do I do this?
tab_toggle.rp (56.7 KB)

hi all, any thoughts or advice?
still kind of struggling with this.

i just wanted the line below the link to swing left and right, and also the object/content left and right

Hi arjay,

Apologies for the delayed response! When a dynamic panel changes states with an animation, the animation will apply to the entire panel state (similar to a slideshow). Since the line widgets under your tabs are within the same dynamic panel, the panel state transition will slide both of the lines in from the same direction.

If you’d like the line widget to move between the tabs, you can place the line outside of the panel and then use a “move” action to move the widget instead. Note that you will need to specify the x and y coordinates under the tabs with this type of approach, but this should help with having more control over where/how the widget moves. I attached an edited version of your file below where I’ve re-created this animation using a move action–let me know if this helps or if you happened to be looking to do something else!

tab_toggle_edited.rp (56.2 KB)

Thanks, that worked perfectly

I tried putting the line outside of the dynamic panel but just couldn’t figure out the structure.

Thanks again! :slight_smile:

So I notice the x, y axis of animation currently does not work on adaptive views. Is this correct?

Ex.

on 1280 width, my animation swings from

x:1200 y:300 to
x:1250 y:300

on 1440 width, my animation should swing from

x:1400 y:300 to
x:1450 y:300

How can I accomplish this?

Cause right now, when I change its x,y axis animation in one view, it changes on all views.

Hi arjay,

That’s correct–interactions and animations are non-adaptive. Here’s a quick note on the non-adaptive aspects:

https://www.axure.com/support/reference/adaptive-views#adaptive_and_nonadaptive_properties_and_attributes

One way to achieve different animations in each adaptive view is to create a conditional case that evaluates each view in question. Here’s a screenshot that shows how to set up:

And so for the OnClick event, you could have three conditional cases like this:

OnClick
Case 1: If current adaptive view equals Base

  • Move Tab line to (x, y) swing 500 ms

Case 2: If current adaptive view equals 1280 view

  • Move Tab line to (1250, 300) swing 500 ms

Case 3: If current adaptive view equals 1440 view

  • Move Tab line to (1450, 300) swing 500 ms

And here’s more on conditional logic for reference:

https://www.axure.com/support/reference/conditional-logic#types_of_conditions

HTH!

I tried it, but it only works for the first two cases.

So many things wrong with it. On the 3rd case the line stops moving. On 4th case the line moves all over the place. I’m literally just copy/pasting case 1, changing the adaptive view and x/y axis of new case but it yields unfortunate results. Tried it many ties but didn’t seem to work.

Its a bit strange that changes on interaction affects all views when preventing that would have been the simplest solution.

Hi arjay,

Another approach that can help is to use [[this.x]] in the Move To action:

Since that would dynamically move the target widget to the x-coordinate of the clicked label widget, you’ll want to size the label widgets uniformly across. Here’s an edited RP copy:

tab_toggle_edited2.rp (57.1 KB)

I’ll be happy to take a look at your progress in your latest RP file as well, and try to track down what’s causing the broken line moves in the 4th case. Thnx!