problem with circular rotating text on browser resize

I have a circle of text that rotates as you scroll down the page which is working absolutely fine. I have set the text to ‘display: hidden’ when the browser width is below 768px, if you decrease the browser width to below 768px it is hidden, then once increased it is visible again, this is working fine, BUT if you load the page below 768px (mobile breakpoint), and then increase the browser size, the text breaks and I cant figure out why. Code below and codepen here

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)`
  });
  });

html, body {
  height: 1000px;
}

.circular-text{
    position: fixed;
    bottom: 20px;
    right: 68px;
    z-index: 9999;
  
}

@media screen and (max-width:767px) {
  .circular-text{
    bottom: -10px;
    right: 39px;
  }
}
  
@media screen and (max-width:767px) {
  .circular-text { 
    display: none;
  }
}

.contact-text{
    font-family: "Alliance No 2";
    font-weight: 800;
    font-size: 10px;
    text-transform: uppercase;
    color: #fb4d98;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>

<div class="contact-container">  
        <div class="circular-text">
            <p class="contact-text">contact us • contact us • contact us •</p>
            </div>
        </div>

Answer

CircleType is not creating the circle properly when display: none;

As a workaround you can hide it in another way, such as: opacity: 0;

@media screen and (max-width:767px) {
  .circular-text { 
    opacity: 0;
  }
}

Advertisement

Answer