I have some code for rotating circular text on my website that was working fine until recently. Now I am getting some error messages and the text is just displaying as normal static, horizontal text. I can't figure out how the code can be working fine in Codepen but on the website it is not working. What is also weird is that in the Elementor editor on the website, the circular rotating text is working fine but on the live site it's broken?!
jQuery(document).ready(function($) {
const text = document.querySelector(".circular-text .contact-text")
const rotate = new CircleType(text).radius(40)
window.addEventListener("scroll", function() {
text.style.transform = `rotate(${window.scrollY * 0.15}deg)`
});
});.circle-text {
overflow: hidden;
}
.circle-text text {
font-family: "Alliance No 2", Sans-serif;
font-size: 17.2px;
font-weight: 500;
}
.circle-text svg {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 220px;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotate(360deg); }
to { -webkit-transform: rotate(0); }
}
@-moz-keyframes rotate {
from { -moz-transform: rotate(360deg); }
to { -moz-transform: rotate(0); }
}
@-ms-keyframes rotate {
from { -ms-transform: rotate(360deg); }
to { -ms-transform: rotate(0); }
}
@-o-keyframes rotate {
from { -o-transform: rotate(360deg); }
to { -o-transform: rotate(0); }
}
@keyframes rotate {
from { transform: rotate(360deg); }
to { transform: rotate(0); }
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/circletype.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="circle-text">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="100px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<defs>
<path id="circlePath" d="M 150, 150 m -60, 0 a 60,60 0 0,1 120,0 a 60,60 0 0,1 -120,0 "/>
</defs>
<circle cx="150" cy="100" r="75" fill="none"/>
<g>
<use xlink:href="#circlePath" fill="none"/>
<text fill="#FB4D98">
<textPath xlink:href="#circlePath">ROTATE . ROTATE . ROTATE . ROTATE . </textPath>
</text>
</g>
</svg>
</div>
