Changing panel opacity based off position

Hi guys :slight_smile:

Im new here and im trying to prototype this image slider.

In a nut shell the middle image will always be selected (it has 100% opacity), while the rest of the rectangles have 25% to show that they are deselected.
If i press the right arrow, each block will move X amount of pixels to the right.
If i press the left arrow, each block will move X amount of pixels to the left.
The middle block is always the selected block.
So basically if i press the right arrow, block 2 will now be in the position of block 3 and will have 100% opacity. Block 3 will move to position 4 and have 25% opacity.

Im really struggling and im sure it has something to do with position X variables or something?


All interactions in Axure have an event and and action. You’ve clearly stated the action. You want the opacity to change. Now you need an event. When do you want the opacity to change?

When it moves. Luckily there is an OnMove event you can use for widgets. So:

Set Opacity to…

Still not there. You don’t want the opacity to simply change as it moves, you want it to change when it moves and has moved to a certain location. You need to add a condition that checks its X position.

If value [[This.x]] is greater than some amount
Set opacity to some amount

1 Like

Awesome. Seems to be working. I was so focused in on the arrow and not the actual box.
Thanks very much! Much time saved :slight_smile:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.