Jump to content
GreenSock

totem

Scaling a background from 0 to fully cover the screen

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

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

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

4 minutes ago, darkgr33n said:

line 21/22

What demo are you referencing?

Link to comment
Share on other sites

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!

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