anime.js - Slideshow

[Acorn]

This is a very simple but versatile slider.
I do, however, need to work out why I have to add an SVG shape to trigger it to work.

I have a collection of boxes with a Bitmap Fill of each image.
All have a special Name of htmlclass="photo".

To avoid an abrupt transition at the end of the loop, I have cloned the topmost image, removed its Name and pushed it to the bottom of the stack.

To change the animation, I used simple number arrays to transition the opacity, size and rotation.
You can alter all of these with a varied transform-origin to get zoom ins from the centre or edge, or even flips and spins.
You change the showtime value to determine the timing.

The quirk is the small Red Line, top left of the images that I had to add to fire up the animation.

Demo: https://shared.xara.com/JHj0oTO04U
Design: anime.js Slideshow.xar

Acorn

[Egg Bramhill]

That has a lot of promise, perhaps a circular reveal rather than one image one above the other. It would make a very interesting slideshow. I've experimented a bit but not perfected it at present.

[Acorn]

Thanks Egg, I've tried a circular 400px dia reveal with:

<style>
.photo {
opacity: 0;
transform-origin: 0 0.5;
}
</style>
<script>
var showtime = 3000;
var carousel = {
targets: '.photo',
opacity: [0, 0.85, 1],
rotateY: [270, 360],
scaleX: [0, 0.5, 1],
scaleY: [0, 0.35, 1],
translateX: [-800, -600, 0],
delay: anime.stagger(3 * showtime),
easing: 'easeInQuad',
duration: showtime,
loop: true,
}
anime(carousel);
</script>

My changes are in red.
The images have to be forced to be PNG as well.

Acorn

[Egg Bramhill]

That's great too but here's more along the line of my thinking. The start/end image would need more of a code clean-up.
LINK

[Egg Bramhill]

Here's another way to use this anime:

LINK

[gwpriester]

Acorn - I love the simple elegance of the first slide show. Where do the photos go? Ah, wait, I see, the photos are stacked one on top the other. Cool. Thanks for this.

[gwpriester]

I'm missing something here. How do I add the SVG image. And why can't I select it in your example? And what is the function of the red line?

So near and yet so far.

[Acorn]

Thanks again Egg for the inspiration.

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

This still requires the thin red line but it is cut out of the animation itslef.

I put my images with an overlap so that they spin above the previous one and pause .
It is a never-ending Escher staircase.

One thing I didn't mention and it's quite useful for sliders, if you open another tab and then come back to the slider, you find it has been paused all the time you were away.
Saves on computing power and stops the end viewer missing out as your image sequence might be significant.

Demo: https://shared.xara.com/BgmEHQ4LQN
Design: anime.js Spinning Circular Slideshow.xar

Acorn

[Initiostar]

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: anime.js Slideshow-3_test.xar - I'll have to wait for the Magix upgrade to see anime.js for real.

[Egg Bramhill]

Maybe the images were original PNGs?

Interesting Gary. Does the fly-in-buttons.xar work?