does anyone know how to get the overlap property?

[BennyTuner]

I'm  making an animation that allows users to drag a cloud over the sun which makes stuff dimmer - I've got something based on the above codepen working with hitTest. What I would like to get is the percentage overlap - I could test for values I suppose...

if (this.hitTest(droppables[i], "10%")) {
						onDrop(this.target, droppables[i]);
//value is 10
                    }
if (this.hitTest(droppables[i], "20%")) {
						onDrop(this.target, droppables[i]);
//value is 20
                    }
///and so on...

Ideally I'd like to get the value dynamically so that my dimming looks real - though I could fake it with an ease on drop I guess?

See the Pen GFBvn by GreenSock (@GreenSock) on CodePen

[BennyTuner]

this works, bit verbose, will put it in a switch block

                if (this.hitTest(droppables[i], "50%")) {
                    console.log("50");
                } else if (this.hitTest(droppables[i], "40%")) {
                    console.log("40");
                } else if (this.hitTest(droppables[i], "30%")) {
                    console.log("30");
                } else if (this.hitTest(droppables[i], "20%")) {
                    console.log("20");
                } else if (this.hitTest(droppables[i], "10%")) {
                    console.log("10");
                }

 

[ZachSaucier]

Hey BennyTuner and welcome to the GreenSock forums.

 

You could do the same thing with a loop and a variable to save on code length if you wanted to 

[PointC]

Similar question. May be helpful.

 

[BennyTuner]

thanks Zach and Point C for your advice

I did try to refactor the code to be less verbose but you have to offer up the hitTest every time you test it so switch didn't work

The other thing to remember is that you are testing for the minimum coverage so you must test for the largest values first - if you tested for the smallest percentage first it would always break there - so unless anyone has a better suggestion I came up with this...

                if (this.hitTest(droppables[i], "100%")) {
                    console.log("100");
                } else if (this.hitTest(droppables[i], "90%")) {
                    console.log("90");
                } else if (this.hitTest(droppables[i], "80%")) {
                    console.log("80");
                } else if (this.hitTest(droppables[i], "70%")) {
                    console.log("70");
                } else if (this.hitTest(droppables[i], "60%")) {
                    console.log("60");
                } else if (this.hitTest(droppables[i], "50%")) {
                    console.log("50");
                } else if (this.hitTest(droppables[i], "40%")) {
                    console.log("40");
                } else if (this.hitTest(droppables[i], "30%")) {
                    console.log("30");
                } else if (this.hitTest(droppables[i], "20%")) {
                    console.log("20");
                } else if (this.hitTest(droppables[i], "10%")) {
                    console.log("10");
				}

 

[BennyTuner]

Just now, BennyTuner said:

thanks Zach and Point C for your advice

I did try to refactor the code to be less verbose but you have to offer up the hitTest every time you test it so switch didn't work

The other thing to remember is that you are testing for the minimum coverage so you must test for the largest values first - if you tested for the smallest percentage first it would always break there - so unless anyone has a better suggestion I came up with this...

                if (this.hitTest(droppables[i], "100%")) {
                    console.log("100");
                } else if (this.hitTest(droppables[i], "90%")) {
                    console.log("90");
                } else if (this.hitTest(droppables[i], "80%")) {
                    console.log("80");
                } else if (this.hitTest(droppables[i], "70%")) {
                    console.log("70");
                } else if (this.hitTest(droppables[i], "60%")) {
                    console.log("60");
                } else if (this.hitTest(droppables[i], "50%")) {
                    console.log("50");
                } else if (this.hitTest(droppables[i], "40%")) {
                    console.log("40");
                } else if (this.hitTest(droppables[i], "30%")) {
                    console.log("30");
                } else if (this.hitTest(droppables[i], "20%")) {
                    console.log("20");
                } else if (this.hitTest(droppables[i], "10%")) {
                    console.log("10");
				}

 

easy, crude and effective!

[ZachSaucier]

Again, you could use a loop to set it up if you wanted to. Something like this:

See the Pen JjbVLwG?editors=0010 by GreenSock (@GreenSock) on CodePen

