Jump to content
Search Community

Scaling a background from 0 to fully cover the screen

totem test
Moderator Tag

Recommended Posts

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 by totem
Codepen link added
Link to comment
Share on other sites

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

Two things:

  1. 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. 
  2. 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

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.

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