reveal div on hover of seperate element causing delay issue

[ddi-web-team]

Hi all

 

I'm attempting to create a concept where you hover over an area, which causes an animation on a font awesome icon inside that div, and reveals a separate div below. The concept works on my codepen example.

 

The problem that I'm running into is that it reveals the new content div before the previous one has been removed. If you run your mouse over all 5 containers quickly, all 5 content areas display at once before they are removed. I'm not really sure how to go about fixing this. Any direction would be appreciated.

See the Pen a67eb50da8f396deb290dcc284b65df3?editors=1010 by DDI-Web-Team (@DDI-Web-Team) on CodePen

[ZachSaucier]

Hey DDI. You will need to keep track of your animations and which animation should be played next. 

 

The most important thing to keep track of is the un-hover animation. Make sure you have that animation saved to a value that's accessible inside of the hover function.

 

Inside of the hover function, you will want to 1) do the out animation for the current section being shown (that could be a reversal of the in animation or a completely new animation). 2) Make sure that the out animation's complete callback (onComplete or onReverseComplete depending on how you set it up) is a function that checks which content should be shown. 3) Have some variable to keep track of which content should be shown.

 

Here's some rough pseudo-code if it helps you conceptualize what needs to happen (I used the reverse approach here):

let activeTween;
let nextTween;

const listItems = // ...;
const container = // ...;

container.addEventListener("mouseout", out);
  
listItems.forEach(item => {
  item.anim = gsap.timeline({
    onReverseComplete: handleComplete
  })
  // Your animation goes here
  // .to(...)
  
  item.addEventListener("mouseenter", enter);
});


function handleComplete() {
  activeTween = nextTween;
  activeTween.play();
}

// Should be applied to each list item
function enter() {
  if(activeTween && activeTween !== this.target.anim) {
    activeTween.reverse();
  }
  nextTween = this.target.anim;
}

// Should be applied on the container of all list items
function out() {
  activeTween.reverse();
}

 

[ddi-web-team]

Awesome. Thank you @ZachSaucier!