Page Swipe (left/right) Transitions on Button Click

I have some short lessons I've built here: https://upliftingme.co/lesson-1-claude-monet

When clicking the next / previous buttons, I'd like a page swipe transition to occur, instead of the default page load.  Any ideas?

(Just a test code, if it works, we can adjust it then)

Add to Code Injection > Footer

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<div class="splash-wrapper">
  <lottie-player src="https://lottie.host/7134761f-9be6-42da-bb65-6ff81185617b/uEgxToPhd9.json"  background="transparent"  speed="1"  style="width: 275px; height: 275;"  loop  autoplay></lottie-player>
</div>
<style>
.splash-wrapper {
  position:fixed;
  z-index:9999;
  background-color: #000000;
  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:.65s;
  animation-delay: 5s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -100vw;}
}
</style>

Not working yet 😞 Tried it in config and live site on multiple pages. no change.

Q: Was this code suppose to apply page transitions site-wide or do I need additional code to assign it it to specific pages?

It is site wide, but if it works, you can move code to page header 

Can you keep the code? I can check it again easier

@tuanphan ok and sorry - just added back in.

On 12/17/2023 at 4:10 PM, tuanphan said:

(Just a test code, if it works, we can adjust it then)

Add to Code Injection > Footer

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<div class="splash-wrapper">
  <lottie-player src="https://lottie.host/7134761f-9be6-42da-bb65-6ff81185617b/uEgxToPhd9.json"  background="transparent"  speed="1"  style="width: 275px; height: 275;"  loop  autoplay></lottie-player>
</div>
<style>
.splash-wrapper {
  position:fixed;
  z-index:9999;
  background-color: #000000;
  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:.65s;
  animation-delay: 5s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -100vw;}
}
</style>

 

Try this new code

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<div class="splash-wrapper">
  <lottie-player src="https://lottie.host/7134761f-9be6-42da-bb65-6ff81185617b/uEgxToPhd9.json"  background="transparent"  speed="1"  style="width: 275px; height: 275;"  loop  autoplay></lottie-player>
</div>
<style>
.splash-wrapper {
  position:fixed;
  z-index:9999;
  background-color: #000000;
  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:.65s;
  animation-delay: 5s;
  top: 0;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -100vw;}
}
</style>

@tuanphan Well, something definitely changed now. I get a black screen with a logo loading and then the black screen swipes out.

@tuanphan You can disregard this request for the moment. I have someone working on the site and don't want to interfere with their page load speed.

I'll hit you up when I'm ready to continue on this.