Welcome to TalkGraphics.com
Results 1 to 6 of 6
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Lightbulb anime.js - Test Card works in all XDAs back to v10

    Here is a simple animation to check anime.js will work in your Xara Desktop Application: anime.js - Test Card.xar

    It does nothing dramatic on purpose.
    If in Preview and you see the centre image rotate then SUCCESS.
    This is a thing that Xara has not managed to deliver as it never included 'repeat' or 'infinite' with its Animate.css implementation.
    Animate.css and anime.js are two very different beasts.

    For some reason anime.js seems to need any old SVG to be present on the page for it to work its magic in a Xara design.
    In XDA, other that XPro+, Xara-native SVGs are not available.

    My Acorn avatar is effecting that very thing for you.
    It is a Placeholder that replaces the image when published, exported or previewed with the following code: <svg><path></path></svg>.
    You could use <svg><path/></svg>, <svg></svg> or even <svg/>.
    Don't ask me why, it just works.
    I have tested back to Xara Photo & Graphic Designer 10 and it works.

    Drag the avatar off the page, no animation.

    Animations in the old Xara Preview work but are jerky so do check in a real browser.

    Making your own requires patience and some understanding of CSS and JavaScript; the effort is worth it.
    Search TG for my anime.js that are tagged 'nugget' - https://www.talkgraphics.com/tags.php?tag=nugget

    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

  2. #2
    Join Date
    Jun 2012
    Location
    CZECH
    Posts
    147

    Default Re: anime.js - Test Card works in all XDAs back to v10

    It works in both XDP X19 and Firefox. SUPER
    ____________________________
    __I am sorry for my bad English__

    P&G 10, 11, 15; XWD Premium 11,15; XDPX 15.1; XDPX 18.5; XDPX 19; XBuilder;

  3. #3
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,744

    Default Re: anime.js - Test Card works in all XDAs back to v10

    Quote Originally Posted by Spamiky View Post
    It works in both XDP X19 and Firefox. SUPER
    One of many, I hope.

    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

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

    Default Re: anime.js - Test Card works in all XDAs back to v10

    @ Acorn,

    I've been following the anime threads; Egg's line-drawing map is a great example: https://www.parkeston.com/tg/ as is the star wars text: https://shared.xara.com/EFxiJ3xsMb/

    The animation here works in ProXv19, but not for more than one object with the same name? Replicated the code, different name and it works as expected. Is the # in the name significant, or is this just a quirk of v19?

    Design File: anime.js - ProX19_Test.xar

    Thanks
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

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

    Default Re: anime.js - Test Card works in all XDAs back to v10

    Quote Originally Posted by Initiostar View Post
    @ Acorn,
    I've been following the anime threads; Egg's line-drawing map is a great example: https://www.parkeston.com/tg/ as is the star wars text: https://shared.xara.com/EFxiJ3xsMb/
    The animation here works in ProXv19, but not for more than one object with the same name? Replicated the code, different name and it works as expected. Is the # in the name significant, or is this just a quirk of v19?
    Design File: anime.js - ProX19_Test.xar
    Thanks
    Gary, HTML references an ID (target or anchor or Xara Name) with a leading hash(#).
    HTML only recognises the first ID it finds. That is why the second #circPhoto does not kick in.

    You could have combined IDs in targets: '#bbcGirlClown, #circPhoto', to achieve what you have currently achieved.

    To label more than one object, you would use a ClassName (Xara special Name of htmlclass="...").
    In your animation you would target your three images with targets: '.nono',
    I chose htmlclass="nono" as a label for them as they have nine sides.
    Pick a Name, any Name and the association would be htmlclass="anyName" & targets: '.anyName',
    A Class is identified by a leading full stop (.).

    All three will rotate at the same time.

    Use delay: anime.stagger(1262, {start: 3629}), to fire then individually every1.262s with the first kicking off at 3.629s.

    To fire them off in sequence , use a Timeline:

    Code:
    <script>
    var first = {
      targets: '#firstPhoto',
      rotate: 540,
      easing: 'linear',
      direction: 'alternate',
      delay: 2315,
      duration: 6250,
      endDelay: 405,
    }
    var second = {
      targets: '#secondPhoto',
      rotate: 360,
      easing: 'linear',
      duration: 6250,
      endDelay: 405,
    }
    var third = {
      targets: '#thirdPhoto',
      rotate: 1080,
      easing: 'linear',
      direction: 'reverse',
      duration: 6250,
      endDelay: 405,
    }
    
    var spinners = anime.timeline({});
    spinners
      .add(first)
    .add(second, '-=482')
    .add(third);
    
    </script>
    Each animation follows the next unless you set a relative start time (as in second) or an absolute one.
    This is covered in the anime.js documentation.

    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 2018
    Location
    Barnes, London
    Posts
    947

    Default Re: anime.js - Test Card works in all XDAs back to v10

    Many thanks Acorn and fully understood.
    Gary
    www.initiostar.co.uk


    Xara Designer Pro+ and Xara Designer Pro X 19.0.1.65946 DL x64 Feb 7 2023

 

 

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
  •