fade left to right in an animation

[yellowbird]

Looking for suggestions on doing a fade from left to right in an animation. I've attached my test xar. It works, but it isn't real smooth. Thanks.

[wizard509]

yellobird, I have been fooling around with for quite awhile and what I did was changed all the frames from 2sec to 1sec and it seemed to help smooth it out the wierd part is sometimes it previewed OK and sometimes I got preview movie. I'm sure others here can figure it out better than I.


Attachment 129551fade left to right animation 2.xar

[gwpriester]

Moved to Web Design chat.

My attempt attached.

This is another example where more control over time and fade would be a huge improvement.

[wizard509]

Thank you, Gary.

[Initiostar]

Quite difficult to do this but here goes: https://initiostar.co.uk/demo/Reveal/#xl_xr_page_index

Different approach using a supersite with a crossfade between pages and animation code borrowed from the 'supersite slider' [Website HTML (body) and HTML (head) ]

Left Animation.xar

I'd guess you could do this with code - have a static picture and an animated overlay where the opacity changes to reveal the picture from left to right (but I've not ventured there).

[Egg Bramhill]

I'd guess you could do this with code - have a static picture and an animated overlay where the opacity changes to reveal the picture from left to right (but I've not ventured there).

That's how I've done it Gary. I've placed a static image in Xara and overlaid it with a animated svg. It creates a far smoother animation plus a great file size saving.

@ Gary P yours is not the same animation Yellow Bird is after

DEMO

[Egg Bramhill]

Here's another example using the same technique:

DEMO2

[Acorn]

As the Thread has been highjacked as the OP was asking about smooth Xara Animations and not web solutions using Supersites or SVG, my highjack is a CSS solution that is fairly generic.

Some transparent(-ish) blob is given a filename of mask(.png / .webp).
A Placeholder then animated this mask over a static other blob.

I made it repeat on a 10 second timer.
The mask can be set to move in any direction.

CSS - Sliding Mask.xar

Acorn

[handrawn]

ok, animator speaking here: I looked at your animation and the reason it is not smooth is that you have not synced the transparency gradient of your image with the timing of your frame sequence; the fact that xara will not allow you to create this on a timeline, or tweak the easing in/out of the frames, or tween/morph trransparency does not help

you could take a piece of paper and a pencil and work out the ideal ratio between gradient slope and timing interval and adjust your image and frame timing accordingly; but if this is for web, I guess the alternative solutions posed here from the webmasters would be better, easier and simpler

[yellowbird]

Thanks everyone. Attached is the video it is for - 2nd section(had to put it in real low quality to upload here).SCLERODERMA AWARENES540.mp4 I have a lot of work to do on it yet.