O'Reilly logo

Ionic : Hybrid Mobile App Development by Hoc Phan, Sani Yusuf, Rahat Khanna

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a physics-based animation using Dynamics.js

Using physics-based animations can make your app more interactive and lively, which helps attract and retain more users. There are many methods to add physics to your component animation. For example, you could even use the CSS animation-timing function to add property values, such as ease-in, ease-out, or cubic-bezier. However, it's easier and better to use an existing JavaScript-based physic animation. Dynamics.js is one of those JavaScripts that comes with utilities and performance. Using native CSS physic features is actually not a good practice as it comes with a frame-per-second penalty on mobile devices.

The app will show a bouncing button, which can show and hide a top quote box, as follows, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required