Solved
Animated Text Marquee's in Templates
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"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
</ul>
<ul class="marquee__content">
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
<li class="molove_logo"> </li>
<li class="flower_image"> </li>
</ul>
</div>