Help Needed with Implementing Sliding Text Animation

Help Needed with Implementing Sliding Text Animation

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,




    Access your files securely from anywhere

        Zoho Developer Community




                                  Zoho Desk Resources

                                  • Desk Community Learning Series


                                  • Digest


                                  • Functions


                                  • Meetups


                                  • Kbase


                                  • Resources


                                  • Glossary


                                  • Desk Marketplace


                                  • MVP Corner


                                  • Word of the Day



                                      Zoho Marketing Automation
                                              • Sticky Posts

                                              • Unveiling Zoho Sites 2.0 - A new dimension in website building

                                                Dear Zoho Sites Users, We are thrilled to announce the launch of Zoho Sites 2.0 today! This refresh represents a significant step forward in the capabilities of Zoho Sites and is crucial for creating a lasting and positive impact on our customers' businesses.
                                              • Website Accessibility

                                                I have two sites created in Zoho Sites which are both live. Some questions: 1. Are any of the template themes WCAG 2.1 AA compliant? 2. How do I change the format of a sub-heading in the header section? 3. Is there any way to add focus indication for
                                              • Visual Editor Webinar

                                                Join our FREE live webinar to learn how to use the Zoho Sites Visual Editor to easily design your website. Our product specialist will demonstrate how this tool will help you customize your website to suit your requirements.  Register here: https://www.zoho.com/sites/webinars/
                                              • SEO for your Zoho Sites Website

                                                Join our live webinar to learn how to use Zoho Sites' SEO tools to boost your website's ranking. Our product specialist will demonstrate everything you need to know about optimizing your web pages to make them search engine friendly. Register here for free: https://www.zoho.com/sites/webinars/
                                              • Zoho Sites Webinar | Integrations

                                                Join our FREE live webinar to learn how to integrate both Zoho and third-party products with your Zoho Sites website. Our product expert will demonstrate how to use these integrations to grow, manage, and retain the customers you bring in. Learn how to take your business forward and build stunningly robust and efficient websites. Register here: https://www.zoho.com/sites/webinars/


                                              Manage your brands on social media



                                                    Zoho TeamInbox Resources

                                                      Zoho DataPrep Resources



                                                        Zoho CRM Plus Resources

                                                          Zoho Books Resources


                                                            Zoho Subscriptions Resources

                                                              Zoho Projects Resources


                                                                Zoho Sprints Resources


                                                                  Qntrl Resources


                                                                    Zoho Creator Resources



                                                                        Zoho Campaigns Resources


                                                                          Zoho CRM Resources

                                                                          • CRM Community Learning Series

                                                                            CRM Community Learning Series


                                                                          • Kaizen

                                                                            Kaizen

                                                                          • Functions

                                                                            Functions

                                                                          • Meetups

                                                                            Meetups

                                                                          • Kbase

                                                                            Kbase

                                                                          • Resources

                                                                            Resources

                                                                          • Digest

                                                                            Digest

                                                                          • CRM Marketplace

                                                                            CRM Marketplace

                                                                          • MVP Corner

                                                                            MVP Corner





                                                                              Design. Discuss. Deliver.

                                                                              Create visually engaging stories with Zoho Show.

                                                                              Get Started Now