Animated sidebar

[Subaku]

Question in trying to learn this wonderful addon. Got a sidebar that I'm animated in/out of the view which shoves the content to the right of it over as need be. My question is whether or not I'm doing it correctly as the animation of the content that gets moved over isn't smooth.

An abbreviated version of my template around this:

<AnimatedContainer>
  {{#animated-if this.showFilters use=this.slideFromLeft duration=750}}
      <AssetLocations::Filters ...>
  {{/animated-if}}
</AnimatedContainer>
<div class="other-content">...</div>

Then my "use" function for the animation:

slideFromLeft = function * ({ insertedSprites, keptSprites, removedSprites }) {
  insertedSprites.forEach(sprite => {
    sprite.startAtPixel({ x: -400 });
    sprite.applyStyles({ 'z-index': '1' });
    move(sprite, { easing: easeIn });
  });

  removedSprites.forEach(sprite => {
    sprite.applyStyles({ 'z-index': '1' });
    sprite.endAtPixel({ x: -400 });
    move(sprite, { easing: easeOut });
  });
}

Figured using transitions is what's appropriate. Just unsure if I'm handing the animation correctly.
Any tips is appreciated!

[ef4]

Are you deliberately allowing the original content to reflow? That is hard to make smooth and performant.

The alternative is to fix its width so it doesn't reflow, and instead either gets pushed partway off screen or gets scaled down via CSS transform.