Hijacking Xara's Reveal Web Animations

[Acorn]

I covered that quite a time back but the limited response had me thinking it was toooo detailed.

Here goes again.

Xara uses a modified animate.css library for its animation effects.
It exposes 49 animations.
The application actually has access to 153 animations; eleven others are for page transitions.

This Thread allows you to experiment with all 153.

---

A Reveal animation renders through a ClassName (animated) that is added to a wrapper together with the actual Effect (a small subset of the 153) as the specific Animation. This is also a ClassName.
You see none of this.
Here, however, we are going to override the Animation ClassName with a home-grown ClassName. My naming of these is rwa001 through to rwa153; 'rwa' standing for Reveal Web Animation.

Each rwa invokes the Effect directly but adopt the delay and timing you have set up through the Xara UI for any one of the exposed Effects.
As there are so many, I have added them as a table in this Thread's second Post.

---

These are the Steps you follow:

1. Select your object.
2. In Utilities > Web Animation > Reveal/Scroll, set to Reveal animation.
3. Pick any Animation, e.g., Fade In.
4. Set the Duration, Repetition and Delay.
5. Apply these settings.

OVERRIDE

1. Choose your required Effect from my Table. [hinge]
2. Copy its Special Name. [htmlclass="rwa040"]
3. Paste into the Utilities Name > Apply name Box > Add.
   
   1. This Special Name can be added to any number of objects on the page.
   
   
4. Copy its CSS. [<style> .animated:has(.rwa040) { animation: hinge; } </style>]
5. Apply to Web Properties > Page > HTML code (body).

---

Here is a screenshot:




Here is the design file: CSS-Hijacking Xara Reveal Web Animations.xar
Change the rwa value and match its CSS code to experiment further.

Note the Xara limitation on the delay, duration and repetition.
We'll leave that for another day.

Acorn

[Acorn]

The table was too big for TG.

Here is a Xara file instead: Xara-List of Reveal Effects.xar

Acorn

[Acorn]

Here is the same data in a special Xara template that renders as a pure HTML Table with no Xara frills: Xara-HTML Table of Reveal Effects.xar

Acorn

[gwpriester]

Not sure why you saved that a 20% zoom unless to show how many entries there are.

If I were still involved in web design this would be very useful.

[Boy]

Here is the same data in a special Xara template that renders as a pure HTML Table with no Xara frills: Xara-HTML Table of Reveal Effects.xar

Thanks, but now you have to give us live samples of all 153 animations....

[gwpriester]

Thanks, but now you have to give us live samples of all 153 animations....

[Acorn]

Thanks, but now you have to give us live samples of all 153 animations....

CSS - All the Animations.xar

Acorn

[gwpriester]

Oh my.

[Acorn]

Not sure why you saved that a 20% zoom unless to show how many entries there are.
If I were still involved in web design this would be very useful.

Firstly, a gut instinct, hoping people would Preview immediately.
Secondly, to show a lack in Xara not offering a mechanism to order and filter large table data.
Thirdly, I had been testing Shift+Ctrl+P would still work.

Acorn

[Egg Bramhill]

Ah, you did my eyes in, I'm blind now!

Excellent work. I tried it with 3 shapes and it was fairly easy to follow using your instructions.

Thanks Acorn