How to change a slideOut animation?

Site URL: https://www.nickwatkinsdesign.com/

Hi!

I was wondering if anyone knew how to change the slideOut animation to a fade out animation? Here's my code below.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="splash-wrapper">
  <lottie-player src="https://assets10.lottiefiles.com/packages/lf20_obzpck27.json" background="transparent" speed="1" style="width: 400px; height: 400;" loop autoplay>
 </lottie-player>
</div>

<style>
.splash-wrapper{
  position: fixed;
  z-index: 9999;
  background-color: #ffffff;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 3s;
  animation-delay: 1s;
}
  @keyframes slideOut{
  from{margin-left: 0vw;}
  to{margin-left: -100vw;}
}
</style>

@tuanphan Can you help me with this? I haven't been able to figure it out yet. Thanks!

On 10/14/2021 at 11:39 AM, nwatkins said:

@tuanphan Can you help me with this? I haven't been able to figure it out yet. Thanks!

try change this

@keyframes slideOut{
  from{margin-left: 0vw;}
  to{margin-left: -100vw;}
}

to this

@keyframes slideOut{
  from{opacity:0;}
  to{opacity:1;}
}

@tuanphan It works buts it breaks a lot of other elements on my page. Any thoughts?

On 10/15/2021 at 11:37 PM, nwatkins said:

@tuanphan It works buts it breaks a lot of other elements on my page. Any thoughts?

Which elements break?

@tuanphan The intro sentence on my landing page usually changes color as you hover over it but is broken with the new code, my profile picture on the landing page changes from black and white to color when you hover over it but doesn't when there is the new code and then the arrows that are below those elements doesn't work either