Wrap dynamic text around a spinning cylinder with CSS/Javascript (splitting.js)

Question

I am fairly new to coding and don't have the in-depth knowledge to solve this problem on my own. I would be really grateful if somebody could help me out!

I am trying to wrap a dynamically loaded text without a fixed number of characters around a spinning cylinder using CSS and splitting.js. I tried following this tutorial and everything worked great until I started changing the text. The problem is that this method only works with text that doesn't change in length because it either gets cut off if the text is too long or a gap in the cylinder results if it is too short.

Here is the source code I have right now. Sadly it doesn't work properly when I paste it in jsfiddle. It does however work just fine in my code editor and is the same as in the tutorial I linked above.

        <div class="circle" data-splitting>
        Circle-Text-Animation-Effect-Cool-great
    </div>
    <script>
        Splitting();
    </script>


    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color:aqua;
}


.circle {
    transform-style: preserve-3d;
    animation: animate 8s linear infinite;
}

@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
    }

    100% {
        transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
    }
}

.circle .char {
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: blue;
    font-size: 4em;
    padding: 5px 12px;
    border: 4px solid black;
    transform-style: preserve-3d;
    transform-origin: center;
        transform: rotateY(calc(var(--char-index) * 10deg)) translateZ(250px);

}

Is there any workaround for this problem? Maybe even without using splitting.js?

I hope I could describe my problem properly. English isn't my first language and I can't upload images to Stackoverflow yet so I wasn't able to describe the problem visually!

Thank you in advance for your help!

enter image description here

Answer 1

The trick here is to note that the number of degrees you need to rotate a character depends on the total number of characters in the string.

I don't have the splitter.js library so have put in a bit of JS which does the same thing - separates each character into its own div with a style that defines a CSS variable - the index of the character.

The JS also sets a new CSS variable, --numchs, which is used in the CSS to calculate the number of degrees to rotate each character, --deg. This is then used instead of the 10deg to decide where to place a character.

        const circle = document.querySelector('.circle');
        const text = circle.innerHTML;// Note I am being lazy here and assuming the string has no unwanted whitespace
        circle.innerHTML = '';        
        circle.style.setProperty('--numchs', text.length);
        for ( let i = 0; i < text.length; i++ ) {
          circle.innerHTML = circle.innerHTML + '<div class="char" style="--char-index: ' + i + ';">' + text.charAt(i) + '</div>';
        }

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color:aqua;
}


.circle {
    transform-style: preserve-3d;
    animation: animate 8s linear infinite;
    --deg: calc(360deg / var(--numchs));
}

@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
    }

    100% {
        transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
    }
}

.circle .char {
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: blue;
    font-size: 4em;
    padding: 5px 12px;
    border: 4px solid black;
    transform-style: preserve-3d;
    transform-origin: center;
        transform: rotateY(calc(var(--char-index) * var(--deg))) translateZ(250px);

}

<div class="circle" data-splitting>Circle-Text-Animation-Effect-Cool-great</div>