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, 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 lot of 15 primary blocks. Most of these blocks are self-explanatory, but in case you need to learn more, you can hover over them in the blocks editor to see their documentation.

  1. Events

    • AnimationStarts
    • AnimationEnds
    • AnimationCancelled
    • AnimationPaused
    • AnimationResumed
  2. Methods

    • AnimateComponent
    • AnimationCancelled2
    • Cancel and CancelAll
    • Pause and PauseAll
    • Resume and ResumeAll
    • IsRunning and IsPaused
  3. And 68 animation techniques with which Phase should animate the given component. As of now, there are 63 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 that is used to identify 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 the specified component should be animated. For example: tech-tada
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 Cancel 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)
Note: These don’t use the latest version of the extension.
Thanks @Franck_G28 for making this for me. :relaxed:

Download [Version: 3.1]

Direct: io.shreyash.phase.aix (81.1 KB)
Google Drive: https://drive.google.com/file/d/1fviQil8GOeSvVWMKMOxG1Hi82M4qOCNQ/view?usp=sharing


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

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

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!

33 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:

34 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!

9 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

3 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