• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Keyboard animation with Rounded Corner Background. Help

Explorer ,
Jul 27, 2020 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.

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

206

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
community guidelines

correct answers 1 Correct answer

Mentor , Jul 27, 2020 Jul 27, 2020

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

Votes

Translate

Translate
Mentor ,
Jul 27, 2020 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

Votes

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
community guidelines
Explorer ,
Jul 27, 2020 Jul 27, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines