Highlighted

Keyboard animation with Rounded Corner Background. Help

Explorer ,
Jul 27, 2020

Copy link to clipboard

Copied

Hi Community,

 

I am creating animated UI using AE (I first designed the UI in XD and now I am just exporting the components) and I have a "Input Form" in which the Keyboard will pop up from the bottom just like on the real life iPhones. The issue is the following: my background is rounded corner rectangle and not just a regular fitting rectangle. When the keyboard is popping up from the bottom I must find a way to "Insert" the keyboard "inside" that rounded corners rectangle (my background) in order to create the perfect animation. If I don't do that and just make the keyboard pop up from the bottom, It will move above the rounded corners and it will look horrible. 

 

1.png2.png3.png4.png

 

I am attaching the screens in order for you to understand better.

Duplicate the background and use it as alpha matte for the keyboard. This way, you "cut" the round edges into the keyboard.

 

P.S. Better include pictures into your post, nobody likes those download-links.

 

*Martin

Topics

Audio, Crash, Dynamic link, Error or problem, Expressions, FAQ, Freeze or hang, How to, Import and export, Performance, Preview, Resources, Scripting, User interface or workspaces

Views

34

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Keyboard animation with Rounded Corner Background. Help

Explorer ,
Jul 27, 2020

Copy link to clipboard

Copied

Hi Community,

 

I am creating animated UI using AE (I first designed the UI in XD and now I am just exporting the components) and I have a "Input Form" in which the Keyboard will pop up from the bottom just like on the real life iPhones. The issue is the following: my background is rounded corner rectangle and not just a regular fitting rectangle. When the keyboard is popping up from the bottom I must find a way to "Insert" the keyboard "inside" that rounded corners rectangle (my background) in order to create the perfect animation. If I don't do that and just make the keyboard pop up from the bottom, It will move above the rounded corners and it will look horrible. 

 

1.png2.png3.png4.png

 

I am attaching the screens in order for you to understand better.

Duplicate the background and use it as alpha matte for the keyboard. This way, you "cut" the round edges into the keyboard.

 

P.S. Better include pictures into your post, nobody likes those download-links.

 

*Martin

Topics

Audio, Crash, Dynamic link, Error or problem, Expressions, FAQ, Freeze or hang, How to, Import and export, Performance, Preview, Resources, Scripting, User interface or workspaces

Views

35

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 27, 2020 0
Guide ,
Jul 27, 2020

Copy link to clipboard

Copied

Duplicate the background and use it as alpha matte for the keyboard. This way, you "cut" the round edges into the keyboard.

 

P.S. Better include pictures into your post, nobody likes those download-links.

 

*Martin

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2020 0
Explorer ,
Jul 27, 2020

Copy link to clipboard

Copied

Wow! You just saved my day! I found a video of how to do it and I will try it now.

 

The Video: https://www.youtube.com/watch?v=vEfT4G56WHs

Alpha matte - explained! Having problems? Drop a comment! Follow MotionMaster on Google+ https://plus.google.com/b/112233032855777223977/11223303285577722397...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 27, 2020 0