Page Header Code Injection for Blog List affecting all Blog Posts

Site URL: https://www.yungrealestate.com/availabilities

I added code for a loading animation to the Page Header Code Injection in Blog Settings. It works great but it loads on all the blog pages as well as the main blog list page.

How can I stop the animation from loading on all of the individual blog pages? I would prefer for it to only load on the main blog list page. Thanks!

Hi. Which code did you use? Can you post here.

21 hours ago, tuanphan said:

Hi. Which code did you use? Can you post here.

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

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  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 !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

Here is the code posted in the Page Header Code Injection which I would only like applied to the blog page that lists all the posts. Thanks @tuanphan!

On 6/29/2021 at 12:19 PM, AllanYung said:

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

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  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 !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

Here is the code posted in the Page Header Code Injection which I would only like applied to the blog page that lists all the posts. Thanks @tuanphan!

Try new code

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  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 !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}
  .view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

If it doesn't work, keep the code & add this to Design > Custom CSS

/* disable code on blog individual posts */
.view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

6 hours ago, tuanphan said:

Try new code

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  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 !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}
  .view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

If it doesn't work, keep the code & add this to Design > Custom CSS

/* disable code on blog individual posts */
.view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

 

Thanks!!

On 7/1/2021 at 3:34 AM, tuanphan said:

Try new code

<div class="splash-wrapper">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  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 !important;
  align-items: center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-delay: 2s;
}
  .view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

@keyframes slideOut {
  from {margin-top: 0vh; opacity: 1;}
  to {margin-top: 100vh; opacity: 0;}
}
</style>

If it doesn't work, keep the code & add this to Design > Custom CSS

/* disable code on blog individual posts */
.view-item .splash-wrapper {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }

 

Hey @tuanphan. How can I display a different animation on all of the blog posts but not the main blog list page? Thanks!

15 hours ago, AllanYung said:

Hey @tuanphan. How can I display a different animation on all of the blog posts but not the main blog list page? Thanks!

In above code, which code did you add? I can give code easier.

6 hours ago, tuanphan said:

In above code, which code did you add? I can give code easier.

I used the custom CSS. The first bit of code didn’t load the animation. Thanks!

On 7/3/2021 at 8:08 PM, AllanYung said:

I used the custom CSS. The first bit of code didn’t load the animation. Thanks!

Add a new lottie file, eg this file

<div class="splash-wrapper-2">
  <lottie-player src="https://assets6.lottiefiles.com/packages/lf20_biy6osdk.json"  background="transparent"  mode="normal"  speed="1"  style="width: 480px; height: 270px;"  autoplay></lottie-player>
</div>

note: change splash-wrapper to splash-wrapper-2

Next, add this to Design > Custom CSS

/* disable code on blog list page */
.view-list .splash-wrapper-2 {
  	display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -100 !important;
  }