How to: Create sliding in text like...

[SueB]

I'd like to know how to do this, seen on this website, where the text as you scroll down or "view" slides in.

https://www.makomla.org/about

It's a "wix" site but I know Xara can do this, just not sure how to do it.

Thanks...
Sue

[gwpriester]

Web Animation > Reveal > Slide in from Left.

That help?

You can also add a Trigger object. This delays the animation until the trigger object is visible.

A trigger object can be anything and can be the same color as the background.

Name the object, in my example test-trigger, then designate this trigger object in the Web Animation dialog

[Acorn]

Sue, there is no such beast in Xara.
Xara uses an old CSS library animate.css, with its own modifications.

All the In/Out effects from top, bottom, left or right use a transform with a 100% value.
This, in the end, becomes a run-in from 1000px.

Back in the days, 1000px was a large website so it would always appear if it started at the edges.

What you are after is a more gentle run-in.

I have build an Animation effect just for you: the SueB FadeInUp animation.

Here is a demo file: CSS - SueB FadeInUp Animaion.xar

You add a Name of htmlclass="sueB" to a shape.
You ensure the code is in the website code Head.

You need not use the ClassName shadow; it was there so I added it for a separate test.
You can alter the entry speed and the displacement - the bits in red.

Acorn

[gwpriester]

sigh

[Boy]

Nice effect, Acorn!

[SueB]

Yes, I think this is great. I did try it. It looks great on the computer version but the mobile, as you land right onto that spot, doesn't particularly look as good.

Thanks...any hints on making it better on the mobile? Maybe no slider?

[SueB]

Wow, that is lovely, Acorn! Wonder if I am that savvy to do it..sigh! Thank you so much for making this the way you did. Wonderful to learn and "seeing" it in action helps more than you know!l

Thanks!

[Acorn]

Yes, I think this is great. I did try it. It looks great on the computer version but the mobile, as you land right onto that spot, doesn't particularly look as good.
Thanks...any hints on making it better on the mobile? Maybe no slider?

Sue, I saw no Variant difference. Perhaps you can explain?

Acorn

[gwpriester]

On a cell screen you have a lot less real estate.

[Acorn]

On a cell screen you have a lot less real estate.

Gary, the move is all of 30px , which is tiny - two lines of text. Enough to be visible.

Acorn