Jump to content


Hover on one element and transition sibling elements

Moderator Tag

Recommended Posts

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() {

  bindEvents: function() {

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

      $filter.addEventListener("mouseenter", function(e) {

      $filter.addEventListener("mouseleave", function(e) {


  filtersOnEnter: function(filtering) {

  filtersOnLeave: function(filtering) {


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

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.