Categories
#SVG Web development

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.

animate a text on the circle

Animation:

*animation opened in the Safari browser.
*to see the live output of the animation click here.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *