Hover on one element and transition sibling elements

[aok 6 Likes (Newbie)]

I'm attempting to allow that if the user hovers on one element, it then transitions the other elements (siblings). I'm doing this with mouseenter/mouseleave.

 

const dev = {};

dev.interactions = {
  init: function() {
    this.bindEvents();
  },

  bindEvents: function() {

    let $filters = document.querySelectorAll("[data-filters] a");
    $filters.forEach(function($filter) {
      let $filters = [
          ...$filter.closest("[data-filters]").querySelectorAll("[data-filter]")
        ],
        $filterSiblings = $filters.filter(function(filter) {
          return filter !== $filter;
        }),
        filtering = gsap
          .to($filterSiblings, 0.4, {
            css: {
              color: "#ece9e2"
            }
          })
          .pause();

      $filter.addEventListener("mouseenter", function(e) {
        dev.interactions.filtersOnEnter(filtering);
      });

      $filter.addEventListener("mouseleave", function(e) {
        dev.interactions.filtersOnLeave(filtering);
      });
    });

  },

  filtersOnEnter: function(filtering) {
    filtering.play();
  },

  filtersOnLeave: function(filtering) {
    filtering.reverse();
  }
};
dev.interactions.init();

 

The issue is I think the timing out or start/stop of the animation? I've tried a variation of approaches but with each I can't seem to work out what's going wrong? Any pointers?

See the Pen PoqOozR by johnthepainter (@johnthepainter) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey aok.

 

I think you're overcomplicating things. I'd just use some tweens and make sure the tween for the hovered link has overwrite applied to it:

See the Pen jOPabqd?editors=0010 by GreenSock (@GreenSock) on CodePen

[aok 6 Likes (Newbie)]

On 3/6/2020 at 1:23 PM, ZachSaucier said:

I think you're overcomplicating things.

As usual  Thanks so much, Zach. This makes more sense!