Curved text (+animation)

Question

I'm trying to have a banner in the corner of my website with curved and animated (infinite banner style) text inside a responsive div.

Something like this:

I'm a rookie at programming and also tried doing it with.svg's based on other's examples, but with little luck.

The original curve in photoshop is an "Arc upper" (+47%)

Any help much appreciated! A

Answer 1

I'm not sure if this is what you want or not, but hope it works:

 function curvedText(time) { var tl = new TimelineMax({ repeat: -1 }); var text = document.querySelector("svg textpath"), path = document.querySelector("svg defs path"); var from = { transformOrigin: "center center", rotation: 0, }; var to = { rotation: -360, ease: Linear.easeInOut, }; tl.fromTo([text, path], time, from, to); return tl; } curvedText(20);

 body { position: relative; } div { position: fixed; right: 0; bottom: 0; width: 400px; height: 200px; /* border: 1px solid black; */ overflow: hidden; } svg:not(:root) { overflow: visible; } svg { position: absolute; right: 50px; bottom: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> <div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="150 -400 600 600"> <defs> <path id="txt-path" d="M50, 800a800, 800 0 1, 1 1600, 0a800, 800 0 1, 1 -1600, 0"></path> </defs> <text fill="red" font-size="70px" font-family="Helvetica Neue" font-weight="600"> <textPath startOffset="1000" xlink:href="#txt-path"> I'm trying to have a banner in the corner of my website with curved and animated (infinite banner style) text inside a responsive div. </textPath> </text> </svg> </div>

Don't forget to add CDN to your codes:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>