react-stack-grid icon indicating copy to clipboard operation
react-stack-grid copied to clipboard

Animation only works when re-visiting the page

Open bkrall opened this issue 8 years ago • 1 comments

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!

bkrall avatar Mar 21 '17 04:03 bkrall

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

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

wadackel avatar Mar 23 '17 15:03 wadackel