Curved text (+animation) - html

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>