Issue
I'm building a simple Ionic Capacitor app with Angular.
The app includes a few pretty simple animations, and I'm stunned to learn these animations are incredibly laggy:
In the app, I have a list of contacts. When a contact is selected, the height of a div above the list is increased, and the list below is pushed down. Please refer to screenshots below.
This animation is implemented using Ionic's own animation library:
await this.animationController
.create()
.iterations(1)
.addElement(document.querySelectorAll('.selected-contacts'))
.duration(150)
.fromTo('height', '0, '160px').play();
Simplified HTML:
<div class="container">
<div class="selected-contacts"><!-- some stuff here --></div>
<div class="list">
<cdk-virtual-scroll-viewport>
<!-- List here -->
</cdk-virtual-scroll-viewport>
</div>
</div>
Playing this animation does the job, but its noticeable laggy, both on a new iPhone Pro and an older Android (pretty much same amount of lagging).
Question:
A simple height animation should not be laggy on a new iPhone, what am I doing wrong? Could it be that the underlying OS is only allocating a tiny fraction of resources to and Ionic Capacitor application? What am I missing here?
Disclaimer:
I know using translate
, transform
uses less CPU/GPU since the DOM is not rewritten here, but I still have a hard time to accept that a new iPhone cannot animate a height change without being laggy.
Solution
Animation the height property in any framework is not performant. Height requires the browser to need to re-layout the entire page and will always cause jank.
See CSS-Triggers for more details.
Using something like Transforms/Translate3D instead to create the effect you're looking for.
EDIT
Adding a link to a past talk from Liam DeBeasi about animations and performance.
Answered By - mhartington
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.