Setting up better Animations

This is going to be a mini-series.

Episode 1 is Attachment 129754

GaryP has bemoaned the lack of exact timing control.
This example has duration and delay down to the millisecond.

GaryP also questioned, as I do, what Xara's solutions are all placements.
Do advise if any Reveal animation actually disappears.
If you use hinge and the pageXYZOs, then we have a built-in, but unaccessed, solution.

The principle is that Xara dials in ani.css with any animation.
You may have to add <link rel="stylesheet" href="index_htm_files/ani.css"> into Website HTML (code (head) if you are not using any animation at present.
This is over 6-years stale and needs a refresh. [Another Episode]

I have listed all of the keyframe names (Animation), which you can add as ClassNames along with animated to get a basic animation going into a special htmlclass="..." Name added to the shape.
Xara used other ClassNames for duration from 0.1s to 5s (xr_ad01 to xr_ad50); these can be part of the htmlclass.

I have augmented the duration with a ClassName of ani_time, where a fixed value can be saved that suits your design.
Ditto for a delay: ani_delay.
You can extend these to other values.
These are also saved in Website HTML (code (head).
They are appended to the htmlclass, everything separated by spaces.

I placed GaryP's special shape in a hidden layer, so you could read the detail it is covering.

The Replay button is not part of the reading in this Episode. [Maybe later]

Acorn

Heh heh. Awesome, Acorn.

So, Rob-Xar if you see this, how hard would this be to implement? I guess it is a matter of how it works with the existing code?

Watching those animations for too long, I become unhinged! :-)

Wow, Acorn, nice work! Thanks!

@Acorn

Thanks for sharing - great guide on animations.

Gary

Quote:

---

Originally Posted by Initiostar

@Acorn
Thanks for sharing - great guide on animations.
Gary

---

Cheers Gary

Those who are interested may have stopped these all fire up immediately on the page loading.

Next Episode will 'reveal' all.

Acorn

EPISODE 2

Episode 1 covered a little background as to how Xara has implemented CSS animations.
We covered how the existing code could be directly accessed through using the ClassName htmlclass in Utilities > Names.
A went a stage further by assigning a ClassName to a shape and placing its CSS code into Web Properties > Website > HTML Code(head).
So for one shape we had:

• Name: htmlclass="animated hinge ani_time ani_delay"
• Website > HTML Code(head):
  
  • .ani_time { animation-duration: 25317ms; }
  • .ani_delay { animation-delay: 2392ms; }
  
  
• The timings were arbitrary to demonstrate how granular our control could be.
• You could also use Xara's duration ClassNames: xr_ad01 through to xr_ad50.
  
  • Xara has never allowed accurate timing control through its use of a slider to set the duration.

---

1. ISSUE#1: What was lost was the firing up of the animation when the shape came into view.
   
2. ISSUE#2: We also traded out the animation-timing-function used by Xara.

---

ISSUE#1
Xara uses coding to deliver the concept of an Intersection Observer. As this code exists, there is no need to develop one all over again.

We therefore need two Dialogs open to achieve this:

1. (Xara) Utilities > Web Animation > Reveal/Scroll > Reveal animation > Animation: Fade In & Zero Speed.
2. (Bespoke) Utilities > Names > Apply name: htmlclass='...'.

The animation effect in #1 is played quickly, followed by your override in #2.

If you prefer, use the same animation in both #1 and #2 as then only your longer duration will override the timing set in #1.
ISSUE#2 is still occurring, which is why I prefer Fade In & 0 as a first approach.

Do experiment with Mixing and Matching. Try:

1. (Xara) Utilities > Web Animation > Reveal/Scroll > Reveal animation > Animation: Rotate/fade up right & Speed: 1s.
2. (Bespoke) Utilities > Names > Apply name: htmlclass="animated slideInRight xr_ad50".

---

ISSUE#2
Our third Dialog is Web Properties > Website > HTML Code(head), used the once and containing:

<style>

.EaseIn { animation-timing-function: ease-in; }

.EaseOut { animation-timing-function: ease-out; }

.EaseInOut { animation-timing-function: ease-in-out; }

</style>

You can now simply include (EaseIn, EaseOut, EaseInOut) in the htmlclass construction.

All the tweaks have been added to the Red shapes:
Attachment 129802

Acorn

this looks good; to me it seems a lot of work, but that is surely because I don't relate to HTML animation; the way i do animation with timelines rotation pegs and tweening/morphing is no less technical

Quote:

---

Originally Posted by handrawn

this looks good; to me it seems a lot of work, but that is surely because I don't relate to HTML animation; the way i do animation with timelines rotation pegs and tweening/morphing is no less technical

---

Cheers handrawn, it is complicated because Xara wrapped it all away so tightly.

For web animating of anything, the best package I know of is GreenSock.
I have never invested in it but I am thinking in going for Club GreenSock > ShockinglyGreen when I can afford it and have a spare year to use it. xara ought to consider it too.

Acorn

Thank you Acorn.

EPISODE 3

In Episode 1, in the attached file, CSS - Controlled Animations.xar, I posed the question:

Quote:

---

Testbed
•Tell us if you can get Animations #1 through #14 (tr0 to tr13) to do anything.

---

Rather than dwell on it too long, the detail is demonstrated in Attachment 129806.

tr0 through to tr13 have simple but special needs:

1. They need to be with an object that has a Link.
   
   1. This can be #
   2. This is better as javascript:;
   3. It can be a real link
   4. It can be an object with a Xara animation in place
      
      1. That object cannot be a Placeholder (but can be one with an animation that is then made into a Placeholder - @Xara - go figure!
   
   
2. Because of the need for a Link, their action is on a hover event so tr0 to tr13 need to be invoked with either of these matching ClassNames:
   
   1. xr_0a_0 to xr_0a_13
   2. xr_1a_0 to xr_1a_13
   
   
3. Finally, each needs to have a duration: xr_ad01 through xr_ad50 or a bespoke one.

What each transition does is what you can now check.
The Joker is 0 and the other cards are 1 through 13 to match tr0 through tr13.

Although these are a bespoke addition by Xara into ani.css, the ClassName animate is not necessary; it is technically not required at all but I have been using it as a cue word.

Enjoy.

Acorn

Still trying my hardest to follow Episode 1 Acorn. I'll get there in the end. Thak you, this is a lot of work for you :)

EPISODE 4

This is quite simple: you can run Animations back-to-back with careful use of the animation-delay property.
This level of granularity requires CSS coding that would be over-complex trying to squeeze into a Name value.

The displayed code is in Website > HTML Code (head.
The ClassName (htmlclass="inforapenny") is all that is required for the Name value for the image. Note, ClassNames are case-sensitive so 'inForAPenny' would not work.

Attachment 129812

The animation and delay of each effect are comma-separated.
The duration can follow the animation-name with something like 3.2s or 473ms.
for fuller explanation on all animation properties: https://www.w3schools.com/css/css3_animations.asp.

Acorn

You're cooking on gas Acorn. I can't keep up with you!

Just to ensure you know we are here and following you, here's my experimenting with your great input.

Quote:

---

Originally Posted by Egg Bramhill

Just to ensure you know we are here and following you, here's my experimenting with your great input.

---

I think you have it Egg!

The off-page button is not needed as you have applied a SlideinLeft animation to the LB shape.
Neither is the link to ani.css for the same reason.

To get the others to replay on "reveal", I might add FadeIn&0 to UL, UR & BR shapes as well.

I would use the full property presentation when adding multiple animations, otherwise
{ animation: pageRotateFlipBI 2.5s ease-in-out 0s 1 forward; } works well.

I can't wait until you start tweening with keyframes.

Acorn

Quote:

---

I can't wait until to start tweening with keyframes.

---

You can't wait until......?

I tried the link to ani.css in the head first and this didn't work but I forgot to remove it.
The button worked prior to giving me giving it a reveal attribute.

Egg, I entered 'to' instead of 'you'.

Corrected in OP.

Acorn

EPISODE 5

This is all around handling mousing out of an animation; Xara's approach chops it dead so it is very abrupt and disconcerting.

The CSS Code in the example file, Attachment 129866, adds an animation into default ClassName and a different one into its :hover pseudo-attribute.
All prior constructions still apply.

The end result is chaotic but harder to force jumps.

A further example to implement:

Quote:

---

.HeadShake {
animation: headShake;
animation-duration: 3.27s;
animation-iteration-count: 2;
}
.HeadShake:hover {
animation: heartBeat;
animation-duration: 1.62s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-fill-mode: forwards;
background-color: green !important;
}

---

This throws in an immediate hover colour change, which could have been set up as a slower transition by adding ' transition: all 5.37s;' at the end of the first-bracketed HeadShake code.
All timings are random and there for you to tweak.

Acorn

Acorn, I'm just today looking at the posts in this thread and at the files you attached. This is really an awesome way to "force" the Xara software to do precisely what you want. Thanks, kudos and congrats!

Acorn, your development in this thread is impressive and very useful. I had the opportunity to experiment with it for a while yesterday so that I could grasp the potential.

I have a couple of concerns if you’re willing to entertain them.

I have been using Xara’s built-in animation effects on the website I’m developing, specifically reveal animations. Some of them include triggers, and all of them are set to reveal “Once only”. As best as I can determine using your method, both of these features still require use of the Web Animations dialog box.

For the trigger feature, I selected the animation set to “Instant”. The result is that the specifications set up through CSS classes that you developed work without interference. Using animation-iteration-count (as in your inforapenny class) does not stop the reveal from repeating if the element moves out of and back into the viewport. The trigger function undoubtedly relies on a JavaScript Intersection Observer meaning it would be more complex to extract it from the Xara set up and use the “manual” approach that you gave us.

I don’t know if the reveal “Once only” feature relies similarly on JS, or if it could be accomplished through CSS. I was able to get the desired effect by using the Web Animations dialog and selecting the same reveal function specified in the htmlclass name (e.g., FadeIn) with Speed (and Delay) set to 0s. As I think you point out in the thread somewhere, the times defined in the named classes override the times in the dialog and the reveal works perfectly. Fortunately, the “Once only” feature is entirely compatible.

Are either, or both, of these issues part of your Setting up better Animations initiative? It would be quite powerful to be able to eliminate the Web Animations function from our Xara sites entirely and rely on our own coding.

Again, thanks for the effort and great results.

Quote:

---

Originally Posted by gcellison

Acorn, your development in this thread is impressive and very useful. I had the opportunity to experiment with it for a while yesterday so that I could grasp the potential.
I have a couple of concerns if you’re willing to entertain them.
I have been using Xara’s built-in animation effects on the website I’m developing, specifically reveal animations. Some of them include triggers, and all of them are set to reveal “Once only”. As best as I can determine using your method, both of these features still require use of the Web Animations dialog box.
For the trigger feature, I selected the animation set to “Instant”. The result is that the specifications set up through CSS classes that you developed work without interference. Using animation-iteration-count (as in your inforapenny class) does not stop the reveal from repeating if the element moves out of and back into the viewport. The trigger function undoubtedly relies on a JavaScript Intersection Observer meaning it would be more complex to extract it from the Xara set up and use the “manual” approach that you gave us.
I don’t know if the reveal “Once only” feature relies similarly on JS, or if it could be accomplished through CSS. I was able to get the desired effect by using the Web Animations dialog and selecting the same reveal function specified in the htmlclass name (e.g., FadeIn) with Speed (and Delay) set to 0s. As I think you point out in the thread somewhere, the times defined in the named classes override the times in the dialog and the reveal works perfectly. Fortunately, the “Once only” feature is entirely compatible.
Are either, or both, of these issues part of your Setting up better Animations initiative? It would be quite powerful to be able to eliminate the Web Animations function from our Xara sites entirely and rely on our own coding.
Again, thanks for the effort and great results.

---

gcellison, you certainly appear to have wrestled the problems securely onto the canvas. What I have been trying to do is liberate the Xara strictures around Daniel Eden's Aminate.css: the lack for accurate timing and the means to have separate mouse in and mouse out events; all still controlled through CSS coding.

I effectively admitted that I am dependent on Xara's coding to handle reveals & triggers. I felt to do other might result in a clutch of JavaScript that is too fragile for production. If CSS goes wrong, it usually just does not work, all without destroying the page.

I therefore do recommend that for the Only once reveal option you set up FadeIn & 0s with Only once ticked and place your required Reveals as an htmlclass string or as a coded ClassName in Website Code (head).

For triggering, you create and place a trigger object on your page and give it some Name (anchor).
For the Reveal object, you set up FadeIn & 0s (with Only once ticked, in your case) and include the Trigger object name.

Both the reveal of an animation shape or a trigger object rely on something like the JS Intersection Observer with functions like observe(), unobserve() & disconnect(). Trying to implement similar and hook into the Xara deliverable would be burdensome.
I do like the flexibility of using a long object in Xara as a trigger so an animation or video is only every active when the trigger is in view. Xara's delivery of triggers is a mare's nest though.

Acorn

P.S. Still to come: Hover Actions & Using current Animate.css.

EPISODE 6

Xara's hover or Mouse-over animations are rather limited.

To achieve only a hover action, my approach requires the animation to be set up in CSS code but immediately paused (until hovering).
As we are using CSS, you can again chain any number of animation effects and timings together.

But as I have only been using CSS, there is no simple way to restart an animation so I have include a click action for the Blue box.

The simpler alternative is to hijack Xara's coding by setting up a Mouse-over animation but then overriding that with a ClassName that stops after its allotted time (times the number of iterations set).
In this case, unfortunately the Xara-set animation is the one that is dominant but you now have precise control over its iterations and timing (the Purple box swings despite the CSS code saying it should tada).
You may find a better alternative...

Attachment 129892

Acorn