Animation to Home Page Transition-CodePudding

I have an opening animation on a personal project and I'm trying to then transition the animation to what would be my home page. The animation is done in CSS but would like to do it in JavaScript.

.wrapper {
    height: 100vh;
    display: grid;
    place-items: center;
  }
  
  .typing-demo {
    width: 22ch;
    animation: typing 2s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2em;
  }
  
  @keyframes typing {
    from {
      width: 0
    }
  }
      
  @keyframes blink {
    50% {
      border-color: transparent
    }
  }

This is the code for the animation

CodePudding user response：

You can use the Gsap library for cool effect and animation while page load page unload and much more. Do visit the following link

Documentation :- GSAP Docs

CodePudding user response：

** Solution in JS: **

let typingDemo = document.querySelectorAll(".typing-demo");

typingDemo.style.animation = "typing 2s steps(22), blink .5s step-end infinite alternate";

CodePudding user response：

If you want to transition on a route basis you can use this library https://www.npmjs.com/package/@steveeeie/react-page-transition It is very easy to use with plenty of transition types