Menu animation - mutually exclusive selection

Help
#1

Principle Version: 6.12
macOS Version:11.6 (20G165)
Description of what you need help with:

Create a left hand menu - without having to create an artboard for every selected menu option, is there a way to “unselect” a selected menu option when a new one is selected?

For example, a left hand menu with 5 categories (e.g. home, page 1, page 2, etc.), where home is in a selected state and when clicking on menu option “page 1” the “home” menu option is deselected (e.g. visually looks like it’s unselected) and “Page 1” is now selected.

The only way I know how to do it, is to create an artboard for every state and have it transition to each one. Is there an easier way? Thank you.

Screen Shot 2021-11-12 at 3.46.16 PM
Screen Shot 2021-11-12 at 3.46.16 PM2984×1416 205 KB

#2

You can get fancy with components and component messages, but honestly I don’t think that would make much sense or save you work. One way or another, to display different contents in the section on the right, you would need a separate artboard corresponding to each row.

#3

One way I’ve worked around stuff like this is to lean on how copy-pasting layers also copy-pastes events:

  1. Make an artboard for each visual state (with one button selected where the rest are not selected.) In this case that’s maybe 6 or so.
  2. On one artboard, create hotspots for each button. (Transparent filled shapes.)
  3. Create tap links from each hotspot to each artboard except the origin artboard.
  4. Copy paste those hotspots to each artboard.
  5. You’ll be missing links back to the start, so select the hotspot for the starting artboard from each of the copied sets and then make a tap event back home. (Luckily you can create multiple events if you’ve got multiple layers selected)

This process is a bit of a lock-in and doesn’t leave room for changes after the fact. In such a case you’re stuck redoing the process : /