Export Auto-Animation to HTML

Web Export
1

Hi Everyone :wave:t4:

I’m very new to Adobe XD and its Plug-In “Web Export”, so I’m really interested in finding out, how to export a HTML File of an animated landingpage. I’ve created a parallax effect of a single Webside (2 Artboards - Before & After) and want to export it for our Webdesigner with the best possible settings - so he can easily adjust it and make it “webready”.
Couldn’t find something usable on Youtube, so it’s up to u - Thank u for ya help :slight_smile:

2

Hi Birdy,

Welcome to the forums! :slight_smile:

Web Export is a plugin that uses the built in XD API to do it’s thing. It was only recently that XD added the Auto-Animate API.

So animation support is coming and some support is starting to appear but it’s not all there yet. Features like fade in and fade out, and slides are mostly working (in dev builds).

If you’d like to post your XD project here or in a direct message I can get that to the developers to work on. And they can work on anything that’s not supported yet. Our developers love examples.

We don’t have any existing examples like that yet. But that’s the right workflow. You create the design in XD and then hand it off to the developer (the same XD project) and they wire it up. Or, of course, you can wire it up too or see how they wire it up and so on. It’s up to you.

Couldn’t find something usable on Youtube

Good point! Some demo videos on this would be useful!

3

Hi Velara Team,

thanks for your reply - very nice :slight_smile:
Aaaaah okay, so I stay tuned to every new Update and other news.
And many many thanks for your offer, but due to the fact that I’m working für a company, I’m not able to hand over these files to you.
Absolutely! I think there’s a big need for Tutorials like this - The only ones I could find were about creating Landingpages without exporting - Or exporting and then how to code the animation…

Greetings :wave:

4

An update. The Auto-Animate API is not open yet. So when that happens we’ll take a look and you’ll see an update here.

https://velara-3.gitbook.io/web-export/addressing-export-issues#prototyping

5

While auto animate support is in the planning stages we might put the animation properties in the CSS.

That means that when an element is exported the CSS for the element may contain an additional CSS variable like so:

.MyLogo {
    --animation: 1s fadein;
}

It would be possible to set the CSS animation property like so:

.MyLogo {
    animation: 1s fadein;
}

But if an element has an animate in and an animate out animation then that might get unexpected results.

An alternate might be to store the in and out animations:

.MyLogo {
    --animations: in, 1s fadein, out, 1s fadeout;
}

Or store all the animations:

.MyLogo {
    --animations: artboard1-in, 1s fadein, artboard1-out, 1s fadeout, artboard2-in: 1s fadein, artboard2-out, 1s fadeout;
}

But the animations don’t contain all the property changes like position and that may be a lot of info if you have a lot of artboards.

There is another option to store the property changes in pseudo classes or pseudo pseudo classes :

.MyLogo:artboard-1-in {
    animation: 1s fadein;
    top: 10px;
}

.MyLogo:artboard-1-out {
    animation: 1s fadein;
    top: 0px;
}

/** pseudo pseudo classes **/
.MyLogo_artboard_1_in {
    animation: 1s fadein;
    top: 10px;
}

.MyLogo_artboard_1_out {
    animation: 1s fadein;
    top: 0px;
}