Draw svg text with scrolltrigger

[Dennyno 42 Likes (Newbie)]

Hi guys, need to draw the text around the circle path by scrolling.

I came from a @PointC demo that used the click event, and I changed it to scrolltrigger and scrub.

Questions are: how to handle long text (many words with spacing?)  and most important: why on mobile I got problems and doesnt roll at all?

Last (but not important, it's more to understand, being that Im lacking on svg animations ) how to make the first path draw itself before the text rolls? (Or fills the path itself with another colour [always meaning before the text roll] ?).  Do I need to draw a secondary path ?

Thanks

See the Pen VwQVzEW by DedaloD (@DedaloD) on CodePen

[Dennyno 42 Likes (Newbie)]

EDIT: Solved the rolling on mobile: it has been a spacing problem. 

EDIT 2: understood also how to handle the offset. 🤭

Still need to understand how to handle long text (maybe with overflowing?) .

And how to draw the first path before the animation starts? Does it work as any other timelines and gsap animations?

[PointC 14,466 Likes (Superhero)]

If you want the text to enter one side of the path and exit the opposite direction, you can tween fromTo 100%/-100% for the startOffset. Something like this:

See the Pen 7df4af981abf20511d3a409acf0fe150 by PointC (@PointC) on CodePen

 

8 minutes ago, Dennyno said:

And how to draw the first path before the animation starts? Does it work as any other timelines and gsap animations?

I'm not sure I understand this part. Do you mean the path that the text follows?

[Dennyno 42 Likes (Newbie)]

2 minutes ago, PointC said:

If you want the text to enter one side of the path and exit the opposite direction, you can tween fromTo 100%/-100% for the startOffset. Something like this:

 

 

 

I'm not sure I understand this part. Do you mean the path that the text follows?

Thanks for replying!

As Tripti did here (and also on the GSAP draw svg demo) 

See the Pen GRyBxeZ by tripti1410 (@tripti1410) on CodePen

it's a lot of code, paths and elements to understand and debug

 

[PointC 14,466 Likes (Superhero)]

Sorry, still missing it. What path in your demo should be drawn first? 

[Dennyno 42 Likes (Newbie)]

Hi, sorry for the belated reply.

I did somethig here, just to learn stuff.  

See the Pen KKQrZmr by DedaloD (@DedaloD) on CodePen

How can I achieve

1: to draw the path  on reverse state, (same as text?)
2:  to make text start with low opacity and fade in to full opaque, only while exiting from the circle?
I tried many combos on the timeline and many gsap syntax, but the transition always start as same as other ones. So the text is full visible as soon as the animation starts.. and this is something that hurts the eyes , getting text over text  

[PointC 14,466 Likes (Superhero)]

Okay, a few things.

• If you want to use ScrollTrigger on the whole timeline, you need to move it off the single tween and into the timeline vars.
• Your end value should be "+=800" rather then "end+800"
• When scrubbing, the durations don't really matter as they represent a percentage of the scrub distance rather than an actual duration 

Here's a fork of your pen with some changes.

 

See the Pen 3c7f4f4ac6013860491e013d5514ce16 by PointC (@PointC) on CodePen

 

I've moved ST to the timeline vars. The first tween has a duration of 1 second and it draws the path. The next two tweens start at the same time via the position parameter label. The first fades the text in over 2 seconds and the next animates the letters via the startOffset attribute with a duration of 8 seconds. The next is another opacity tween that fades out the letters and that starts 2 seconds before the end of the letter loop. Finally, we have a 1 second tween that draws off the path. 

 

So, we have a 10 second timeline and that breaks down to percentages of the scroll distance like this:

0% → 10% Path draws in.

10% → 30% letters fade in and that starts at the same time as the 10% → 90% letter loop.

70% → 90% the letters fade out.

90% → 100% the path erases itself.

 

A couple final notes:

• I'm not sure what you're trying to do with the onEnter and reversing the same timeline being controlled by ScrollTrigger.
• Using letter and word spacing in the CSS will require some manual adjustments to the startOffset end value needed to make the letters fully exit. I used -200%.
• If you want to change the opacity of individual letters as they animate, that would require separating them. Probably best to use MotionPath and convert the text to paths if that's the desired result.

Hopefully that helps. Happy tweening.

 

[Dennyno 42 Likes (Newbie)]

On 6/11/2022 at 5:54 PM, PointC said:

Okay, a few things.

• If you want to use ScrollTrigger on the whole timeline, you need to move it off the single tween and into the timeline vars.
• Your end value should be "+=800" rather then "end+800"
• When scrubbing, the durations don't really matter as they represent a percentage of the scrub distance rather than an actual duration 

Here's a fork of your pen with some changes.

 

 

 

 

I've moved ST to the timeline vars. The first tween has a duration of 1 second and it draws the path. The next two tweens start at the same time via the position parameter label. The first fades the text in over 2 seconds and the next animates the letters via the startOffset attribute with a duration of 8 seconds. The next is another opacity tween that fades out the letters and that starts 2 seconds before the end of the letter loop. Finally, we have a 1 second tween that draws off the path. 

 

So, we have a 10 second timeline and that breaks down to percentages of the scroll distance like this:

0% → 10% Path draws in.

10% → 30% letters fade in and that starts at the same time as the 10% → 90% letter loop.

70% → 90% the letters fade out.

90% → 100% the path erases itself.

 

A couple final notes:

• I'm not sure what you're trying to do with the onEnter and reversing the same timeline being controlled by ScrollTrigger.
• Using letter and word spacing in the CSS will require some manual adjustments to the startOffset end value needed to make the letters fully exit. I used -200%.
• If you want to change the opacity of individual letters as they animate, that would require separating them. Probably best to use MotionPath and convert the text to paths if that's the desired result.

Hopefully that helps. Happy tweening.

 

 Forgot to thank you @PointC.  

[Cassie 5,657 Likes (Superhero)]

💚 Thanks Denny - I see you doing the 'thankyou' rounds.

[Volt 22 16 Likes (Newbie)]

Hello everyone,

How do I achieve something like what is on the codepen above with the svg lines on scroll on the second section of this website - https://beebeenatural.webflow.io/, I'm not even sure how to properly position the curved path of the svg line behind the jars. 
Please help.

[GSAP Helper 122 Likes (Specialist)]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

In general, the effect you're talking about involves hooking up a drawSVG tween to the scroll position using ScrollTrigger. But it is definitely not trivial to keep it perfectly in sync with a position in the viewport without doing some very advanced CustomEase techniques. You can sometimes get kinda close, though, if you're careful about how you construct the shape of your path. 

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.