Hijacking Xara's Reveal Web Animations

[Boy]

Attachment 135102

Thanks, Acorn! Now I need a doctor!

"Beware of what you ask for....."

[handrawn]

man, you are going to have to do something about that gate weave....

[Acorn]

Say, we want all of our page animations to have the exact same duration and happen after a known delay.
Not easy with Xara's UI and limitations on setting times.

As I mentioned, all Xara's Reveal Web Animations use a ClassName of 'animated'.

This time, I am hijacking the Duration and Delay timings that you can set to whatever in the Xara UI.

The additional CSS is minor:

<style>
.animated {
  animation-duration: 17346ms !important;
  animation-delay: 2381ms !important;
}
</style>

Here my timings are accurate to one millisecond.

Here is my updated design file: CSS-Hijacking Xara Reveal Web Animations II.xar

---

If you want to control individual timings for every Effect then you need to create separate ClassNames for each Duration and each Delay.
Try setting up a ClassName for 5678ms duration: htmlclass="dur05678".
For a delay of 2182ms - htmlclass="del02182".
I have padded out my timings to allow for up to 99.999 seconds. You can set any sensible time.

You will need to include your matching CSS:

<style>
.dur05678 {
  animation-duration: 5678ms !important;
}
</style>

<style>
.del02182 {
  animation-delay: 2182ms !important;
}
</style>

Clearly, unwieldly so you need to design yourself a website timing chart to minimise the number of required ClassNames and CSS.

To activate these properly, you need to create a Special Name that is a ClassName collection, e.g., htmlclass="rwa113 dur00416 del02621".

You now have a process and pick 'n' mix assembly for very fine control over your Animation Effects.

---

Xara does have its own Duration ClassNames that you can use as well: (e.g., htmlclass="rwa113 xr_ad40 del02621"; a puny duration of 4 seconds)

.xr_ad01 {-webkit-animation-duration: 0.1s;}
.xr_ad02 {-webkit-animation-duration: 0.2s;}
.xr_ad03 {-webkit-animation-duration: 0.3s;}
.xr_ad04 {-webkit-animation-duration: 0.4s;}
.xr_ad05 {-webkit-animation-duration: 0.5s;}
.xr_ad06 {-webkit-animation-duration: 0.6s;}
.xr_ad07 {-webkit-animation-duration: 0.7s;}
.xr_ad08 {-webkit-animation-duration: 0.8s;}
.xr_ad09 {-webkit-animation-duration: 0.9s;}
.xr_ad10 {-webkit-animation-duration: 1s;}
.xr_ad12 {-webkit-animation-duration: 1.2s;}
.xr_ad14 {-webkit-animation-duration: 1.4s;}
.xr_ad16 {-webkit-animation-duration: 1.6s;}
.xr_ad18 {-webkit-animation-duration: 1.8s;}
.xr_ad20 {-webkit-animation-duration: 2s;}
.xr_ad23 {-webkit-animation-duration: 2.3s;}
.xr_ad26 {-webkit-animation-duration: 2.6s;}
.xr_ad29 {-webkit-animation-duration: 2.9s;}
.xr_ad30 {-webkit-animation-duration: 3s;}
.xr_ad34 {-webkit-animation-duration: 3.4s;}
.xr_ad38 {-webkit-animation-duration: 3.8s;}
.xr_ad40 {-webkit-animation-duration: 4s;}
.xr_ad45 {-webkit-animation-duration: 4.5s;}
.xr_ad50 {-webkit-animation-duration: 5s;}

There are none for Delays.

Acorn

[Acorn]

Here is how you repeat an Effect indefinitely: CSS-Heartbeat.xar

Change 'infinite' to a positive integer to stop the animation after that number of repeats.

Acorn

[Egg Bramhill]

Great stuff Acorn. Really fun and interesting to follow.

[Egg Bramhill]

Okay, I've made a site that contains all the animations so you can see more clearly what they do I hope.

LINK

[Boy]

Okay, I've made a site that contains all the animations so you can see more clearly what they do I hope.

LINK

That's very useful, Egg. Thanks! Must have taken you quite some time. Nice touch with the refresh button.

[Acorn]

Thank you Egg. Very helpful.

As you are using the same timings for all the Effects, there is a shortcut that I was going to next reveal (bad pun).

Now knowing the Effect Name (Xara-HTML Table of Reveal Effects.xar) you can add them directly as an HTML ClassName collection, together with the 'animated' Class: e.g., htmlclass="animated slideInUp".

Now when you set any Xara Effect in the UI, the two work together at the same time.
For instance, the addition htmlclass="animated pageIBR" would act on the object wrapper while the Xara Reveal Scroll 'Rotate / Fade In' acts on the object.

In this hijack the CSS is not needed except when you require precise or long timings.

Think of it as a Xara Effect with a parallel flourish. I find the Page Effects are the ideal adjuncts.

Acorn

[Egg Bramhill]

Hi Acorn, yes I set all animations to 0 delay & 2.5s duration. In the version below I have used your CSS to set it all to 0 delay & 6s duration.
I particularly like the iteration value which can set up flashing arrows which act similar to an animated gif. (Not included here.)

LINK

[bwood]

@acorn @egg you’ve outdone yourself. I always referred to that Xara demo site http://previews.xara.hosting/charity/ for a few ideas.
Many thanks for what you’ve done here. I can stumble through code from time to time but JS has always stumped me. I’m still chuffing on CSS.
Wouldn’t it be great if magically there were some little window that would open and you could preview just that portion of the animation in real time.
Thanks again.
-Bill