Animating Background Behind Interactive Elements

New Here ,
Oct 21, 2021 Oct 21, 2021

Copy link to clipboard

Copied

Hi there,

 

I'm hoping to add some very simple, looping animation to a background in one of my projects. Essentially, I want the background image to pan from left to right, while interactive icons exist on the layers above that will direct to new artboards.

 

To do this, I've created a series of time-triggered artboards, throughout which the background changes position accordingly. I then set up the interactive elements—icons that are supposed to glow when hovered over, and direct to new artboards when tapped—and copy them to each of the artboards in the background animation cycle.

 

When I preview, the background animation looks right, but I lose any interactivity of the icons. If I disable the time-triggered cycle that causes the background animation, the icon interactivity is restored.

 

Is there no way to have both? A previous post I made dealt with a similar issue. is this just not possible with XD?

 

Any help is greatly appreciated! Thanks in advance!

Views

172

Likes

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 ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

In Xd, you can only have 1 action happening at a time. Your method of animating the background is an auto-animate transition between 2 artboards. Until it is finished, you can't perform any other actions. Since it's a loop, it never finishes, so you can never perform another action.

 

The feature you need is video embed for prototypes, which on Uservoice is marked as "started", and is the top requested feature, meaning it will come in a future update. Until then, you are better off just using a placeholder for the animation, and prototyping it in After Effects for the devs when they get to the implementation.

Likes

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
New Here ,
Oct 22, 2021 Oct 22, 2021

Copy link to clipboard

Copied

LATEST

Understood. Thank you so much for the help, and hopefully it is implemented soon!

Likes

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