Tengo un encabezado que curvo llamando a una función 5 segundos después de cargar y estoy usando la biblioteca CircleType para eso. Mi único problema es que no puedo aplicar una transición suave al cambio.
¿Alguien me puede ayudar?
Aquí está el código:
* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: white; justify-content: center; align-items: center; } .heading { font-family: Verdana, Geneva, Tahoma, sans-serif; color: black; font-size: 80px; position: absolute; top: 50%; left: 25%; transition: 3s ease-in-out; } <body> <h1 class="heading" id="smile">LOVE YOUR SMILE</h1> <script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> setTimeout(function () { new CircleType(document.getElementById("smile")).dir(-1).radius(700); }, 5000); </script> </body>¡Gracias!