Why does the marquee text on my narrative theme lag on mobile?

Store Design
1

Hello, recently i added a marquee text on my narrative theme, it didn’t come out smooth on mobile like this theme’s marquee text, it was lagging

the theme that I’m referring to

(https://streamline-theme-core.myshopify.com)

my website: https://oxytocin-sa.myshopify.com

1 Like
2

Hello @Fares2 ,

Greetings!!

Please replace this code with your code https://prnt.sc/556fal0EKeO0 :


<div class="marqueeText">
<span>"555" "NEW BEGINNING" IS OUT NOW! </span>
</div>
<style>
.marqueeText {
height: 50px;
overflow: hidden;
position: relative;
width: 100%;
}
.marqueeText span{
font-family: "New York", "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", "Droid Serif", Times, "Source Serif Pro", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 400;
font-style: normal;
font-size: 17px;
color: #Dadaa8;
text-align: center;
font-size: 2em;
color: limegreen;
position: absolute;
width: 85%;
height: 100%;
margin: 0;
line-height: 50px;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%); 
transform:translateX(100%);
/* Apply animation to this element */ 
-moz-animation: marqueeText 15s linear infinite;
-webkit-animation: marqueeText 15s linear infinite;
animation: marqueeText 15s linear infinite;
}
.marqueeText span a{
margin-right:50px; 
}
/* Move it (define the animation) */
@-moz-keyframes marqueeText {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marqueeText {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes marqueeText {
0% { 
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%); 
}
100% { 
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%); 
}
}
</style>

Output : https://nimb.ws/lbDvn0

3

Worked perfectly ! But unfortunately it’s not showing the whole text.. The whole text is “555” “NEW BEGINNING” is out now!

What it’s showing only “555” “NEW BEGINNING” ..

4

Never mind I fixed it by myself