Skip to main content
Solved

Animated Text Marquee's in Templates


MoLove
Contributor I
Forum|alt.badge.img+1

I have created an animated scrolling banner in the klaviyo templates by adding my code to a text block.

In the editor this shows it scrolling flawlessly but in the preview and when I send the emails the scrolling animation doesn’t show up. 

How do I fix this? Here is my code block:

 

<style>
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - .3rem));
  }
}

.marquee {
  gap: .3rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  width: 100%;
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: .3rem;
  list-style-type: none;
  animation: scroll 20s linear infinite;
}
.marquee__content {
 padding-inline-start: 0px !important;

}
.marquee__content .molove_logo{
  content: '';
  display: inline-block;
  width: 96px; /* Adjust as needed */
  height: 50px; /* Adjust as needed */
  background-image: url('myimage');
  background-size: contain;
  background-repeat: no-repeat;
}

.marquee__content .flower_image{
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url('myimage');
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
<div class="marquee">
<ul class="marquee__content">
<li class="molove_logo"> </li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
</ul>
<ul class="marquee__content">
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
<li class="molove_logo">&nbsp;</li>
<li class="flower_image">&nbsp;</li>
</ul>
</div>

 

Best answer by MoLove

Hey Brian, thanks for that! 

I managed to solve this by converting the banner into a GIF, it seems this is the way to go for scrolling banners. It would of course be way better if Klaviyo supported webp because of file size but it does work. 

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @MoLove!

Have you tested this with other inbox providers? Different inbox providers may render emails differently depending on their own styling rules, which is something that unfortunately cannot be remedied in Klaviyo. 

 

Other members have used tools like Litmus or Email on Acid to determine how their emails will look in different inboxes, so I’d recommend trying that.

 

Here are some other Community posts with similar discussions:

 

Best,

Brian


MoLove
Contributor I
Forum|alt.badge.img+1
  • Author
  • Contributor I
  • 1 reply
  • Answer
  • January 26, 2024

Hey Brian, thanks for that! 

I managed to solve this by converting the banner into a GIF, it seems this is the way to go for scrolling banners. It would of course be way better if Klaviyo supported webp because of file size but it does work.