Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,084 profile views

nep's Achievements


Newbie (1/14)



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