Presentation - reverse reveal animation

[browj2]

Hi,

I'm working on a presentation and I want to have parts of a photo zoom in. I created an image for the part with a border. No problem getting the image to zoom/fade-in upon using the right arrow. What I want is for the image to unreveal (disappear using the reverse of the zoom/fade-in) upon pressing the next right arrow. Is there any way to do this?

The only way that I found was to duplicate the Presentation step with the background photo as the next step.

Thanks,
John CB

[gwpriester]

Try a rectangle the same color as the background and covering the photo and have it fade in. The effect will be the photo fading out.

[browj2]

Hi Gary,
Thanks for taking a look.

This image should help:


Step 2 reveals the image with the circle - it zooms in (Zoom/fade in effect). I just want it to zoom back out like it came in. As I indicated and as per what you said, I simply made step 3 the rectangular image re-reveal either instantly or fading in. But that is not what I'm looking for. I want step 3 to take the revealed image back out, the same way that it came in. If this were a fly-in, I would want it to fly back out the same way that it came in. Making the background reveal as Step 3 would not make the circular image fly back out.

It seems that Xara is missing a "reverse" option, or am I missing something here?

Edit: I should point out that the image above doesn't include what is outside of it, like text. The presentation window is larger.

Thanks,

[Acorn]

John, Xara has failed to provide anytime like this.
I have done it with CSS and anime.js.

Here is a Xara approach that might work for you: Xara - Contoured Step in Presentation.xar

I used a Contour to cover the pervious Line.
It is not a Fade Out but it does perform a web animation that is not unpleasant. To me, at least.

Acorn

[browj2]

Hi Acorn,

For my purpose, your solution is about the same as just bringing back the underlaying photo.

The equivalent in PowerPoint that I'm looking for is "Exit." There is also "Entrance" and "Emphasis." There is no emphasis or exit in Xara. Strange.

Thanks,
John CB

[Acorn]

John, it's not strange. Xara's approach of web animation fails, in most cases, to handle Exits. I did a full cover of CSS and mouse out effects to overcome this but handling keypresses is at a different level. I'll have another look.

Acorn

[Acorn]

John, I gave my shape below a Name of htmlclass="box".

In the Page Body, I added jQuery:

<script>
$(document).keydown(function(e) {
  if (e.which == '39') { //right arrow key
    $(".box:visible").finish().css('transition', 'transform 2s ease-in-out').css('transform','scale(0.05)');
  }
});
</script>

In your presentation on a right arrow press, the box shape will take 2 seconds to shrink down to 1/20 of its size.
Clearly you could set the scale to zero or just fade it away with $(".box:visible").finish().fadeOut(2000);

A simple test of the first: jQuery Shrink Away - Presentation Step.xar

It probably needs a Down Arrow (40) inclusion.

Acorn

[browj2]

Hi Acorn,

Thank you very much for that. I didn't understand anything...then I played with it and was able to make the green box disappear and a new yellow one appear and disappear. That is what I was looking for!

In the meantime, instead of Xara, I've been using PowerPoint as it's more suitable for the intended end use, and my wife is doing the presentation.

I will need this trick for future Xara presentations, however.

Xara has been very useful, as my wife wants the faces in some photos to expand to a zoomed-in image with a light border. Thank goodness for Clipview and LiveCopy.

Magix Movie Studio/Video Pro Travel Maps wizard has also been useful as she wants a map with an animated line and arrowhead going along some streets.

I'll post parts of the finished product in this thread in a day or so.

We do have some great tools!

[Acorn]

Magix Movie Studio/Video Pro Travel Maps wizard has also been useful as she wants a map with an animated line and arrowhead going along some streets.

John, @Egg demonstrated such an action with my use of anime.js, SVG line drawing, https://www.talkgraphics.com/showthr...s-Line-Drawing. His demo: https://www.parkeston.com/tg/.

To animate the arrowhead, I would run it with a motion path, https://www.talkgraphics.com/showthr...Path-Animation.

That all said, does XDPXv19 have SVG rendering yet?

Acorn