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: Attachment 132181

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

It works in both XDP X19 and Firefox. SUPER

Quote:

---

Originally Posted by Spamiky

It works in both XDP X19 and Firefox. SUPER

---

One of many, I hope.

Acorn

@ 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: Attachment 132185

Thanks

Quote:

---

Originally Posted by Initiostar

@ 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: Attachment 132185
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

Many thanks Acorn and fully understood.