search

awesome-reveal / react-awesome-reveal

React components to add reveal animations using the Intersection Observer API and CSS Animations.
https://react-awesome-reveal.morello.dev
MIT License
1.15k stars 43 forks source link

Example for cascading single letters with a span? #72

Closed princefishthrower closed 3 years ago

princefishthrower commented 3 years ago

I'm struggling to use <Fade> on single letters - whether the letter itself is wrapped in a <div> or a <span>, it seems to render the letters vertically - is there anyway to fix this behavior? In my use case, each of my letters have a custom color and thus are in a span already. Then using <Fade> causes these spans to render vertically. Code sandbox for what I mean: https://codesandbox.io/s/dank-browser-n9r1l?file=/src/App.js:152-159

Also, I can't seem to simulate the fly into screen styles like on the demo site (https://react-awesome-reveal.morello.dev/docs/fade) - is there additionally styling needed? I expect the letters to fly up from the bottom of the screen!

morellodev commented 3 years ago

Just pass the prop style={{ display: "inline" }} to <Fade>.