Jump to content
Search Community

Circle scaling up to reveal text circle

Mattrudd test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hi there, hope everyone is having a great 2022 so far!

 

Enjoying getting to grips, slowly but surely, with GSAP!

 

I'm trying to make a circle scale up to reveal a text wheel (that I'll make rotate on scroll eventually).

The clipping method I'm trying to employ is overflow:hidden.

 

Currently the text wheel just scales up with the circle, which I know is down to incorrect markup and styling. Not sure what combination is best here.

 

Appreciate this is more of a CSS issue but as it's CSS for a Scroll Trigger set up, I thought it worthy of an ask!

 

Wondering whether my issue is that I'm scaling up a circle div object from 1 pixel, which as a result can't work properly as a position relative/absolute > overflow:hidden parent.

 

Perhaps the DrawSVG plugin would be a better option, or is the effect I want possible with the right markup and styling?

 

Thanks as ever!

 

See the Pen NWazMrV by matt-rudd (@matt-rudd) on CodePen

Link to comment
Share on other sites

37 minutes ago, Mattrudd said:

I see you're scaling the whole SVG container

I assume you meant rotating, correct?

 

If so, yeah - I just picked the whole SVG to rotate, but you can target the group with the circle and text like this.

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

 

Happy tweening.

:)

 

Edit. Sorry, just re-read your question. You did indeed mean scaling.

 

  • Like 1
Link to comment
Share on other sites

23 minutes ago, Mattrudd said:

The Greensock forum needs a 'buy them a coffee' button, at the very least!

Did you mean "Buy them a Tesla"? 🤔

 

Yeah, @PointC is a rock star around here, as are @akapowl, @Carl, @elegantseagulls lately and really all the moderators. The staff too ( @Cassie & @OSUblake ). It's a dream team. 🙌

  • Like 4
  • Haha 2
Link to comment
Share on other sites

Notice that wasn't a 'no' to the Tesla @PointC - more of a 'not quite yet' 😉

 

If I promise to keep learning (currently working through @Carl's excellent Creative Coding Club), could I stretch to one more ask, toward one of you kind experts?

I'm trying to centre the text wheel SVG to the centre of the blue circle. Got a bit stuck with the markup and CSS once again. 

 

The container's set to align/justify items, but I can't fathom why the #wheel, as child element, isn't centred like the blue circle?

 

I'll then figure out rotating this text wheel svg as the circle scales on scroll, not after the scale finishes as above.

 

See the Pen BawPzKZ by matt-rudd (@matt-rudd) on CodePen

  • Like 1
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...