Jump to content
Search Community

Marquee text

EVA CORPORATION test
Moderator Tag

Recommended Posts

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

 
Link to comment
Share on other sites

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...😑

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
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();
		}

 

Link to comment
Share on other sites

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...

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...