Phase • Animations made easy!

Adding animations to apps made with Kodular had never been an easy task. Even though we have a dedicated component, Animation Utilities, for animations in Kodular, it was never that easy to use. That’s why I thought of creating Phase as my first extension. :sunglasses:

Introducing Phase


Phase is powerful yet an easy to use animation extension. It makes it possible to animate any View/UI component on the screen. So, no matter if it’s a simple label or a vertical arrangement containing a complex group of components, Phase has got them all covered! :wink:

Blocks

Phase features a total of 9 main blocks (excluding 68 property-type), which are as follows:

  • component_event1

  • component_event2

  • component_event3

  • component_event4

  • component_event5

  • component_method

  • phaseM2

  • component_method

  • component_method%20(1)

  • And 68 property-type blocks which returns the technique with which Phase should animate the given component. As of now, there are 68 techniques, subcategorized into 8 categories as follows:

Category Available techniques
Attention Flash , Pulse , RubberBand , Shake , Swing , Wobble , Bounce , Tada , StandUp , Wave
Special Hinge , RollIn , RollOut , Landing , TakingOff , DropOut
Bounce BounceIn , BounceInDown, BounceInLeft , BounceInRight, BounceInUp, BounceOut , BounceOutDown, BounceOutLeft , BounceOutRight, BounceOutUp
Fade FadeIn, FadeInUp, FadeInDown , FadeInLeft, FadeInRight, FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp
Flip FlipInX , FlipInY , FlipOutX , FlipOutY
Rotate RotateIn , RotateInDownLeft , RotateInDownRight , RotateInUpLeft , RotateInUpRight, RotateOut , RotateOutDownLeft , RotateOutDownRight , RotateOutUpLeft , RotateOutUpRight
Slide SlideInLeft , SlideInRight , SlideInUp , SlideInDown, SlideOutLeft , SlideOutRight , SlideOutUp , SlideOutDown
Zoom ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp, ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

How To

To animate any component, just call the AnimateComponent method and pass the required parameters.

Param Info
id int: A unique number which is used to indentify the specified component when an event fires.
component AndroidViewComponent: The component that needs to be animated. Specify the component by attaching this block.
technique String: The technique with which specified component should be animated. For example:
delay int: Amount of time after which animation should start (in milliseconds).
duration int: Amount of time it should take to complete one set of animation (in milliseconds). In simple language, it specifies how slow the animation should be.
repeatCount int: Number of times Phase should animate the given component. For example, 0 if you don’t want to repeat the animation at all or -1 if you want it to animate for an infinite amount of time.

In case you want to cancel the current animation, call the CancelAnimation method.

Thanks

A huge thanks go to @Vishwas for the sources of his ExtraComponents extension and his help. A big shout out for all the beta testers too! :tada:

Demo

Here is a demo app showing all the available animation types:
APK: PhaseDemo.apk (5.2 MB)
AIA: PhaseDemo.aia (74.5 KB)
Thanks @Franck_G28 for making this for me. :relaxed:

Download Version: 2.2.2 [Released on 16 July, 2021]

Direct: io.shreyash.phase.aix (70.0 KB)
Google Drive: io.shreyash.phase.aix - Google Drive

Previous versions

Let me know if you find any bugs/errors. Also, I’m open to suggestions and feature requests. :smile:

