Skip to main content
3december
3december
Known Participant
December 21, 2020
Answered

hover state component & auto-animated animation with multiple artboards

  • December 21, 2020
  • 2 replies
  • 1587 views

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

This topic has been closed for replies.
Correct answer Spas K.

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.

2 replies

Spas K.
Spas K.
Community Expert
December 22, 2020

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
    3decemberAuthor
    Known Participant
    December 22, 2020

    Thx for your answer !

    Rishabh_Tiwari
    Community Manager
    Rishabh_TiwariCommunity Manager
    Community Manager
    December 21, 2020

    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
    3decemberAuthor
    Known Participant
    December 22, 2020

    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.
    Spas K.Correct answer
    Community Expert
    December 22, 2020

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices