Mattrudd Posted January 6, 2022 Share Posted January 6, 2022 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 More sharing options...
PointC Posted January 6, 2022 Share Posted January 6, 2022 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. 4 Link to comment Share on other sites More sharing options...
Solution PointC Posted January 6, 2022 Solution Share Posted January 6, 2022 Here's a ScrollTrigger version. See the Pen abLjdNm by PointC (@PointC) on CodePen 5 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 6, 2022 Author Share Posted January 6, 2022 @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! 🙌 2 Link to comment Share on other sites More sharing options...
PointC Posted January 6, 2022 Share Posted January 6, 2022 Happy to help. Here's a little primer from my site about masks and clip-paths. You may find it useful. https://www.motiontricks.com/svg-masks-and-clippaths/ Happy tweening. 2 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 6, 2022 Author Share Posted January 6, 2022 @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 More sharing options...
PointC Posted January 6, 2022 Share Posted January 6, 2022 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. 1 Link to comment Share on other sites More sharing options...
PointC Posted January 6, 2022 Share Posted January 6, 2022 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. 2 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 6, 2022 Author Share Posted January 6, 2022 @PointC you're the man. The Greensock forum needs a 'buy them a coffee' button, at the very least! Thanks again loads. 3 Link to comment Share on other sites More sharing options...
GreenSock Posted January 6, 2022 Share Posted January 6, 2022 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. 🙌 4 2 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 6, 2022 Author Share Posted January 6, 2022 @GreenSock 😄 that all depends on how much traction I get with this Portfolio site I'm building! 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 6, 2022 Author Share Posted January 6, 2022 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 1 Link to comment Share on other sites More sharing options...
PointC Posted January 6, 2022 Share Posted January 6, 2022 here you go See the Pen XWeBjrb by PointC (@PointC) on CodePen I'll look for my Tesla later this week. 1 1 2 Link to comment Share on other sites More sharing options...
GreenSock Posted January 6, 2022 Share Posted January 6, 2022 8 minutes ago, PointC said: here you go Craig, don't forget to tell Matt your color preference 2 Link to comment Share on other sites More sharing options...
PointC Posted January 6, 2022 Share Posted January 6, 2022 I need color changing paint like the new BMWs. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted January 6, 2022 Share Posted January 6, 2022 58 minutes ago, PointC said: I need color changing paint like the new BMWs. Wow!!! 🤯 Link to comment Share on other sites More sharing options...
Mattrudd Posted January 6, 2022 Author Share Posted January 6, 2022 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! 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now