Image Reveal using SVG Mask Animation

[Acorn]

Egg's SVG reveals are worthy (https://www.talkgraphics.com/showthr...-image-reveals) but rely on a lot of coding outside of the XDA.

Rather than a click event to launch, my SVG Mask is kicked off with a hover action.
Each animation is individually curated, like Egg's, but you can adjust the animation in many ways:

• The mask is a text character or phrase using any available font.
• Its start size can be invisible (0px) or it can be displayed small (e.g. © 2021, Fred).
• Its position is adjustable as it how it grows.
• The symbol punches a symbol-shaped hole through the mask.
• The mask can be a solid fill colour, with an opacity, or even a linear gradient.
• The transition time and style is also flexible.

SVG - Image Masking.xar

Each image has to exist in the design somewhere.
I placed mine in !Images and made it a pop-up layer so it publishes them.

Acorn

[gwpriester]

I like the wipe out as well.

[Acorn]

I like the wipe out as well.

Well, it beats Xara's approach.

Thanks.

Acorn

[Egg Bramhill]

Egg's SVG reveals are worthy but rely on a lot of coding outside of the XDA.

I totaly agree Acorn but my idea is to create svg's that are simple for any Xara user to drop in a placholder above any same sized photo and have a generic image transitions, with no need for them to follow the css behind the effect.

I did go through your excellent example and managed to get it working but I have to admit with my very little understanding of css I struggled

And once again the placeholder window shows it's weaknes as adding a symol to the code is no larger than a full-stop (period) and impossible to discern.

LINK

[Acorn]

And once again the placeholder window shows it's weaknes as adding a symol to the code is no larger than a full-stop (period) and impossible to discern.

Egg, you had a go and nicely too.

In-line SVGs are a separate object model to the main document but the CSS, which is only styling can still access it through the right selectors.

You cannot discern your added symbol as I set the initial font size to 0px to make it "impossible to see".
svg#image20 text {
font-size: 0px;
transition: 6s ease-out;
transform: translateY(0) rotate(0);
font-family: fontawesome;
}
The above code is simply saying make the 'fontawesome' symbol very small.

The pseudo-selector :hover tells the symbol what it is to become in its 6-second transition period:
svg#image20:hover text {
transition: 6s ease-in;
transform: translateY(0px) rotate(360deg);
font-size: 1000px;
}

Grow big to 1,000px and spin round clockwise once.

I left the transforms and translates in place in both the initial and the :hover so it would be easy to experiment.

Acorn

[Egg Bramhill]

Hi Acorn, maybe I'm misunderstanding you but surely the size of the font shouldn't effect the view of the placeholder code???

[Egg Bramhill]

I would have expected the placeholder code to look like below, where the Firefox symbol is reasonably viewable?

[Acorn]

Egg, my sincerest apologies. I now get what you're saying. I only played with some FA symbols and they showed.
I imagine the Xara text box cannot handle extended character sets.

Aeons ago, I suggested using TinyMCE to allow rich text formatting.
I work with Notepad++ and copy & paste in as otherwise the experience is dire.

Acorn

[wizard509]

I liked that Egg even though you struggled you did great.