Animating Background Behind Interactive Elements

Question

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!

Spas K. · Answer

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded