HTML, CSS, JS

[Chris M]

@Egg, I agree that when using a slider for comparing one image to another, effects like bounce wouldn't be a good choice. Linear and fade are the only two viable options I can think of. The examples are well worth keeping, even though I haven't been brave enough to wander too far into animation other than the Xara offerings.

@Acorn, Your explanation as to why Website/Head is used makes perfect sense - notes are being made.
The clip-path mention was me poking things with a stick to see what the percentages did.

The links I'll look into and have a play. I have to be honest and say that I don't follow/understand a lot of your tutorials, and selfishly only play with those I see a use for. I therefore miss a lot of the rudiments.

[Acorn]

@Acorn, Your explanation as to why Website/Head is used makes perfect sense - notes are being made.
The clip-path mention was me poking things with a stick to see what the percentages did.
The links I'll look into and have a play. I have to be honest and say that I don't follow/understand a lot of your tutorials, and selfishly only play with those I see a use for. I therefore miss a lot of the rudiments.

Chris, it doesn't bother me as I also started by poking things with a stick.

The before-after slider, I considered from first principles:

• Two stacked images.
• What CSS exists to crop - clip-path: inset().
• How to control - HTML Range Slider.
• How to manage programmatically updating - anime.js.

anime.js manipulates CSS numeric values.
It is a highly cut-down re-implementation of what jQuery can achieve.
I could have gone for straight JavaScript but the fun with anime.js is how you easily script different behaviours.
The manipulated object needed a handle so it gained a target (Name) of 'after'.

You can interrupt and hijack an animation with .seek().
The Range Slider does this with its 'oninput' in-line JavaScript.

The animation itself uses the update function call to move the Range Slider.

To understand anime.js better, you need to krok that is a collection of JavaScript statements in a framework to manipulate CSS values.
You need to have some knowledge of both.

For such stick-poking, i would use W3 Schools with searches like 'w3 css fade' or 'w3 js random'.

Acorn

[Spamiky]

Sorry if I didn't understand your discussion. Many years ago I bought this widget for £2. It works great.

https://www.benjaminmoses.co.uk/exam...fterwidget.htm

[Boy]

Sorry if I didn't understand your discussion. Many years ago I bought this widget for £2. It works great.

https://www.benjaminmoses.co.uk/exam...fterwidget.htm

Originally Ben Moses offered it for free to help out TG members.

[Acorn]

Originally Ben Moses offered it for free to help out TG members.

Bed Moses was a Xara employee and so leveraged his inside knowledge of the XDA to build a Xara Third Party Widget.
It probably still has fixed sizes and there is nothing to adjust.

It does its job.
My suggestion is simpler, if not better, and free.

Acorn

[Initiostar]

I like the flexibility with anime.js and you could style the progress bar with some research and practise. https://initiostar.co.uk/demo/anime-reveal/

The only drawback with the current Pro X19 (May 3) is we don't have 'Shapes as SVG' which was introduced in Pro + v21.6 (or I cannot find it).

[Egg Bramhill]

Here you go Gary on Xara Designer + v22:

[Initiostar]

Thanks Egg, that confirms that Pro X v19 does NOT have (as yet) 'Shapes as SVG'. Time will tell what comes next for Pro X.