Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mattrudd

Circle scaling up to reveal text circle

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

Since you're using SVG text, I'd probably drop everything into the SVG and use a mask/clip-path. Here's an old demo with something similar.

 

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

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

  • Solution

Here's a ScrollTrigger version. :)

 

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

  • Like 5
Link to comment
Share on other sites

@PointC Thanks for the nudge towards SVG masks! Another topic to learn about there.

 

Massively grateful for your ScrollTrigger version - was literally just trying to interpret my original tweening into your SVG mask example, and you've done it for me!

 

🙌

  • Like 2
Link to comment
Share on other sites

@PointC Thank you, will have a read for sure.

 

I see you're scaling the whole SVG container - I'm struggling to work out how best to scale just the blue circle on scroll? So that it fills the whole viewport.

 

 

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

Here's a 3rd version that fills the containing div with blue. You'll probably need to get the screen size to make sure you add enough radius, but this should get you started.

 

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

 

Happy tweening.

  • Like 2
Link to comment
Share on other sites

@PointC you're the man. The Greensock forum needs a 'buy them a coffee' button, at the very least!

 

Thanks again loads.

 

 

  • Like 3
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

@GreenSock 😄 that all depends on how much traction I get with this Portfolio site I'm building! 

  • Haha 1
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

here you go

 

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

 

I'll look for my Tesla later this week. ;)

  • Like 1
  • Thanks 1
  • Haha 2
Link to comment
Share on other sites

8 minutes ago, PointC said:

here you go

Craig, don't forget to tell Matt your color preference ;)

  • Haha 2
Link to comment
Share on other sites

I need color changing paint like the new BMWs.

 

 

  • Haha 1
Link to comment
Share on other sites

58 minutes ago, PointC said:

I need color changing paint like the new BMWs.

 

Wow!!! 🤯

Link to comment
Share on other sites

1 hour ago, PointC said:

I need color changing paint like the new BMWs.

 

It's ok @PointC, I got this one:

 

@keyframes BMW {
  0%   {background-color:white;}
  100% {background-color:black;}

 

Thanks again for your all your help!

  • Haha 4
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.
×