Jittery/janky animation in Bellows plugin

[donnielrt]

Hey Julian,

I'm working with Kyle Peatt and Steve Calvert on the Bellows (accordion) plugin at Mobify.

We've encountered a bit of a performance issue with the animation when sliding down a bellows item (which uses Velocity under the hood, as you're probably aware). The problem is pretty apparent on a mobile device, so we'd love to get this resolved if possible!

You'll note in the attached screenshot that the framerate drops below 60fps each time when opening the bellows item.

Here's the bit of code that opens up the bellows item: https://github.com/mobify/bellows/blob/master/src/js/bellows.js#L137

Do you see any potential issues with our implementation, or have an idea on how we could optimize the animation?

Thanks for your help!

[ydaniv]

@donnielrt try creating a reduced example on JSFiddle first. At first glance it appears that you're forcing reflow in your begin callback. Try using Velocity without it and see if the problem persists.

[donnielrt]

@ydaniv will write up a reduced example, thanks!

[julianshapiro]

Hey @donnielrt!

Please keep in mind that the reduced example should consist exclusively of Velocity code. The goal here is to figure out if Velocity is really the issue. As for generic implementation help, we can address that afterward (or perhaps SO is a better place).

[donnielrt]

Hey @julianshapiro, @ydaniv,

I've put up a reduced example here: http://codepen.io/donniel/pen/Iqeyb

The example only uses Velocity (and some trivial jQuery). Looking at the timeline, there still seems to be a bit going on that pushes the framerate to below 60fps. Codepen is aggravating the slowdown a lot, but running this locally shows a similar timeline chart as in my initial screenshot.

I also have the same example using CSS3 animations instead, which seems to perform better. I could post that up as well if you'd like.

Thoughts?

[julianshapiro]

Thanks for this.

How does the fps profile compare when you're using jQuery's own slide functions?

[donnielrt]

No worries, dude!

Seems like jQuery's slideDown is actually doing better:

as compared to the fiddle with velocity:

Very odd, indeed!

[ydaniv]

Dear sir, could you please use the latest Velocity, 1.0.0, and not 0.11.7 (:

[donnielrt]

@ydaniv whoops! good catch! Waaaay better :)

Let me confirm this resolves our issues, and I'll close the ticket or recomment. Thanks again!

[julianshapiro]

thanks @ydaniv