Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sonya.Ninja

SplitText and Stagger - Illusion of curving text around a sphere

Recommended Posts

Hi Zach! (because he always answers me first)

 

I have this damn planet with a banner of text that I need to "curve" around it.

I've split the text and was hoping to apply a stagger to animate the scale of each letter as it slides across the planet but, of course, they either scale all at once or one at a time.

 

Am I using the wrong GSAP technology for what I want to achieve?

 

Thanks (always) for the excellent support!

See the Pen RwaapPz?editors=0010 by sonya-ninja (@sonya-ninja) on CodePen

Link to comment
Share on other sites

Hey @Sonya.Ninja,

 

Staggering the scale of a split text horizontally is not that easy (spacing of the words). Here's just a try with two stagger tweens

 

See the Pen eYZZRzZ by mikeK (@mikeK) on CodePen

 

@PointC has a super vertical solution: an overlap repeating loop

 

See the Pen JjXXJKJ by mikeK (@mikeK) on CodePen

 

But ZACH definitely has something else in the quiver ...

 

Happy scrolling for a better world ...

Mikel

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, mikel said:

Hey @Sonya.Ninja,

 

Staggering the scale of a split text horizontally is not that easy (spacing of the words). Here's just a try with two stagger tweens

 

 

 

 

@PointC has a super vertical solution: an overlap repeating loop

 

 

 

 

But ZACH definitely has something else in the quiver ...

 

Happy scrolling for a better world ...

Mikel

 

I'm so amused - it's the first time someone other than Zach has replied!

I've just had a whisky so I'll re-think these solutions when I'm less tipsy.  No more coding for me today!

The vertical solution may just be a working compromise.  I'm most interested though, in how you managed to make the scale animation happen in the middle of my planet - my brain is too fuzzy to understand what you did, but it seems as though it has something to do with animating the stagger from the centre? I'll sober up then look again. Thank you SO much Mikel (and PointC) for the ideas!

 

Link to comment
Share on other sites

7 hours ago, Sonya.Ninja said:

Hi Zach! (because he always answers me first)

Hahaha, thanks for the shout out :D You posted before I was awake. Sorry to disappoint by not answering first but mikel gave a great answer!

 

If you want text to actually wrap around a planet then it'd be good to use a technology like WebGL (GSAP can still help out with the animation). Depending on the complexity of the globe you need https://globekit.co/ might be a helpful resource.

 

Overall you post is pretty broad. If you have a specific question let us know :) 

  • Like 1
Link to comment
Share on other sites

18 minutes ago, ZachSaucier said:

Hahaha, thanks for the shout out :D You posted before I was awake. Sorry to disappoint by not answering first but mikel gave a great answer!

 

If you want text to actually wrap around a planet then it'd be good to use a technology like WebGL (GSAP can still help out with the animation). Depending on the complexity of the globe you need https://globekit.co/ might be a helpful resource.

 

Overall you post is pretty broad. If you have a specific question let us know :) 

Hey Zach! There you Are!

 

I'm not going to add WebGL to this project - I already feel like God using GSAP - animating everything in the universe.  I went a bit overboard on the project (NOTHING is stationary - everything moves!) and now I'm trying to simplify.  I just wanted the illusion of a banner curving around the sphere - it's not a train-smash.  I'll figure out a different effect for this one (perhaps something like what PointC suggested).  WebGl would be fun though - perhaps for the next project.

 

Have an awesome Saturday!

Link to comment
Share on other sites

It sounds like you want more of a fluid movement as the letters go across the globe? Like when one letter is at full size, the letters on each side of it are still scaling back down. If that's the case, it seems a lot like my wavy slider demo. Maybe it'll give you some ideas.

 

See the Pen zYrjoLq by PointC (@PointC) on CodePen

 

I also have a full tutorial on its creation here:

https://www.motiontricks.com/wavy-gauge-numbers/

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

8 minutes ago, PointC said:

It sounds like you want more of a fluid movement as the letters go across the globe? Like when one letter is at full size, the letters on each side of it are still scaling back down. If that's the case, it seems a lot like my wavy slider demo. Maybe it'll give you some ideas.

 

 

 

 

I also a full tutorial on its creation here:

https://www.motiontricks.com/wavy-gauge-numbers/

 

Hopefully that helps. Happy tweening.

:)

 

YES YES YES YES!!!!!! Thank you!

Link to comment
Share on other sites

3 hours ago, PointC said:

It sounds like you want more of a fluid movement as the letters go across the globe? 

 

See the Pen YzqqYVo by mikeK (@mikeK) on CodePen

 

Sorry - no tutorial.

 

Happy curving ...

Mikel

  • Like 2
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.
×