HTML, CSS, JS

[handrawn]

and yet there is so much more to a successful website, especially a commercial one, than just publishing something

[handrawn]

maybe I should just be drawing stick figures

[handrawn]

and there will always be a need for stick figures...

not arguing with you joe, but this is a xara web design thread, it is about xara web design using the xara programs; there will always be other ways of doing things

[Egg Bramhill]

From Acorn: I find most coding on-line is clunky and not best suited for the Xara environment.....

I must admit that your anime.js code is far easier to use Acorn. I tried for a few hours getting the Chris's link to the CodePen before / after to function correctly in Xara.

I found yours far easier to use and it only required the width of the slider placeholder to be amended to the image width. Excellent!

LINK

[Acorn]

@Egg, thanks.

Acorn

[Egg Bramhill]

And it works on touch screens too. Kudos.

EDIT: Perhaps not. Maybe the slider needs to be larger?

[Chris M]

You guys are so quick. I'm still 'ooh, if I change 0% to 100% the transition goes vertical.' Not even thought about variants.

I agree that Acorn's solution is much, much smaller, making it easier to try and follow. I'm going to play around to see if I can understand what's actually happening, but will probably return with hair-splitting questions that don't really matter.

[Chris M]

I found lots of ways to break it and a few ways to adjust the speed of the slider controls, which I promptly reset.


I moved the 'Website Head' code to the 'Page Head' as that makes more sense to me, and removed the <style> section that creates the shadow.

Adjusting the percentages in 'clipPath' (Page/Body) has interesting results.
I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around. I tried 'rotate' and 'fade' but that just broke it.
Likewise, 'direction' is set to 'forward' which makes you presume 'backward' would do something, but no, no it doesn't.


I would like to play around with the look of the slider control. Changing the circle to a diamond, changing the colour etc. I can't determine any reference to the shapes that form the control.
I can make the circle start in different positions by editing, SLIDER Placeholder/Body under value=, but it doesn't reveal the after pic until you click it.
These are just things I would like to play with and are not important.


Lastly. I have no idea what your icon, with <svg><path></path></svg> in the Placeholder/Body does. It's clearly needed in the page area...but why?

[Egg Bramhill]

Hi Chris,

I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around.

Link to js easing types below.

It's fun to see the results but the problem is the easing effects the images but not the slider.

Demo using easeInOutBounce

js easing types

[Acorn]

I found lots of ways to break it and a few ways to adjust the speed of the slider controls, which I promptly reset.
I moved the 'Website Head' code to the 'Page Head' as that makes more sense to me, and removed the <style> section that creates the shadow.
Adjusting the percentages in 'clipPath' (Page/Body) has interesting results.
I'm guessing, under 'easing', you can change 'linear' to other effects, but I don't know the language to play around. I tried 'rotate' and 'fade' but that just broke it.
Likewise, 'direction' is set to 'forward' which makes you presume 'backward' would do something, but no, no it doesn't.
I would like to play around with the look of the slider control. Changing the circle to a diamond, changing the colour etc. I can't determine any reference to the shapes that form the control.
I can make the circle start in different positions by editing, SLIDER Placeholder/Body under value=, but it doesn't reveal the after pic until you click it.
These are just things I would like to play with and are not important.
Lastly. I have no idea what your icon, with <svg><path></path></svg> in the Placeholder/Body does. It's clearly needed in the page area...but why?

@Chris M, I placed a fair number of examples of using anime.js in the TG Tag Cloud as nuggets.

The anime.js Library only needs calling up the once for a website so Website Head is correct.
If you add it to Page, you will fall into the habit of copying a page and forgetting the code was there.
Even if the animation is on another random page, the Website Head code ensure it will run.

.shadow was my preference over Xara's mucking about with page shadows.
It is not required in Xara Plus or in this example.

You need to understand CSS clip-path inset parameters (top-left - bottom right) format: https://css-tricks.com/almanac/properties/c/clip-path/.

For easing and direction, look at anime.js documentation: https://animejs.com/documentation/.

For CSS formatting of Range Sliders: https://freefrontend.com/css-range-sliders/ and https://uicookies.com/range-slider-css/.

I reported how <svg><path></path></svg> was needed for a Xara install of anime.js; even I am yet to discover the why.
If I hadn't, using anime.js, would be a lot less satisfying to use.

Acorn