Container based Tilt applied to children

[6ixfalls]

Similar to #62, I'm trying to make the Tilt be based off of a container, as without it, the tilting is jumpy near the edges as the element tries to go back to the original position, triggering the Tilt, and repeating.

brave_c1i6xU10Z4.mp4

There doesn't seem to be an easy way to do this, maybe manually adding your own calculations for mouse position for the parent element and using tiltAngleXManual and tiltAngleYManual to move it. The solution in #62 doesn't work for my case, and seems to only work when trackOnWindow is true. Is there any way to do this, and if not, would this be classified as a "bug"?

[MUK-Dev]

As far as I know, this is a problem with transforming objects.

A workaround you could try for this would be to wrap the Tilt component with another div and set the hovering state to true if the mouse enters the outer div.
But only tilt the inner Tilt component from the isHovering value.

[6ixfalls]

How would you properly set the hovering state to true? There isn't an exposed prop or anything, so it'd have to either be the method in my post (do the math yourself) or somehow firing the mouseover events manually.

[MUK-Dev]

Something like this

const [isHovered, setIsHovered] = useState<boolean>(false);

<div
  onMouseEnter={() => setIsHovered(true)}
  onMouseLeave={() => setIsHovered(false)}
>
  <Tilt
    tiltReverse
    tiltAngleXManual={isHovered ? undefined : 0}
    tiltAngleYManual={isHovered ? undefined : 0}
    trackOnWindow={true}
  >
    <div className="relative w-[40rem] h-[25rem] ">
      <Image
        src="/ticket.webp"
        fill
        alt="ticket"
        className="object-contain"
      />
    </div>
  </Tilt>
</div>

[MUK-Dev]

This will tilt only the Tilt component but the hover-controlling div does not tilt so it solves your issue.

[6ixfalls]

That won't work as expected though, track on window makes the mouse position relative to the window (and not the card), so the card moves completely differently than without it.

[MUK-Dev]

Yes, sorry for the bad suggestion.
I don't think there is a solution to this. Not that I know of.