I have a heading that I curve by calling a function 5s after loading and I am using the CircleType library for that. My only problem is that I cannot apply a smooth transition to the change.
Can someone help me?
Here is the code:
* {
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>Thank you!