Jump to content

Change slideOut to a fading animation

Recommended Posts

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

Hi!

I'm trying to change my loading screen animation from the sliding out to the left to a fading animation. I have changed the "animation-name" to fadeout but it stills slides to the left. Can someone help me? 

<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>

Thanks!

Edited by nwatkins
Link to comment
  • nwatkins changed the title to Change slideOut to a fading animation
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.