3D Hover effect problem

[fh_codes]

I'm new to GSAP and 3D animations in general, and I have little problem with a hover effect I'm working on.  On mouseleave in the bottom of an element, the animation sometimes gets stuck going back and forth.  Can be reproduced by exiting hover slowly on the bottom of the element.

 

Any thoughts on what I might do different to avoid this problem?  Ideally I'd like to have all the elements margin:0 from each other, but that causes a whole other mess of problems as there's invisible parts of the elements overlapping each other and whatnot

 

See the Pen CbsaK by FreyrH (@FreyrH) on CodePen

 

 

EDIT: Iterated on the forks by jonathan and Peleg S and now have a much improved version:

See the Pen qzmhw by FreyrH (@FreyrH) on CodePen

[Jonathan]

Hello fh_codes, Welcome to the GreenSock Forums!

 

The trick to stop the animation flicker is to give your main .wrap a parent div, and bind the hover events to the parent .wrapper div's, so its seperate from your elements with transforms and perspective. Also instead of trying to compensate the pusing down when animating with margin and padding. But to animate the y-axis (translateY) of the element instead.

 

Working Example:

See the Pen vstok by jonathan (@jonathan) on CodePen

 

You will notice if you mouseenter and mouseleave, that there is no jumpy animation  loop and hesitation... when you hover over the bottom area of each cube.

 

So this is what i did:

1. added a .wrapper div around all your .wrap div's
2. give the .wrapper the same width of .wrap
3. zero out margins on .wrap
4. give margin-bottom to .wrapper
5. animate the y property instead of margin and padding properties
6. bind the mouseenter and mouseleave events to the .wrapper div's

JS:

TweenLite.set($('.wrap'), {perspective:1000});
TweenLite.set($('.inner'), {transformStyle:"preserve-3d"});
TweenLite.set($('.back'), {rotationX:-90});
TweenLite.set([$('.back'), $('.front')], {backfaceVisibility:"hidden", transformOrigin:'50% 0'});

$(document).on('mouseenter', '.wrapper', function() {

      var $this = $(this),
          $wrap = $this.children('.wrap'),
          $inner = $this.find('.inner');
  
      TweenLite.to($wrap, 0.4, {y:"-40px", zIndex:0, ease:Back.easeOut})
      TweenLite.to($inner, 0.4, {rotationX:90, ease:Back.easeOut, overwrite:"all"});
  
}).on('mouseleave', '.wrapper', function() {
  
      var $this = $(this),
          $wrap = $this.children('.wrap'),
          $inner = $this.find('.inner');
  
      TweenLite.to($wrap, 0.3, {y:0, zIndex:1, ease:Power3.easeOut})
      TweenLite.to($inner, 0.3, {rotationX:0, ease:Power3.easeOut, overwrite:"all"});
  
});

CSS :

.wrapper {
    margin-bottom:20px;
    max-width:240px;
}

HTML:

<div class="wrapper">
  <div class="wrap">
    <div class="inner first">
      <div class="face front">Item #1</div>
      <div class="face back">Insert text here</div>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="wrap">
    <div class="inner second">
      <div class="face front">Item #2</div>
      <div class="face back">3D hover effect?</div>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="wrap">
    <div class="inner third">
      <div class="face front">Item #3</div>
      <div class="face back">Different colours</div>
    </div>
  </div>
</div>

Does that Help?

[Peleg S]

The reason is because you're runing the animation each time the mouse is entering\leaving. In your case you might want to prevent the user from triggering the animation if it's already animated.
 
Im not sure what im suggesting is the best approach, but this is what i would do:
adding this condition to mousehover function.
 

if(TweenLite.getTweensOf($(this)).length !=0 )
return;

See the Pen iFwqk by bazooki (@bazooki) on CodePen

[fh_codes]

Thank you Peleg S! That solves the exact problem with the flickering animation!

 

I also really like your approach there jonathan. The margin/padding was really giving me a hard time, your way is simpler and more effective

 

Thanks guys! 

 

EDIT: I've made some changes and I've done away with the position hack in favor of getting to know transformOrigin() better(adding the 3rd parameter for z-axis)

 

Final(?) version:

See the Pen furAi by FreyrH (@FreyrH) on CodePen

[Jonathan]

Good Job!

[funkybudda]

hello all,

 

I came across this thread when searching through the forum on 3D perspective rotation, and the codepen examples in here were good starting point for what I need.

 

I have forked a codepen here:

See the Pen mJxZGb by funkybudda (@funkybudda) on CodePen

 

 

The issue I am trying to address is when a specific "wrap" div is hovered and the 3D rotation starts, I cant seem to address the z-index of the div, and the animation is "clipped" on the adjacent divs.

 

What I did to get the z-index to change is this line:

      // set z-index to be higher than other 

      TweenMax.set($this, {zIndex:50});

 

 

Please see the codepen for the demo.

 

Any help will be greatly appreciated.

[Carl]

if I understand correctly you can just increment the zIndex each time you mouseover like

 

var z = 50;
// Thanks http://codepen.io/jonathan/ for cleaning up the hover bindings
$(document).on('mouseenter', '.wrap', function() {
   
      var $this = $(this),
          $inner = $this.find('.inner');
      
      // set z-index to be higher than other 
      TweenMax.set($this, {zIndex:z++});
  
      ...  // other code removed
});

 

http://codepen.io/GreenSock/pen/KpRPzY?editors=001

[funkybudda]

you're the man, that solved it.

 

Thanks!