Text Shake Effect: UI Animation in After Effects

In this video, I demonstrate how to create a convincing, physics-based animation in which a user leverages the accelerometer of the phone, shaking their device to process to the next state in a user interface. This is a versatile interaction, that could be used during onboarding, for success failure states, and more.
Chapters:
0:00 Intro
1:19 Figma Design and Asset Export
2:21 After Effects Setup
4:35 Letter Entrance Setup
7:00 Using shape layers as containers
10:40 Rendering Letter Entrance
13:20 Letter Shake Setup (UI)
16:00 Finalizing the UI
17:20 Device Shake Simulation
23:20 Final Render
Download newton plugin for AE: aescripts.com/newton/
email: [e-mail]
#UI #UX #aftereffects #motiongraphics #typography #kinetictypography #mobile #app #ios #development #lottie #interface #userexperience

[@mamaligakimchi]

This was the most clear and helpful motion design tutorial ever! Thanks! I look forward to more amazing tutorials to come up! :)

[@lindayangng]

So creative, I'm impressed! Thanks for sharing 🙂

[@JakePomperDesign]

Thank you! And thanks for watching

[@jeclante]

Excelente tutorial muchas gracias por compartir tu conocimiento 👏

[@JakePomperDesign]

thanks for watching!

[@user-ni5ru1sv8x]

Nice work man! Would have loved to see the shake text centered horizontally for better visibility with an expression loopout “pingpong” on the opacity to sell the effect to the user that you can shake at anytime improving user interaction. Other than that I learned a lot!

[@JakePomperDesign]

Good idea 👍

[@rickmoranis420]

pretty sickk nice tutorial

[@JakePomperDesign]

Thank you 🙏🔥

[@arturosilva8992]

Hi JP! Thank you for this. I just have a question, what if this animation is approved and the Devs want to implement it on an app? How do you transfer this to code? Thanks :D

[@JakePomperDesign]

You can export as a JSON file using the bodymovin extension for after effects

[@arupde6320]

r u alive ??