Nested cascade

[PeterKottas]

Nested cascade

[PeterKottas]

It would require fairly minimal code, just some extra loop based on check if the param is array or string here https://github.com/dennismorello/react-awesome-reveal/blob/master/src/Reveal.tsx#L37

[morellodev]

Hey, I'm not sure if anyone's still looking for how to do this, but I found out that when I use Fade and provide a direction prop, the animation does indeed combine a Slide and a Fade.

 <Fade cascade damping={0.1} triggerOnce direction={"right"}>
...
</Fade>

This is how the Fade animation with a direction is intended to work. You can use the Slide animation if you do not want the fade effect.

[morellodev]

Hi @PeterKottas,

it sounds like something you can already do by combining different effects and playing with the delay prop.

If this is enough I would not add levels of complexity to react-awesome-reveal, I would keep it simple ;)

[PeterKottas]

I sort of agree, but still think it might be a tempting feature. You can do it by manually looping over children in your code. Needless to say, not a very user-friendly way of doing things. I am thinking this could be implemented in a pretty straight forward way. I can imagine something like this.

import { Reveal } from 'react-awesome-reveal';

const MyComponent = () => {
  return <Reveal cascade={true} animation={['fade', 'slide']}><div>1</div><div>2</div></Reveal>;
};

That would simply chain the reveals. This could easily work with cascade as well. Maybe it would make sense to keep this open as a "help-wanted" issue? See if others might be interested in such functionality.

[fikip]

Hey, I'm not sure if anyone's still looking for how to do this, but I found out that when I use Fade and provide a direction prop, the animation does indeed combine a Slide and a Fade.

 <Fade cascade damping={0.1} triggerOnce direction={"right"}>
...
</Fade>