Animate marquee on SVG curve

Asked
Active3 hr before
Viewed126 times

6 Answers

animate
90%

The main idea is that the path has to coil twice. And when the startOffset is at 50% you make it 0. Also because the length of the path is changing when you resize the window you need to recalculate the font-size. I hope it helps., What are the causes of negative real interest rates? , Podcast 378: The paranoid style in application development , Why are these two 20A breakers tied together? (US)

function Init() {
   let w = wrap.clientWidth;
   let h = wrap.clientHeight;
   ellipse.setAttributeNS(null, "viewBox", `0 0 ${w}  ${h}`);
   let d = `M${w / 10},${h / 2}A${4 * w / 10},${4 * h / 10} 0 0 0 ${9 *
    w /
    10} ${5 * h / 10} A${4 * w / 10},${4 * h / 10} 0 0 0 ${w / 10} ${5 *
    h /
    10} A${4 * w / 10},${4 * h / 10} 0 0 0 ${9 * w / 10} ${5 * h / 10} A${4 *
    w /
    10},${4 * h / 10} 0 0 0 ${w / 10} ${5 * h / 10}`;

   thePath.setAttributeNS(null, "d", d);

   let paths_length = thePath.getTotalLength();
   tp.style.fontSize = paths_length / 205;
}

window.setTimeout(function() {
   Init();
   window.addEventListener("resize", Init, false);
}, 15);

let so = 0;

function Marquee() {
   requestAnimationFrame(Marquee);
   tp.setAttributeNS(null, "startOffset", so + "%");
   if (so >= 50) {
      so = 0;
   }
   so += 0.05;
}

Marquee();
#wrap {
   width: 100 vw;height: 100 vh
}
svg {
   background: #eee;
}
<div id="wrap">
   <svg id="ellipse" version="1.1" viewBox="0 0 1000 1000">
      <path id="thePath" fill="gold" d="M100,500A400,400 0 0 0 900 500 A400,400 0 0 0 100 500 A400,400 0 0 0 900 500 A400,400 0 0 0 100 500" />


      <text stroke="#000000">
         <textPath xlink:href="#thePath" dy="5" id="tp">
            Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon •
         </textPath>
      </text>
   </svg>
</div>
load more v
88%

I have a text that is wrapping around an SVG circle which is scaling depending on window size – thanks to user enxaneta https://stackoverflow.com/a/56036245/10727821. I want to animate the text so that it would be revolving around the center like a marquee. For this, my code currently looks like this:,The main idea is that the path has to coil twice. And when the startOffset is at 50% you make it 0. Also because the length of the path is changing when you resize the window you need to recalculate the font-size. I hope it helps.,Initially I'm setting the font size much bigger than needed. Next I check if the text length is bigger than half path length, and if so I'm reducing the font size. I'm doing this in a while loop:,One easy fix would be setting the attribute textLength equal to the length of the path divided by 2 (since the path is coiling twice - is twice as long as it should be). Also you need tu use lengthAdjust="spacingAndGlyphs" that is controlling how the text is stretched or compressed into that length.

function Init() {
   let wrap = document.getElementById('wrap');
   let thePath = document.getElementById('thePath');
   let ellipse = document.getElementById('ellipse');
   let w = wrap.clientWidth;
   let h = wrap.clientHeight;
   ellipse.setAttributeNS(null, "viewBox", `0 0 ${w}  ${h}`);
   let d = `M${w/10},${h/2}A${4*w/10},${4*h/10} 0 0 0 ${9*w/10} ${5*h/10} A${4*w/10},${4*h/10} 0 0 0 ${w/10} ${5*h/10}`

   thePath.setAttributeNS(null, "d", d)
}

window.setTimeout(function() {
   Init();
   window.addEventListener('resize', Init, false);
}, 15);

let so = 0

function Marquee() {
   let tp = document.getElementById('tp');
   requestAnimationFrame(Marquee)
   tp.setAttributeNS(null, "startOffset", so + "%");
   if (so >= 50) {
      so = 0;
   }
   so += .05
}

Marquee()
<div id="wrap">
   <svg id="ellipse" version="1.1" viewBox="0 0 1000 1000" preserveAspectRatio="none">
      <path id="thePath" fill="transparent" d="M100,500A400,400 0 0 0 900 500 A400,400 0 0 0 100 500" />


      <text stroke="black" font-size="20">
         <textPath xlink:href="#thePath" dy="5" id="tp">
            Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon •
            Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon •
            Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon • Coming Soon •
         </textPath>
      </text>
   </svg>
</div>
load more v
72%

In our experiment, we made the animation smoother and used SVG filters, while also using different paths. Additionally, we worked with the Intersection Observer API for animating only the texts that are in the viewport. The intensity of the SVG filters depends on the scroll speed., Tagged with: animation path scrolling svg filter textPath ,If you want to learn more about SVG filters and how to use them to create interesting effects, have a look at our dedicated series written by Sara Soueidan:,Animating SVG text on a path on scroll has been explained really well in this great video tutorial by the keyframers. The basic idea is to couple the startOffset value of a textPath element with the scroll position, allowing the text to move along its path while scrolling.

From our sponsor: Try Mailchimp today.

Animating SVG text on a path on scroll has been explained really well in this great video tutorial by the keyframers. The basic idea is to couple the startOffset value of a textPath element with the scroll position, allowing the text to move along its path while scrolling.

startOffset
load more v
65%

The three most popular vector graphics editors are:,SVGs are interactive and styleable with CSS and JavaScript.,Animations and interactivity can be added via CSS or JavaScript. In this article, we’ll focus on CSS.,And it can be placed outside of it, if you’re embedding the SVG inline in the document:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
   <polygon fill="#FF931E" stroke="#ED1C24" stroke-width="5" points="279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 " />
</svg>
load more v
75%

Frontend Masters has an incredible course on all things CSS and SVG animation from CSS-Tricks own Sarah Drasner. Sarah comprehensively covers the possibilty of animation, the tools, and does it all in a very practical way.,I’m not 100% sure how they did it, but we can do some quick hacky math by watching the scroll position of the page and setting that attribute in a way that makes it move about as fast and far as we want.,The related posts above were algorithmically generated and displayed here without any load on our servers at all, thanks to Jetpack.,Text on a curved line is a cool design look for any number of reasons! It just isn’t seen that much on the web, so when it is used, it stands out.

The curved line is drawn in SVG as a <path>, and the <text> is set upon it by a <textPath>:

<svg width="100%" height="160px" viewBox="0 0 1098.72 89.55">
   <path id="curve" fill="transparent" d="M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19"></path>
   <text width="100%" style="transform:translate3d(0,0,0);">
      <textPath style="transform:translate3d(0,0,0);" alignment-baseline="top" xlink:href="#curve">*The pictures are not technically selfies.</textPath>
   </text>
</svg>
load more v
40%

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Definition and Usage

The animation-name property specifies a name for the @keyframes animation.

animation - name

Other "animate-undefined" queries related to "Animate marquee on SVG curve"