Applying Anime JS to mousemove events

JavaScript
1

I have recently been working on a small project with my aim being to create the following effect:

  • A user is presented with a list of items

  • When hovering over a list item it reveals an image associated with that particular item.

  • The image then follows the mouse movement around the page, but only while the cursor is within the item’s boundaries.

  • When the cursor leaves the item, the image is hidden once more.

I have been able to accomplish this to a point using the code below. I apologize in advance as I’m sure there are more quicker and concise ways to accomplish this

let items = document.getElementsByClassName('menu__item-link');
for (let i = 0; i < items.length; ++i) {
  let item = items[i];
  item.addEventListener('mousemove', (e) => {
    let itemImg = item.nextElementSibling; //the image
    itemImg.classList.add('visible');
    itemImg.style.left = e.offsetX;
    itemImg.style.top = e.offsetY;

  })
  item.addEventListener('mouseleave', (e) => {
    let itemImg = item.nextElementSibling;
    itemImg.classList.remove('visible');
  })
}

The one thing I’d like to add to this is an effect similar to the following

JS Fiddle Example

As you can see in this example, even when the cursor has stopped moving, the animation eases out for a split second or two, creating a much smoother effect. Granted that this example is GSAP and for this specific project I have been using Anime JS. Can anyone offer some help/advice on how to achieve this as the documentation for Anime is infamously very minimal.

2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.