staggerTo working once

[valent_inf]

Hey, 

 

I'm having some trouble with GSAP and the .staggerTo. 

 

The fact is : the staggerTo is working the first time I'm hovering an element and it's unstaggering as I want when I leave the el but when I'm hovering it again the staggerTo isn't working anymore ! 

 

Here the code : 

for (var i = 0; i < hexagons.length; i++) {
    hexagons[i].addEventListener('mouseenter', function(e) {
      
      var propSelected = this.dataset.prop,
      links = this.querySelectorAll('.mini_vid_link');
      
      function findProp(prop) {
        return prop.prop === propSelected;
      }

      var thisProp = propositionsVideos.find(findProp);

      videosBg.style.background = "url(" + thisProp.background + ") center center no-repeat";
      videosBg.style.backgroundSize = "cover";

      if (thisProp.orientiation === 'left'){
        tl.to(videosBg, 0.6, {
          x: 0,
          autoAlpha: 1,
          ease: Power3.easeIn
        }, 0)
        .staggerTo(links, 0.6, {
          x:-20,
          autoAlpha: 1,
          scale:1,
          ease: Elastic.easeInOut.config(1, 0.3)
        }, 0.2, 0)
      } else {
        tl.to(videosBg, 0.6, {
          x: 0,
          autoAlpha: 1,
          ease: Power3.easeIn
        }, 0)
        .staggerTo(links, 0.6, {
          x:20,
          autoAlpha: 1,
          scale:1,
          ease: Elastic.easeInOut.config(1, 0.3)
        }, 0.2, 0)
      }

      

    }, false);
  }

  for (var i = 0; i < hexagons.length; i++) {
    hexagons[i].addEventListener('mouseleave', function(e) {
      var propSelected = this.dataset.prop,
      links = this.querySelectorAll('.mini_vid_link');
      
      function findProp(prop) {
        return prop.prop === propSelected;
      }

      var thisProp = propositionsVideos.find(findProp);

      if (thisProp.orientiation === 'left'){
        tl.to(videosBg, 0.3, {
          x: 30,
          autoAlpha: 0,
          ease: Power3.easeOut
        })
        .staggerTo(links, 0.6, {
          x:20,
          autoAlpha: 0,
          scale:0.8,
          clearProps: 'all',
          ease: Sine.easeOut
        }, 0.2, 0)
      } else {
        tl.to(videosBg, 0.3, {
          x: 30,
          autoAlpha: 0,
          ease: Power3.easeOut
        })
        .staggerTo(links, 0.6, {
          x:-20,
          autoAlpha: 0,
          scale:0.8,
          clearProps: 'all',
          ease: Sine.easeOut
        }, 0.2, 0)
      }

What i'm doing wrong ? 

[Carl]

Hi and welcome to the GreenSock forums,

 

Its very difficult to diagnose that amount of code out of context but it appears that you are only creating your timeline "tl" once, somewhere that I can't see.

Each time you mouseenter or mouseleave you are just adding new animations to the beginning of that same timeline. You might be overwriting previous animations and / or not telling the timeline to restart() after you add these new things.

 

I'm not sure what type of effect you are going after but it seems that you are doing different animations on different elements based on different conditions so it seems best that you create a NEW timeline on each interaction instead of adding tweens to the same timeline.

 

If you need more help, it would be great if you could provide a simple reduced test case (without all the dynamic factors, conditional logic) so that we can quickly assess the problem. We recommend using CodePen or jsfiddle: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

[valent_inf]

Hi and welcome to the GreenSock forums,

 

Its very difficult to diagnose that amount of code out of context but it appears that you are only creating your timeline "tl" once, somewhere that I can't see.

Each time you mouseenter or mouseleave you are just adding new animations to the beginning of that same timeline. You might be overwriting previous animations and / or not telling the timeline to restart() after you add these new things.

 

I'm not sure what type of effect you are going after but it seems that you are doing different animations on different elements based on different conditions so it seems best that you create a NEW timeline on each interaction instead of adding tweens to the same timeline.

 

If you need more help, it would be great if you could provide a simple reduced test case (without all the dynamic factors, conditional logic) so that we can quickly assess the problem. We recommend using CodePen or jsfiddle: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

" You might be overwriting previous animations and / or not telling the timeline to restart() after you add these new things."

 

That was the problem ! Thanks a lot !