Setting up better Animations

[Acorn]

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.

[Acorn]

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...

CSS - Animated Hovers.xar

Acorn