Marquee text

[EVA CORPORATION 6 Likes (Newbie)]

I wanted to make a marquee text using svg master-line, but I only managed to make it go in one direction.

Question, is it possible to make it in a circle svg master-line?

See the Pen QWVMopv by eglit_m (@eglit_m) on CodePen

[Cassie 5,650 Likes (Superhero)]

Hi there! Could you rephrase your question for me?

What do you mean by circle SVG master-line?

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

Maybe something like this:

See the Pen rNZqwQZ by GreenSock (@GreenSock) on CodePen

 

All credits to @nico fonseca who created this amazing example:

 

Hopefully this helps.

Happy Tweening!

[Cassie 5,650 Likes (Superhero)]

oh duh, just a circle. 😂 Sorry for being slow.

[EVA CORPORATION 6 Likes (Newbie)]

14 hours ago, Cassie said:

What do you mean by circle SVG master-line?

 

Do you know there is such a thing as a running ad line?

They usually go in a circle, in the plan they repeat from one end of the line to the other.

That's the question, how to loop a string by svg master-line? I managed to do it along the line, but it reaches the end and comes back from the place where it ended.

 

13 hours ago, Rodrigo said:

All credits to @nico fonseca who created this amazing example:

No, I meant this in a circle, but clockwise only

See the Pen zXKYvw by kryvonos_v (@kryvonos_v) on CodePen

 

[Cassie 5,650 Likes (Superhero)]

Oh ok I got you!

 

yoyo:true is the property that's making it go backwards and forwards (like a yoyo)

If you remove that and adjust the initial offset position it may be closer to what you're after?

See the Pen KKxGEJy?editors=1010 by GreenSock (@GreenSock) on CodePen

[EVA CORPORATION 6 Likes (Newbie)]

52 minutes ago, Cassie said:

If you remove that and adjust the initial offset position it may be closer to what you're after?

Yes, thank you!🥰

 

It also turns out that it was necessary to configure startOffset in textPath. By the way, I haven't really figured out startOffset yet >_<

When I was cleaning yoyo, he behaved strangely at me...😑

[EVA CORPORATION 6 Likes (Newbie)]

On 3/22/2023 at 12:38 PM, Cassie said:

Oh ok I got you!

 

yoyo:true is the property that's making it go backwards and forwards (like a yoyo)

If you remove that and adjust the initial offset position it may be closer to what you're after?
 

 

 

 

Good afternoon!

And tell me how to stop the animation and make the text just be on the Master Line?

I add this piece of code, but the text keeps moving

 

		onComplete: (w) => {
			animation.stop();
		}

 

[GreenSock 18,876 Likes (Superhero)]

I assume you meant animation.pause()? (there is no stop() method)

 

If you still need help, please make sure you provide a minimal demo like a CodePen that clearly illustrates the issue. 

[EVA CORPORATION 6 Likes (Newbie)]

2 hours ago, GreenSock said:

I assume you meant animation.pause()? (there is no stop() method)

 

If you still need help, please make sure you provide a minimal demo like a CodePen that clearly illustrates the issue. 

The first message is essentially my CodePen, but I can refer to it again 🥰

 

In general, they asked to leave the text on the curve (Master Line), but so that it does not move...

 

See the Pen QWVMopv by eglit_m (@eglit_m) on CodePen

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

Just remove the repeat: -1 from the config and set a different value for the end position of the text. Maybe something like this:

const tl = gsap.timeline();
tl.to("#masterTextPath", {
  duration: dur,
  attr: { startOffset: "32%" },
  ease: "power2.out"
});

Hopefully this helps.

Happy Tweening!

[EVA CORPORATION 6 Likes (Newbie)]

1 hour ago, Rodrigo said:

Hi,

 

Just remove the repeat: -1 from the config and set a different value for the end position of the text. Maybe something like this:

const tl = gsap.timeline();
tl.to("#masterTextPath", {
  duration: dur,
  attr: { startOffset: "32%" },
  ease: "power2.out"
});

Hopefully this helps.

Happy Tweening!

 

 

aaa... that's the thing.

There is no way to do without movement at all?

[mvaneijgen 2,479 Likes (Superhero)]

Of course you can! Just use a .set()! But then what is the use for GSAP? You can also directly update the  startOffset in the HTML.

 

See the Pen PoymYWO by mvaneijgen (@mvaneijgen) on CodePen