[How to properly remove/disable any specific function from Draggable (gsap3) ?]

I am just checking if there is a simple/cleaner way to remove a certain function that was already created Draggable without re-creating it or adding conditions to it.

for example:

myDraggable.removeEventListener('onPress');
myDraggable.disable('onPress');
myDraggable.off('onPress')
myDraggable.remove('onPress');

 

[How to properly remove/disable any specific function from Draggable (gsap3) ?]

var myDraggable = Draggable.create('#someID', {
  type: 'x,y',
  bounds: '#container',
  onPress: function(){ 
    //some codes
  },
  onDrag: function(){
    //some codes
  }
});

How do I properly remove/disable onPress function from myDraggable?

 

[Draggable.hitTest() issue when element was rotated]

reference: https://greensock.com/docs/Utilities/Draggable/hitTest

 

 

var element1 = green;
var element2 = red;

if (Draggable.hitTest(element1, element2)) {
	console.log('HIT!');
}

 

#green {
  transform: rotate(45deg);
}

 

Always triggers HIT! everytime element1(green) enters the area demonstrated as "blue box" even if it doesn't hit element2(red)

 

demo: see attached image

 

Is there any possible way to fix this issue as I wanted to trigger 'HIT!' only when green touches red (given that I want to rotate this image/div),

 

Thanks in advance

[How to animate gradient mask of an image?]

I would like to animate the gradient mask's position from right to left on image, how do you accomplish this using Tweenmax that is compatible for most browsers specially on Chrome & Firefox?

 

**I was able to create a gradient mask in chrome using -webkit-mask-image

but mask don't work on firefox**

 

HTML:

<div id="gradient mask">
    <div id="myimage"></div>
</div>

CSS:

#myimage {
    background-image: url(image.jpg);
    width: 259px;
    height: 194px;
}

 

[Problem with animating using Draggable]

I already figure it out, Thanks anyways.. I should have use left instead of x for it's type to prevent updating it's coordinates when dragged

[Problem with animating using Draggable]

 Draggable.create("#myDIV", {
                    type:"x",
                    zIndexBoost:false,
                    throwProps:false,
         
                    onDragEnd:function() {

                        TweenMax.to($("#myDIV"), 5,{css:{left: 0}});
                       
                        console.log('DRAG END');
                    },
                });

TweenMax.to($("#myDIV"), 5,{css:{left: 0}}); I wanted this to trigger every time drag ends, but this only animates only once and is not accurately goes to its original position

[bezier using percent instead of px ?]

Thanks! 

[bezier using percent instead of px ?]

How do I use bezier to go somewhere via x should be = % instead of px ?

 

**I have a responsive background where the image should also curve to the same target when scaled

 

I tried using  xPercent / yPercent which do not work in bezier 

TweenMax.to(document.getElementById("image"), 1, {
        bezier: {
          curviness: 1.5,
          values: [{
            x: 60,
            y: 50
          }, {
            x: 140,
            y: 0
          }],
          ease: Power2.easeInOut,
          rotation: 260
        });