Search code examples
javascriptanimationmenugsap

Burger menu animation where it follows the cursor (tweenmax)

Here's a demo I found: http://clapat.ro/themes/wizzard/

I'm talking about that effect on the burger menu, once you entered it's area, it follows the cursor (and moves with it) for 20px or so.

enter image description here

Obviously found some code in their source:

HTML:

   <div id="burger-wrapper" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0px 0px 0px;">
    <div id="burger-circle" style="transform: matrix(1, 0, 0, 1, 0, 0);"></div>
 <div id="menu-burger" style="transform: matrix(1, 0, 0, 1, 0, 0);">
          <span></span>
          <span></span>
      </div>
  </div>

JS:

    //Parallax Burger Menu
    $('#burger-wrapper').mouseleave(function(e){
        TweenMax.to(this, 0.3, {scale: 1});
        TweenMax.to('#burger-circle, #menu-burger', 0.3,{scale:1, x: 0, y: 0});           
    });     
    $('#burger-wrapper').mouseenter(function(e){
        TweenMax.to(this, 0.3, {transformOrigin: '0 0', scale: 1});
        TweenMax.to('#burger-circle', 0.3,{scale: 1.3});
    });     
    $('#burger-wrapper').mousemove(function(e){   
        callParallax(e);
    });     
    function callParallax(e){
        parallaxIt(e, '#burger-circle', 60);
        parallaxIt(e, '#menu-burger', 40);
    }       
    function parallaxIt(e, target, movement){
        var $this = $('#burger-wrapper');
        var boundingRect = $this[0].getBoundingClientRect();
        var relX = e.pageX - boundingRect.left;
        var relY = e.pageY - boundingRect.top;
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        TweenMax.to(target, 0.3, {
            x: (relX - boundingRect.width/2) / boundingRect.width * movement,
            y: (relY - boundingRect.height/2 - scrollTop) / boundingRect.width * movement,
            ease: Power2.easeOut
        });
    }

but I'm not really looking to steal it as it is.

I was wondering if this effect has a specific name?

Solution

  • Shame on me! Found it after searching again.

    If anyones wants to use it:

    $('#container').mouseleave(function(e){
  TweenMax.to(this, 0.3, {height: 150, width: 150});
  TweenMax.to('.circle, .hamburger', 0.3,{scale:1, x: 0, y: 0});
});

$('#container').mouseenter(function(e){
  TweenMax.to(this, 0.3, {height: 200, width: 200});
  TweenMax.to('.circle', 0.3,{scale:1.3});
});

$('#container').mousemove(function(e){   
  callParallax(e);
});

function callParallax(e){
  parallaxIt(e, '.circle', 80);
  parallaxIt(e, '.hamburger', 40);
}

function parallaxIt(e, target, movement){
  var $this = $('#container');
  var relX = e.pageX - $this.offset().left;
  var relY = e.pageY - $this.offset().top;
  
  TweenMax.to(target, 0.3, {
    x: (relX - $this.width()/2) / $this.width() * movement,
    y: (relY - $this.height()/2) / $this.height() * movement,
    ease: Power2.easeOut
  });
}
    #container{
  display: flex;
  position: relative;
  height: 150px;
  width: 150px;
  justify-content: center;
  align-items: center;
}

.circle{

  position: absolute;
  height: 50px;
  width: 50px;
  border: solid 2px gray;
  border-radius: 100%;
}

.green{
  background: green;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div id="container">
  <div class="circle"></div>
  <div class="hamburger">=</div>
</div>