Animation only works when re-visiting the page

[bkrall]

This component is amazing. Exactly what I was looking for and more.

That said, I'm having a little bit of trouble with the animation. On the first load, all of my items animate all at once. Then, when I revisit the page, it loads as expected, fading in as I scroll down the page, using the correct delay / duration settings.

Here are the settings I'm using:

import StackGrid, { transitions, easings } from 'react-stack-grid';
const { fadeUp } = transitions;

      <StackGrid
                appearDelay={1200}
                gutterWidth={15}
                duration={800}
                easing={easings.cubicOut}
                gutterHeight={-120}
                appear={fadeUp.appear}
                appeared={fadeUp.appeared}
                enter={fadeUp.enter}
                entered={fadeUp.entered}
                leaved={fadeUp.leaved}
                columnWidth={770}
             >

              {this.props.items &&
                this.props.items.map((item, index) => (
   ...

Appreciate any help!

[wadackel]

Hi @tsudmi. Thanks for issues 🙏. and sorry for my late reply.

It will take some time to fix it, so I'm happy to be waiting patiently 🚬