hover state component & auto-animated animation with multiple artboards

Community Beginner ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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

TOPICS
How to

Views

303

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Dec 22, 2020 Dec 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 wa...

Likes

translate

Translate

Translate
Adobe Employee ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 22, 2020 Dec 22, 2020

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

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.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Dec 21, 2020 Dec 21, 2020

Copy link to clipboard

Copied

Thx for your answer !

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines