Jump to content
Search Community

Draw svg text with scrolltrigger

Dennyno test
Moderator Tag

Go to solution Solved by Dennyno,

Recommended Posts

  • Solution

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

Link to comment
Share on other sites

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

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?

Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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 :(

 

Link to comment
Share on other sites

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 :( 

Link to comment
Share on other sites

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.

:)

 

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...
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.  :)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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. 

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