Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,940 profile views

nep's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges



  1. 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');
  2. 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?
  3. 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
  4. 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; }
  5. 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
  6. 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
  7. 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 });