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

Keyboard animation with Rounded Corner Background. Help

Explorer ,
Jul 27, 2020 Jul 27, 2020

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.pngexpand image2.pngexpand image3.pngexpand image4.pngexpand image

 

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
298
Translate
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

Translate
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

Translate
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
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

Translate
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