Skip to content
Advertisement

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

JavaScript
JavaScript
JavaScript

Advertisement

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;

JavaScript
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement