Arrangement and fade-in or fade-out with visibility

[Didou12]

Hi

I understand Arrangement is better than Multiple screens, but I would like to have a cute animation between toggling visibility of the arrangement. I don't understand how to do that, I tried some extensions but doesn't work, the render is not so smooth.

Thanks

[ABG]

You could try using an easing function to roll up the incoming Arrangement:

Scott Ferguson Easing Demo

This is a republishing of this post https://groups.google.com/g/app-inventor-developers-library/c/CxnS_HxaaYA from the defunct Scott Ferguson App Inventors Deveopers Library in response to a recent request. Scott uses the term Easing to refer to Clock-driven animation of a change in the value of a variable over time. [Easing demo] EasingDemo.aia (121.4 KB) Designer: [image] About: See the examples in this project which use the easing javascript functions from this Github page: Simpl…

[TIMAI2]

@Didou12

I tried some extensions

Did you try Phase ?

This should have all the bells and whistles you may need....

[uskiara]

Hi @Didou12,
this is an old example I wrote, a long time ago, of what you can do with the extension suggested by @TIMAI2.

Probably it helps.
Cheers.

provafade.aia (1.4 MB)

[Didou12]

Hi

@TIMAI2 @uskiara
Thanks for all answers. My problem with Phase is the out of the element.
I can't manage to have a smooth render.

If I set a fade out on my visible element there is a problem because even if it's fade out, it always has his place in the screen. So all my design moves (because others blocks are under on the screen).

And if I don't set a fade out but a cut (so cut on out element and fade in for the in element), it's not very smooth.

So I don't know how to do.

@ABG
It seems really complex for my purpose

[uskiara]

Dear @Didou12 ,
the annexed new aia should do what you intend.
The rationale behind is: to have a "neutral" backgound image, that is shown when one screen has completely faded out and before the new screen begins to fade in. To achieve this effect a fade-in clock is set to start when the fade-out of one screen begins, and its period is set to the time of fading minus 200 milliseconds, so to start the fade-in slightly before the complete fade out ends.
Another thing to pay attenton to is the fact that you cannot play with the visible yes/no method of the arrangements but with their dimensions, instead.
A soon as the arrangement has faded out, it shall be "sqeezed" to dimensions 0,0 and before it has to be shown again, its dimensions shall be set to its 100% again.
In my aia you see fixed numbers, because those numbers are the horiz and vert pixels of my tablet, but you'd better use a relative percentage to make it suitable for any screen dimension.
In a nutshell: this is the "engine", now it's up to you to improve it
SmoothFade.aia (1.4 MB)

P.S. Once more, thanks to @shreyash for his "very impressive" extension...