Hello Zoho Sites Community,

I hope you’re all doing well.

I’m currently working on my Zoho Sites website and I’m trying to implement a sliding text animation. My goal is a series of related concepts slide up.

Here is the CSS, and JavaScript code I’ve been working with:

css
#animated-concepts {
  height: 30px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin-left: 10px;
}

#animated-concepts span {
  position: absolute;
  animation: slide-up 24s linear infinite;
}

@keyframes slide-up {
  0%, 8.33% { top: 0; }
  16.66%, 25% { top: -30px; }
  33.33%, 41.66% { top: -60px; }
  50%, 58.33% { top: -90px; }
  66.66%, 75% { top: -120px; }
  83.33%, 91.66% { top: -150px; }
  100% { top: 0; }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const concepts = [
    "Procesamiento de Documentos",
    "Captura información desde Documentos",
    "Integración con Sistemas Contables",
    "Generación de Reportes",
    "Respuesta Automática de Correos Electrónicos",
    "Actualización de Inventario",
    "Facturación automática",
    "Estados de cuenta automáticos",
    "Gestión de pedidos automática",
    "Análisis de Datos",
    "Carga de documentos en formularios",
    "Contratos y Documentos Legales"
  ];

  const animatedConceptsContainer = document.getElementById('animated-concepts');
  let content = '';
  for (let concept of concepts) {
    content += `<span>${concept}</span>`;
  }
  animatedConceptsContainer.innerHTML = content;
});

However, despite my efforts, the animation is not working as expected. The text remains static does not apear.

I would really appreciate any guidance or suggestions from the community on how to resolve this issue. Has anyone successfully implemented a similar animation or have any insights into what might be going wrong?

Thanks in advance for your help!

Best regards,