[BennyTuner]

thanks again Zak for taking the time to make a pen - though it looks like more code than the way I'm doing it

I still don't get it - hitTest returns a boolean so I don't see how it could be a variable? you have to ask it again and again until it says yes don't you?

Anyway, it's working for me so I'm a happy bunny

One thing as I find my feet with GSAP I've been scrolling through Greensock codepens to find great ideas and there are loads of empty pens that baffled me (and annoyed me if I'm honest), I now realise they've been made by you Greensockers (is that even a word for GS employees?) - might be a good idea to delete them (or use a second account) - no criticism - only pointing it out to be useful

I'm still on the learning curve but what I've seen so far I'll be taking a sub soon - excellent product - at last, another great jquery library as useful as bootstrap

[ZachSaucier]

1 hour ago, BennyTuner said:

it looks like more code than the way I'm doing it

That's ironic because the majority of the code in the demo I made is your approach  I included both so that you can see how concise the method I suggest (secondMethod) is compared to your method (firstMethod). You'd need to replace my doSomething function with a hitTest in your case. All I was showing in the demo is how to use a loop to do the comparison like you need.

 

1 hour ago, BennyTuner said:

Greensockers (is that even a word for GS employees?)

We don't have a name, but GreenSockers is something people have used occasionally in the past. 

 

1 hour ago, BennyTuner said:

I've been scrolling through Greensock codepens to find great ideas and there are loads of empty pens that baffled me (and annoyed me if I'm honest)

I'm curious which ones you're talking about. As far as I know, all demos have a purpose and most are used in these forums somewhere. You could search the forums for the pen ID and see a related thread in most cases.

 

If you're looking for pens to learn from, check out the GreenSock collections or the hearted pens. 

[BennyTuner]

27 minutes ago, ZachSaucier said:

That's ironic because the majority of the code in the demo I made is your approach  I included both so that you can see how concise the method I suggest (secondMethod) is compared to your method (firstMethod). You'd need to replace my doSomething function with a hitTest in your case. All I was showing in the demo is how to use a loop to do the comparison like you need.

 

We don't have a name, but GreenSockers is something people have used occasionally in the past. 

 

I'm curious which ones you're talking about. As far as I know, all demos have a purpose and most are used in these forums somewhere. You could search the forums for the pen ID and see a related thread in most cases.

 

If you're looking for pens to learn from, check out the GreenSock collections or the hearted pens. 

potatos potahtos!

 

28 minutes ago, ZachSaucier said:

I'm curious which ones you're talking about. As far as I know, all demos have a purpose and most are used in these forums somewhere. You could search the forums for the pen ID and see a related thread in most cases.

go to https://codepen.io/GreenSock

find a pen, mouseover and you see a cross appear top r, click on it and the pen appears center screen. There are scroll tabs right and left - not very obvious -  that's how I was going through them - it's a view you can't get to from a pen for some reason! it's a good way to scroll through though and I just noticed a load of pens pooped up with the TEMPLATE standard look - there were others that didn't work (or it wasn't obvious what they did or what you had to do to make them work). I found at least 10 that I would be proud to tweak for my sites. Does codepen allow ordering? CP is a great marketing tool for you I think

[ZachSaucier]

6 minutes ago, BennyTuner said:

potatos potahtos!

What do you mean by this? I understand the phrase but I don't see how it relates to what I said.

 

6 minutes ago, BennyTuner said:

I just noticed a load of pens pooped up with the TEMPLATE standard look - there were others that didn't work (or it wasn't obvious what they did or what you had to do to make them work)

All of them work, they just serve their purpose. Going through the most recent public pens made by GreenSock isn't the best way to learn.

 

6 minutes ago, BennyTuner said:

Does codepen allow ordering?

No, not really.

 

6 minutes ago, BennyTuner said:

CP is a great marketing tool for you I think

I think we use CodePen about as well as we can use it  

[BennyTuner]

like in the song 'you say tomaytos I say tomartos' I merely meant many ways to skin a cat. Excuse me, I'm a c# guy so my javascript is like the drunk uncle at the BBQ!