Hello,

Thank you for the detailed explanation and code samples.

It seems the main issue is the CSS comments in your code are written incorrectly. In CSS, comments should use:

/* comment */

instead of:

/ comment /

Because of the invalid comment syntax, the browser stops parsing the CSS properly, which prevents the animation from working.

Please replace your CSS with the following corrected version:

.marquee-container {
    overflow: hidden; /* Hides text outside the box */
    white-space: nowrap; /* Forces text into a single line */
    background: #60BA47;
    color: #ffffff;
    font-size: 16px;
    padding: 10px 0;
}

.marquee-content {
    display: inline-block;
    animation-name: modern-marquee;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes modern-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

You may place this CSS either:

• Inside the addon’s Custom CSS area
• Or in Page Settings → Custom CSS

After updating the code, please clear your Joomla/cache/browser cache and check again.

Best regards,

Hi Rashida,

The comments were properly formatted. I believe the asterick was stripped out when I submitted my question. To test that theory I have placed a properly formatted comment here: / Hides text outside the box /

Hi Paul,

I had tried the articles scroller, which isn't what I wanted, not realizing that animated heading addon was there. Exactly what I needed and is now working.

Thanks