Round text animation on Scroll

Lately, I posted the SVG tutorial, how to move the text on the path (to see the tutorial click here), today I’ll show you another SVG text effect, how to move SVG text on the circle path by mouse scrolling.

Animation:

Demo:

What do you need to do?

1. Add SVG
2. Add CSS
3. Add JavaScript

Step1.

Add SVG

Add an SVG shape (circle), and the text:

<svg id="tutorial" data-name="tutorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.48 144.48">
 
  <path class="shape" id="shape" d="M242.93,123A71.74,71.74,0,1,1,171.2,51.22,71.73,71.73,0,0,1,242.93,123Z" transform="translate(-98.96 -50.72)"/>

   <text font-family="arial" font-size="14" fill="black">
        <textPath xlink:href="#shape" startOffset="500px" id="textPath">Scroll to move a text on the circle.</textPath>
      
    </text>
</svg>

Step2.

Add CSS

Style the text and the circle:

body {
  height: 200vh;  
}

.shape {
  fill:none;
  stroke:#1d1d1b;
}

#tutorial {
  position: fixed;
  overflow: visible;
  width: 15%;
  left: 40%;
  top: 100px;
  transform: rotate(-150deg);
}

Step3.

Add JavaScript

const textPath = document.querySelector("#textPath");

const a = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", event => {
  let percent = (a[st]||b[st]) / ((a[sh]||b[sh]) - a.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 5) + 500)
});

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Read also:

How to resize an SVG image?

CSS Moon orbiting the Earth on the SVG path

SVG Draw on Scroll