Slow down AnimatedContainer

[jrock2004]

So I have a div that has some text and a button to expand. When I click expand the animated container starts to grow in height and the new content scrolls down from the top. But the issues is, I want to height of the box to start growing once the text hits the bottom of the div? Is this possible?

<AnimatedContainer>
  {{#animated-if showSelectTip use=this.transition}}
    <div>
       <h1> Cool Text</h1>
       <button>Show More</button>
    </div>
  {{else}}
    <div>
      .....
      .....
      .....
      .....
    </div>
  {{/animated-if}}
</AnimatedContainer>

*transition({ insertedSprites, removedSprites }) {
  removedSprites.forEach(sprite => {
    fadeOut(sprite, { duration: 100 });
  });

  for (let sprite of insertedSprites) {
    sprite.startAtPixel({ y: 0 });
    yield move(sprite, { easing: easeOut, duration: 750 });
  }
}

If you need to see a more working example I can put one up

[aalimovs]

@jrock2004 I'm actually building something similar, which transition did you end up with?

Here's what I'm using:

function * ({ insertedSprites, removedSprites }) {
    insertedSprites.forEach(fadeIn);
    removedSprites.forEach(fadeOut);
}

[jrock2004]

@aalimovs I ended up, just living with it. I started to play with the speed of the animation to minimize the look, but never came up with a good solution