Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
marcfolio

Draggable Hittest Percent hit?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Draggable has a hitTest that you can declare percent overlap, but I'm wonder if there's a way to see how much of a percent is overlapping? 

 

this.hitTest("#ele", "10%")

 

BUT is it possible to get "this" elements percent overlapping the hitTest ele?

 

 

Link to comment
Share on other sites

No, sorry, there isn't a built-in way to get the overlapping percent with Draggable. I'm curious what the use case is for that. In other words, why would that be helpful for you? What's the real-world scenario?

Link to comment
Share on other sites

Thanks for the quick reply.

 

In my use case I have a side element that fades in as the draggable element gets closer to the target or basically as the hitTest gets closer to 100%.

 

Right now I solved it with a REALLY UGLY if statement.

 

NOT my proudest moment, it's crunch time. REALLY thanks of the reply. Love the draggable plugin. SAVED MY BACON.

 

if(this.hitTest("#hit-test", "90%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.1});
}else if(this.hitTest("#hit-test", "80%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.2});
}else if (this.hitTest("#hit-test", "70%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.3});
}else if (this.hitTest("#hit-test", "60%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.4});
}else if (this.hitTest("#hit-test", "50%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.5});
}else if (this.hitTest("#hit-test", "40%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.6});
}else if (this.hitTest("#hit-test", "30%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.7});
}else if (this.hitTest("#hit-test", "20%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.8});
}else if (this.hitTest("#hit-test", "10%")) {
TweenMax.to("#photo--missing", tt, {autoAlpha:.9});
}else{
TweenMax.to("#photo--missing", tt, {autoAlpha:1});

Link to comment
Share on other sites

Ah, okay. In that case, maybe it'd be better to just do a straight-up distance calculation. For example, you use getClientBoundingRect() on each, find the center of each (by averaging the left/right and top/bottom), then measure the distance between those two points and set the opacity accordingly. Just an idea. I think that'd be more performant and dynamic. 

 

Cheers!

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