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

[Acorn]

It works in both XDP X19 and Firefox. SUPER

One of many, I hope.

Acorn

[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: anime.js - ProX19_Test.xar

Thanks

[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: 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:

<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

[Initiostar]

Many thanks Acorn and fully understood.