Thanks, Egg. Love your whale-to-rocket morphing animation!
Printable View
Thanks, Egg. Love your whale-to-rocket morphing animation!
Thank you Egg.
The code for my wavy bottom is quite simple:
How it works:Code:<script>
var ming = document.querySelector('#morphing').style.height;
var mer = document.querySelector('#morpher ').style.height;
var txY = ming.replace('px', '') - mer.replace('px', '');
anime({
targets: '#morphing svg path',
d: document.querySelector('#morpher svg path').getAttribute('d'),
translateY: txY,
duration: 5000,
direction: 'alternate',
autoplay: true,
easing: 'linear',
loop: true,
});
</script>
The White shape Named morphing morphs into the shape Named morpher. Line colour and size matter.
The morphing shape has a Mix Blend Mode of screen to hide the image under it as it morphs.
The morpher shape need not be visible; here, I gave it No Colour. Line width is ignored.
Acorn
Another from me: Attachment 133302
https://shared.xara.com/DCM51yOf2N
with a few embellishments:
https://shared.xara.com/ypp1SNPDjq
Acorn :cool:
Excellent, very mesmerising Acorn.
they are indeed... thoug it is a pity that in xara only the outlines morph and not the texture as well
Here's another
handrawn, you can but making SVG file masking work with what I was showing is quite tricky.
Here is a simple example that probably works across all versions: Attachment 133311
I used an online SVG, as bundling with a XAR is awkward for most to unpack.
It will not work in early Xara Preview (using IE) so use a real browser.
Change the width of your browser to see the how the mask displays the graphic.
You can look at https://www.w3schools.com/css//css3_masking.asp for ideas.
Most current browsers still require the vendor prefix -webkit-.
Acorn
good to know - I cannot view the xar file as I do not have the pro+
if it needs to be masked then I can see that being tricky, yes...
sorry I was ina hurry and took your file as a live example requiring pro+ as previous