javascriptreactjsreact-reduxreact-animations

how to create the react-reveal homepage text animation


I was impressed with react reveal home page text animation where the letters in "React Reveal" word fly from left , right and meets in the middle. So i thought i want to implement the same animation for my project home page but unfortunately i did not find a way to do it. I struggled a lot by looking in to developer console to find a way how it works but i was unable to get that. So can some one help me how to do that. Here is the link of the home page https://www.react-reveal.com/ Thanks in Advance


Solution

  • I finally found answer to my question if any one is trying to find how this works please check below snippet

    import React from 'react';
    import Zoom from 'react-reveal/Zoom';
    
    class ZoomExample extends React.Component {
      render() {
        return (
          <h1>
            <Zoom left cascade>
            <div style={{display:'inline-block'}}>React</div>
    
            </Zoom><Zoom right cascade> 
            <div style={{display:'inline-block'}}> Reveal</div>
            </Zoom>
          </h1>
        );
      }
    }