1 Attachment(s)
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
Re: Setting up better Animations
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?
Re: Setting up better Animations
Watching those animations for too long, I become unhinged! :-)
Wow, Acorn, nice work! Thanks!
Re: Setting up better Animations
@Acorn
Thanks for sharing - great guide on animations.
Gary
Re: Setting up better Animations
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
1 Attachment(s)
Re: Setting up better Animations
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.
- ISSUE#1: What was lost was the firing up of the animation when the shape came into view.
- 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:
- (Xara) Utilities > Web Animation > Reveal/Scroll > Reveal animation > Animation: Fade In & Zero Speed.
- (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:
- (Xara) Utilities > Web Animation > Reveal/Scroll > Reveal animation > Animation: Rotate/fade up right & Speed: 1s.
- (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
Re: Setting up better Animations
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
Re: Setting up better Animations
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
Re: Setting up better Animations
1 Attachment(s)
Re: Setting up better Animations
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:
- They need to be with an object that has a Link.
- This can be #
- This is better as javascript:;
- It can be a real link
- It can be an object with a Xara animation in place
- That object cannot be a Placeholder (but can be one with an animation that is then made into a Placeholder - @Xara - go figure!
- 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:
- xr_0a_0 to xr_0a_13
- xr_1a_0 to xr_1a_13
- 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