How to animate layout Changes Using a transition?

Hello Koder,
I searched the community for this topic but Unfortunately could not found any related topic.
How to animate any layout Changes Using transition ?
When we change any property of layout it takes affect in an instant, such as Height, Width, Position, Colour etc.
Like below
1_U7XJhOBDtwKhMpUPnFO6dQ

But how can we give it a smooth look with transition.
Like some below.
1_6BEdt24UippvRjRNgUjZbQ

QQVcWou.png

animate_button

aPm7Q

There should be some Duration Property while performing the function.

Please do share if you have any extension.

I added a question mark to your topic title because without one it seems like you are providing a guide instead of asking for assistance. In future please ensure your topic titles are clear and not just clickbait.

Ya I will take care. It was a typing mistake, Thanks for editing.
But, Just leave it, let’s talk about the topic did you have anything related to this @deanart2012

I tried it with a slider Component, using on ‘thumb position change’ parameter.
But it needs physical touch, For that I created a looping procedure which adds +1 to the value of thumb position after 30-50 microsecond.
Again, This do not give smooth look and I cannot go below 30 as app crashes.

Try using Phase Animations. These animations are customizable to implement your idea.

1 Like

I am already using the great Extension, But the topic is a little bit different. Moreover how can we animate the position, and size with phase. As it can be seen in the images.

How about using the Animation Utilities in the Kodular Creator. I think this has the features you mentioned in the sample picture.

Yes, Thank you So much for bringing it to my notice. But I was expecting to animate the change in width/height as in image 2.
Smooth Contraction and Expansion.