hover state component & auto-animated animation with multiple artboards

[3december]

Dear all,

Fairly new to adobe xd. I have a homepage of a website with a bounce animation on. THe bounce animation is build by auto-animate through multiple artboards. On the homepage I would like to have a hamburger menu icon with hover state. When my timed animation returns to the first artboard, my hover state is automatically converted to a default state.

Does somebody has a solution for this or do i have to change my approach?

Kind regards,
Xavier

[Rishabh_Tiwari]

Hi there,

Thanks for reaching out. Would you mind sharing a small video of what exactly is happening? We'll try our best to help you with it.

Regards

Rishabh

[3december]

Hi Rishabh,

Thanks for the quick reply. I uploaded the video. Here you can see the hover state of the hamburger menu icon. The 3 lines need to be under each other while hovering but in the end of the video you see that it's going to default state again because of the time triggered animation on the bottom of the screen.

ps: strange that we can't share video files from the adobe cloud library? Dropbox didn't worked for me either.

Kind regards,

Xavier

[Spas K. · Accepted solution]

I misunderstood your issue in my previous reply, as you posted this just seconds before me, but it's still the problem that you can't individually time-animate things without transitioning.

Your timed animation is between 2 artboards, and in both of them your menu component is in default state. So when you hover over it, it switches to hover, but the timed animation transitions it back to default. And because your cursor is still on it, it again goes to hover, and it loops on.

So with the way Xd currently works and its limitations, there's no way to have both things working perfectly in this particular case.

[Spas K.]

There are 2 problems.

1. Every time you switch to or away from an artboard, all the components on it are reset to their default states. That's just how it is. You can't store a state between artboards. So when you go back to the original artboard, the component state is reset to default.

The exception are overlays, which don't technically change the artboard, but put an artboard on top of the current one, so the states below are preserved, but we come to the second problem...

2. You can't use auto-animate between 2 overlays. You can only use a transition, which doesn't work for a nice loading animation or something else.

So I'm not sure if you can do anything about it right now. We have been waiting for the ability to embed videos and animated GIFs in prototypes for years now, which will solve this problem, sort of, but it's not there yet. All we can do is wait.

[3december]

Thx for your answer !