Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 22
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Info Setting up better Animations

    This is going to be a mini-series.

    Episode 1 is CSS - Controlled Animations.xar

    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
    Last edited by Acorn; 05 June 2021 at 05:14 PM. Reason: Set duration classes to right detail: from tr01to tr50 to properly xr_ad01 to xr_ad50
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,488

    Default 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?

  3. #3
    Join Date
    Mar 2009
    Posts
    4,501

    Default Re: Setting up better Animations

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

    Wow, Acorn, nice work! Thanks!

  4. #4
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: Setting up better Animations

    @Acorn

    Thanks for sharing - great guide on animations.

    Gary

  5. #5
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Default Re: Setting up better Animations

    Quote Originally Posted by Initiostar View Post
    @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 - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #6
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

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



    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  7. #7
    Join Date
    Feb 2007
    Location
    UK
    Posts
    21,284

    Default 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
    -------------------------------
    Nothing lasts forever...

  8. #8
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Default Re: Setting up better Animations

    Quote Originally Posted by handrawn View Post
    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  9. #9
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Setting up better Animations

    Thank you Acorn.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,749

    Info Re: Setting up better Animations

    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
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •