Setting up better Animations

[Initiostar]

@Acorn

Thanks for sharing - great guide on animations.

Gary

[Acorn]

@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

[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:
CSS - Controlled Animations II.xar

Acorn

[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

[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

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

[wizard509]

Thank you Acorn.

[Acorn]

EPISODE 3

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

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 CSS - Hearts Suit Animations.xar.

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