[SOLVED - BASICALLY] Animations are jerky/choppy/stuttery

Even on the simplest page, animations are extremely jerky. Do you find this too? If so, do you just stay away from animations or do you smoke a joint so it seems really fast and smooth?

Are the animations still jerky when you define a custom duration?

Thanks for the suggestion @dan1, but that didn’t do it. It seems to be because of the delay caused by the “Collapse this element’s height when hidden” functionality.

I’m trying to slide one group out of the way and then have another group slide in to replace it, but the 2nd group animation “bumps” into the 1st group before it has finished collapsing (note that my 2nd group is about 50 pixels below my 1st group, if that matters).

Changing the animation duration for either of the animations does nothing, and animating the collapse itself doesn’t help. The only thing that worked was to put a 1000ms pause in between the action, but that’s too long for usability (and 500ms was still too slow).

I’d propose to @emmanuel that the collapse operation would ideally be faster, but that’s probably impossible. Not the end of the world.

Update: Yes, when I put the groups right on top of each other, it works nicely. Makes the backend harder to work with, but looks pretty :slight_smile:

Just to be sure, are you using both collapse the element height + animation style and animations of the elements at the same time?

When using animations, here’s my approach:

  • transition out for element 1
  • pause before next action (duration as needed)
  • transition in for element 2.

Or, if fitting, I’d hide element 1 and then run the animation). But I wouldn’t include a collapse the elements height while hidden for either element given that it’s not controlled from the workflow and limited in configuration.

As you pointed out, collapse operation only works nicely when vertically stacking.

1 Like

I think I tried all possible combinations. Ideally, I’d want the collapse to happen quickly before the 2nd animation starts coming in, but the collapse was always in the way. Anyway, putting the groups all in the same place rather than staggering down the page is working okay for my simple page - just means I can’t view more than one group at once. Thanks again!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.