Component State Sling States

Hey, sorry for the late reply. So you want to do two things at the same time - switch a button to it's selected state, and transition to a different state in the parent component. I'm afraid this isn't possible, as Xd won't allow two interactions to happen at the same time.

Another problem is you can't switch the parent component's state from an element that is inside a nested component. There would be a way to do it, but the radio states must be controlled by the master component, which will result in having 12 states on the sliding-QA component, and no nested components - only groups (you can still have the hover state ones).

If you decide to play with that, the interaction can be triggered automatically by including an empty lottie file in the selected state of any radio button, and adding an end of playback trigger to it that will switch the slider component to the second page.

A better way from a UX standpoint imo is to have a button that says "Next" appear at the bottom in the selected states, and when you click it - you will go to the next slide. This way if a user selects something by mistake, they will be able to change it before moving on.

And with all this in mind - there will probably be a drawback, that when you click next, or the slider switches automatically, for a split second the choice made on the previous slide will be reset, but that can be minimized with a quick transition and might be an acceptable compromise.

If conditional advance to the next slide (only if something is selected) isn't mandatory, you can skip all this and just have a next button that's always active, with the possibility of people moving to the next slide without having selected anything, which might be okay for the prototype and to just show the element / microinteractions.

Bad link please download this one:

https://www.dropbox.com/s/o5cjwheui4eta7e/testing01.xd?dl=0