124 Likes
Animation icon title side menu
Animated popup screen
Create a ripple effect while changing background color
How to create wipe animation?
Weird reactions
The power of Phase Extension
How to fade out an image in kodular?
Urdu Poetry - Urdu Shayari
Custom Search Bar with Simple & Dynamic Listview | Guide
How to create a card?
Custom Bottom Navigation
Expandable List View
What do you get if you cross Kodular with Arkanoid?
D Wallpapers 2.0 🔥
Simple Dynamic image slider with animation using free extensions
Advances social tools app with cool UI
Custom Sidemenu Design in Kodular. (FREE AIA)
Create Sliding Panel with animation
Give me design challenge
Quoted [unlimited supply of motivation]
Animation extension in dynamic components
Simple & Clean Bottom Navigation with animation
How to smoothen this animation?
How to create a banner view like this
[ Free Aia ] Textbox with raised & animated hint
How to create a loading screen?
More example for Kodular
Kodular top sheet
Quizzer - Create or Join Online Test
Lottie Files Performance Problem
Phase component
I need previous version of Phase extension
Splash screen design
Animated Side menu | Custom Side Menu || Guide with Video Tutorial
Dynamic card animation
Custom Notifier to show Any Arrangement/Component | Guide
🔥 Firestore: scalable database
[Free, no Ads] Ajoyib ALIFBO - A Memory game for kids to learn the Uzbek Alphabet
Vertical/horizontal arrangement swiping horizontalally
How to rotate background image of an arrangement?
Music Player with Auto Scrolling Lyrics or Scroll Bar with Player Thumb Position
How to create animation splash screen without using lottie
How to create beautiful transitions in Kodular
First screen saver
D Wallpapers 2.0 🔥
Manipur Go - Read news and Track events (beta)
Image sprite effect like pulse .shake
How to create a menu that comes from the bottom of the screen
I am outcoming with this error after making app
Phase Extension
How to animate layout Changes Using a transition?
Simple eBook app ( Boi-somver )
Facing error on my app
Kodu-Bee NYT Spelling Bee Clone
WordMind word based game
How to animate a Floating Action Button?
App Crashing with no errors when opening
Copy screen !An internal error has occurred
Failed Resolution of Landroid/support/v4/widget/NestedScrollView
How can I add Animations Like This?
[FREE] Animated Login UI
Hi Can I change the direction of the tool side menu layout from left to right?
Animate components
How to create lable that can scroll in card view
[OS] Custom YT Channel App + Admin App
Help me to create this type animation
How to put image like this?
Kodular splash screen is not responsive. Must have an option to fix it to specific aspect ratio
Kodular Fenix New Update Crash My App
[ new design with pop-up menu without extension] Professional bottom navigation like flutter
How to make custom snackbar by using a trick
App Showing App Keeps Stopping when testing it after downloading the apk file
Socialo: The all-in-one Social Media, Shopping and Entertainment Junction
Index of Available Extensions
Error Project Aia Phase Extension Not Found
Screen Shake Effect

It’s a great extension. Just a word of advice to anyone who plan on use it. PLEASE don’t OVERUSE IT! When there’s a lot of this effects in an app is extremely annoying to the user. Just use common sense and keep functionality as a priority.
But like I said, It’s a very nice extension and I’m glad that you provide it free of charge too!

32 Likes

Glad that you liked it!

Every extension I’ll ever release will be free, forever.

I’m here to learn, not to earn! :sunglasses:

32 Likes

Really Awesome Extension Bro :heart_eyes::heart_eyes:

2 Likes

Extension is great and…


You are awesome…:+1::+1::+1::+1:

12 Likes

Great to see that this is your first extension. It is really awesome. :heart_eyes:

4 Likes

Awesome job, Shreyash! I always waited you to release this extension! Also I know how much time you spent for it! :sweat_smile:

This is probably the best extension for making animations easily! You can be sure about I will add this extension in my every upcoming project!

Exactly! :sunglasses:

5 Likes

Great work, Shreyash! :smiley:

3 Likes

To be accurate, ¾ of the total time was spent on a stupid error! Vishwas knows what I’m talking about. :sweat_smile:

5 Likes

Awesome job dude!

3 Likes

No you are here to earn likes :stuck_out_tongue_winking_eye:

Nice extension btw…keep it up!

7 Likes

This is one of the things that was missing most in Kodular to be able to make great interfaces.
Congratulations and thank you for this amazing extension ! :tada:

5 Likes

Pls check flipln x effect when click on that it close application

1 Like

Very great for an extension.

Amazing for first extension!

Well done, Shreyash!

PS: Do you have 62 if then elif elif… else conditions after each other?

3 Likes

Ottima estensione :+1: t3:

2 Likes

great work, well done and congrats for doing an awesome job

2 Likes

Just checked it on a device running Android 9 and it’s working fine. Which Android version you are having?

1 Like

Awesome extension , Thank you for making it sir :heart_eyes:

2 Likes

android version 7

1 Like

Can you test this app and see if it’s crashing?
Test (2).apk (4.8 MB)

2 Likes