Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
valent_inf

staggerTo working once

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 ? 

Link to comment
Share on other sites

  • Solution

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/

  • Like 1
Link to comment
Share on other sites

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 ! :)

  • Like 2
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.
×