Jump to content

How to change a slideOut animation?

Recommended Posts

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


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>

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

Link to comment
  • Replies 5
  • Views 331
  • Created
  • Last Reply

Top Posters In This Topic

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{


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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

Link to comment

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.