anime.js - Slideshow

[gwpriester]

Egg - Acorns XAR files works. But when I substitute my images (properly named) it does not work.

[Egg Bramhill]

Hi Gary, I've just selected the images within your file plus the line (of which I've applied a 99% transparency) and redifined them as htmlclass="photo"

This works very well, I can even keep my eyes out of focus and see the images as 3D.

LINK

[gwpriester]

Thanks Egg. I can't figure out what I did wrong.

I named all my images and the red line except as Acorn suggested, a duplicate of the first image sent to the back of the pack.

I must have messed up somewhere.

BTW - DP+ reduces screen captures way small and I have not figured out what the secret % is for scaling them 1:1 (1:1 does not work)

[gwpriester]

So, what if I just want the most basic fade slideshow. One image fades into the next. 1.5 second intervals?

I prefer to have the images be the focus not the various distortions.

[Acorn]

Out of curiosity I had a play with Egg's file and to my surprise it worked with Pro X19, whereas the original does not. Maybe the images were original PNGs?
Added a bit of standard Xara animation too: https://initiostar.co.uk/demo/circles/
No idea why it should work: Attachment 132147 - I'll have to wait for the Magix upgrade to see anime.js for real.

Gary, XDPX19 possibly is working as you have used jQuery in the design. Hard to check as I do not have (or want) XDPXv19, but it could be serendipitous if that is the case.

The proper firing up of the animation would be javascript:anime(carousel).restart(); but this will not replay the Xara animation. You would have to uncover the Xara trigger for that.

Acorn

[Acorn]

So, what if I just want the most basic fade slideshow. One image fades into the next. 1.5 second intervals?
I prefer to have the images be the focus not the various distortions.

Gary, Egg pointed out the issue was with the htmlclass Name.

The simplest code becomes:

<script>
var images = [].slice.call(document.querySelectorAll('.photo')).s lice(1, 100);
var showtime = 750;
var carousel = {
targets: images,
opacity: [0, 1],
delay: anime.stagger(4 * showtime),
easing: 'linear',
duration: 2 * showtime,
endDelay: showtime,
loop: true,
}
anime(carousel);
</script>

Acorn

[gwpriester]

Thanks for this Acorn.

For those like me who totally missed this, the difference in the htmlclass name is I used Xara's default curly quotes vs the tick mark quotes. So my next question to stump the experts is how do I get the tick mark quotes?

Ah, hold on, I get it now. I copied and pasted my htmlclass="photo" and that caused the problem. So if I key in the same text instead of paste it in, then the quotes will automatically be correct and not curly quotes.