IOS Screen Transition -or any custom transition- (aia)

Hello

I’ve been using Kodular for less than a year now and been loving exploring all the things that are possible to do with it :star_struck:

this will be the first time making some kind of contribution to the community… hoping it’s not the last so please go easy on me if I say something that it not very accurate, and of course make sure to correct me.

Some Notes First

  • This transition in not an actual screens switching transition that is not something supported by kodular, you only have 6 styles that most of them don’t look half decent…

  • this is not just one style of animation I’m just explaining the way to do it and then you customize it to anything you want.

  • I’M NOT AN IOS FAN…

Explaining the Idea

This depends on the same good old overlapping trick and some precise animations to position the screens in the write spots to be accessed on a button.

this it what it will look like when we’re done :point_down:

The Layout

You will need two vertical scroll arrangements, one being the main screen the other one is the secondary screen.

DON’T SET THE SECOND ARRANGEMENT’S HEIGHT TO "“FILL PARENT”

you also need two buttons on each screen to switch between them.

a good idea is to set the background of the second arrangement to a color -or white- just don’t keep it invisible, *unless that’s something you might find useful in your apps

You will need one extension called “TaifunTools” you can download it from here: App Inventor Extensions: Tools | Pura Vida Apps

this is an example of what it could look like (the .aia file is last thing below if you think you’re lost)

The Blocks

First we make the size of the secondary screen became the same as the whole screen, and then make it overlap using what this amazing man explained with the decoration block:

then we extract the exact screen width using TaifunTools .Density block and last but not least we move out the way with the animation utility tool

and just like that everything is ready to animate whatever style you like you can do
and to make the IOS style you just do something like this:

That’s It
hope it helps you be more creative and create awesome apps

the (.aia) file:
ios_transition.aia (72.3 KB)
the (.apk) file:
transitions.apk (5.3 MB)

16 Likes

Nice @Baraa_Awwad The transition is very smooth are perfect :blush:

Really the screen transition by arrangement is awesome & perfect too…:ok_hand::fire::fire::fire:

Great work @Baraa_Awwad :heart:

nice and smooth… :blush:

thank you for using the tools extension


Taifun
1 Like

Such an amazing tool to say the least :heart:

thanks… :heart:

I just figured out a way to overlap that makes this and every other way look unreasonably over complicated I’ll make a guide today :crazy_face:

how i can contact u mr.Baraa?

1 Like