Flickering Div Content/onRelease not moving object till cursor moves

[soubkia]

I just started using these libraries today but I hit a bit of a roadblock. I am aware that my pen is awkwardly mixing css transforms and greensock tweens however even when all css transforms are commented this problem persists. The content on the back of the card flickers when rotating to match its fanning angle during the animation. The center one, which has no rotation, does not flicker at all. However the others do. Also strange is that the front of the card does not experience this at all.

 

Additionally I noticed that onRelease does not seem to move the object back to the original location until after a mouse move event has occured. this means my mouseout animations will not trigger if you drag the card and then do not move the mouse. Any ideas on work arounds to these problems?

 

The red line is just the area where the drag event should be forced to end and the blue line is the hand area. I sorry for the messy scss, I was trying to move over to greensock however now that this is broken Im not sure what to do. 

 

See the Pen dPwPRP by AdilSoubki (@AdilSoubki) on CodePen

[soubkia]

Replaced

      .front {
        @if ($debug) {
          border: solid 1px green;
        }
        @include transform(rotateY(0deg));
      }
      .back {
        @if ($debug) {
          border: solid 1px orange;
        }
        @include transform(rotateY(180deg));
      }

with

TweenMax.to($('.front'), 0, {rotationY: 0});
TweenMax.to($('.back'), 0, {rotationY: 180});

 and that seemed to have fixed the flickering. Still don't know whats up with onRelease.

[GreenSock]

I noticed you're using a really old version of both TweenMax and Draggable. I'd strongly recommend updating, as we've made lots of improvements. We're on 1.16.1 now (you were using 1.13.2). 

 

As far as I can tell, onRelease is working correctly (at least in the latest version). Perhaps I misunderstood what I was supposed to be looking for, though. 

 

You should be passing an event to the endDrag() method too. It should be as simple as adding "e" in your code, like this.endDrag(e). 

 

Looks like the flickering had something to do with your CSS, as you discovered. It's generally best to do all your transform manipulations directly with GSAP anyway because it can cache the values which makes it much faster and more accurate when animating. 

 

If you're still having problems with onRelease after you update to 1.16.1, please let us know and maybe provide a reduced test case. 

[soubkia]

Thanks for the reply!

 

I have updated the pen. The flickering is now fixed however I am still having issues with onRelease. I will try to explain it more carefully. If you pull a card, then release the mouse click without moving the mouse the hover() animations will still be in effect and the mouseout() animations will not trigger until the mouse moves. I believe draggable is not updating the cards current location until after the mouse moves. To fix this I found the update() function and attempted to tie it to the tweens onUpdate parameter. However when I tried to do this it was not very pleased. It appears that update() is not being recognized as a function but I don't really believe that error. I must be making some sort of javascript mistake. 

TweenMax.to(this.target, 0.5, {x: 0, y: 0, ease: Expo.easeOut, onUpdate: this.update()});

I have updated my versions of TweenMax and Draggable in this codepen.

See the Pen yyGaOv by AdilSoubki (@AdilSoubki) on CodePen

 

EDIT: Please let me know if my issue with onRelease is unclear. If so I will make a separate pen to demonstrate the issue in an isolated environment. 

[Carl]

hmm, this sounds like it might be browser behavior.

 

Does this demo illustrate the issue: http://codepen.io/GreenSock/pen/raoWNE

 

mouseleave doesn't fire until you move the mouse?

 

Seeing that in Chrome and Safari... FireFox appears to work better.

[GreenSock]

If I understand your comment/question, it sure seems like Carl is correct - that's standard browser behavior.

 

And for the record, Draggable does NOT wait for mousemove events to do its updates. That's part of its performance optimization - things are debounced to a requestAnimationFrame loop. This is what makes it smoother, especially for things like autoScrolling compared to jQuery UI's Draggable for example where you have to keep wiggling your mouse to make things scroll. 

[soubkia]

Thanks for clearing this up with me!