totem Posted November 30, 2020 Share Posted November 30, 2020 (edited) Hello, I'm new here! What I'm trying to do is to scale a green background from the center, in a way similar to this (with 100% border radius), except that I just need the effect to cover the screen, and not check where the click was made. Is there a simpler way to do that? I tried by scaling from 0 to 100%, but it's not the same as this example. Thank you in advance See the Pen PoGqpaW by nbot (@nbot) on CodePen Edited November 30, 2020 by totem Codepen link added Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 30, 2020 Share Posted November 30, 2020 Hey totem and welcome to the GreenSock forums. Can you please create a minimal demo of your issue? That way we can help where you're stuck instead of guessing what the issue might be. Perhaps this thread could help also: Link to comment Share on other sites More sharing options...
totem Posted November 30, 2020 Author Share Posted November 30, 2020 Thank you Zach! Sorry for the missing Codepen demo. I edited the post and inserted it. The problem with that scaling effect is that it doesn't expand (as a circle) over the whole page (like it happens in the case of the other thread I linked to) Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 30, 2020 Share Posted November 30, 2020 Two things: Depending on the viewport size your element isn't a square. So if you have a border radius of 50% it won't be a circle, it'll be an ellipse. You're animating the border radius over time. You probably don't want to do that. I recommend taking a look at the thread that I posted to learn how to do this sort of thing. You're also using some of the old GSAP syntax. We recommend the newer syntax. I think this article would be helpful: Link to comment Share on other sites More sharing options...
darkgr33n Posted December 1, 2020 Share Posted December 1, 2020 19 hours ago, totem said: Hello, I'm new here! What I'm trying to do is to scale a green background from the center, in a way similar to this (with 100% border radius), except that I just need the effect to cover the screen, and not check where the click was made. Is there a simpler way to do that? A very quick and dirty way to get that affect using the demo you linked to, would be just to amend line 21/22 to: // Event coords var x = vw/2; var y = vh/2; which is just the centre of the viewport based on the variables set earlier in the code - then the circle comes from the centre of the viewport at all clicks. you may be able to then remove the other bits you don't need. as I said, quick and dirty. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 1, 2020 Share Posted December 1, 2020 4 minutes ago, darkgr33n said: line 21/22 What demo are you referencing? Link to comment Share on other sites More sharing options...
darkgr33n Posted December 1, 2020 Share Posted December 1, 2020 oops. it's the demo totem referenced - although there are a few on that page! This one in particular: See the Pen fe1e511b8505fa9d75d4d9c3cb866f7d by osublake (@osublake) on CodePen I can't fork it, hence the line numbers above. As I said, it's not a solution but might help in the journey! 1 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