1 Attachment(s)
Image Reveal using SVG Mask Animation
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.
Attachment 130566
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
Re: Image Reveal using SVG Mask Animation
I like the wipe out as well.
Re: Image Reveal using SVG Mask Animation
Quote:
Originally Posted by
gwpriester
I like the wipe out as well.
Well, it beats Xara's approach.
Thanks.
Acorn
Re: Image Reveal using SVG Mask Animation
Quote:
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 :o
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
Re: Image Reveal using SVG Mask Animation
Quote:
Originally Posted by
Egg Bramhill
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
1 Attachment(s)
Re: Image Reveal using SVG Mask Animation
Hi Acorn, maybe I'm misunderstanding you but surely the size of the font shouldn't effect the view of the placeholder code???
1 Attachment(s)
Re: Image Reveal using SVG Mask Animation
I would have expected the placeholder code to look like below, where the Firefox symbol is reasonably viewable?
Re: Image Reveal using SVG Mask Animation
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
Re: Image Reveal using SVG Mask Animation
I liked that Egg even though you struggled you did great.