基于TweenMax的汉堡菜单光标跟随动画实现技术咨询

Hey there! I’ve looked into that burger menu effect you referenced, and let’s walk through how to build it using TweenMax. The core idea is making the burger elements smoothly follow your cursor within its wrapper when the mouse enters, then resetting them when it leaves.

Step 1: Set Up the HTML Structure #

We’ll mirror the basic structure from the demo you found:

<div id="burger-wrapper">
  <div id="burger-circle"></div>
  <div id="menu-burger">
    <!-- Burger menu lines -->
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

Step 2: Style Elements with CSS #

Proper positioning is key for the animation to work as expected:

#burger-wrapper {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
  overflow: visible;
}

#burger-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.1);
}

#menu-burger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#menu-burger span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #000;
  margin: 5px 0;
  border-radius: 2px;
}

Step 3: Add Animation Logic with TweenMax #

This is where the effect comes to life. We’ll listen for mouse events, calculate cursor position, and animate elements with smooth easing:

const burgerWrapper = document.getElementById('burger-wrapper');
const burgerCircle = document.getElementById('burger-circle');
const menuBurger = document.getElementById('menu-burger');

// Max offset distance (matches your 20px note)
const maxOffset = 20;

burgerWrapper.addEventListener('mouseenter', () => {
  burgerWrapper.addEventListener('mousemove', handleMouseMove);
});

burgerWrapper.addEventListener('mouseleave', () => {
  burgerWrapper.removeEventListener('mousemove', handleMouseMove);
  // Reset elements to original position
  TweenMax.to([burgerCircle, menuBurger], 0.3, {
    x: 0,
    y: 0,
    ease: Power2.easeOut
  });
});

function handleMouseMove(e) {
  // Calculate cursor position relative to the wrapper
  const rect = burgerWrapper.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  
  // Normalize position to a -1 to 1 range for consistent scaling
  const normalizedX = x / (rect.width / 2);
  const normalizedY = y / (rect.height / 2);
  
  // Calculate final offset (capped at maxOffset)
  const finalX = normalizedX * maxOffset;
  const finalY = normalizedY * maxOffset;
  
  // Animate the background circle
  TweenMax.to(burgerCircle, 0.2, {
    x: finalX,
    y: finalY,
    ease: Power1.easeOut
  });
  
  // Animate the burger icon with a slight delay for depth (like the demo)
  TweenMax.to(menuBurger, 0.2, {
    x: finalX * 0.8,
    y: finalY * 0.8,
    ease: Power1.easeOut
  });
}

Key Details: #

• getBoundingClientRect() helps us calculate the cursor’s position relative to the wrapper, so the animation stays contained within the burger area.
• Normalizing the cursor position ensures the offset scales correctly no matter the wrapper’s size.
• Adding a subtle difference in offset between the circle and burger icon creates a layered, depth effect just like the original demo.
• TweenMax’s easing functions make the animation feel smooth and natural, not jerky.

内容的提问来源于stack exchange，提问作者themarksmaker