[Need to force Tween to complete]

Ah! Ok thank you so much for your fast and clear responses

[Need to force Tween to complete]

I've created some morphing icons that morph back and forth with different easing functions on .mouseenter() and .mouseleave() (using jQuery .hover method) 

 

I'd like to force the Tween in my hoverOver functions to complete before the hoverOff function is allowed to start.

 

 

I'm a little stumped on how to achieve this. Can anyone point me in the right direction of how to do this?

See the Pen qZoREQ by MandyMadeThis (@MandyMadeThis) on CodePen

[Animating SVG polygon down path, not working as expected in loop]

Thank you Carl, you are a Legend! I could not figure out what was going on?! Now I can work with this - thank you so much

[Animating SVG polygon down path, not working as expected in loop]

This is my first time trying to use the Bezier plugin and I'm very confused as to what I'm doing wrong here?

 

In the codepen example I've attached, I've added borders to show where to hover to fire the animations.

 

I'm trying to loop through a bunch of SVGs and tell the polygon inside of each of each SVG to animate down the path inside the same SVG.  

 

If you hover over the box on the far left, this is acting exactly as expected - the arrow animates down the path and does a little bounce at the end. 

 

However, none of the other ones inside the loop work as I'd like. The positioning of their arrows get progressively worse and I'm not sure why?

I've logged the path data that I'm passing to the timeline and it looks correct, so I'm really confused as to where I've gone wrong in my code.

 

Any help is greatly appreciated

See the Pen mVKEmp by MandyMadeThis (@MandyMadeThis) on CodePen

[How to return timeline outside of loop?]

Thanks Jonathan - That makes things a bit more clear. So would it also work if your carMove and wheelsRotate functions used TweenMax, instead of Timelines? I just want to fully grasp the different ways timelines and tweens work together.

Like this:

var masterTL = new TimelineMax({paused:true});

function carMove(){

     var tween = TweenMax.to("#car", 2, {x:"+=200"})
     /* more tweens go here */

     return tween;
}

function wheelsRotate(){

    var tween = TweenMax.to("#wheels", 2, {rotation:"+=360"})
     /* more tweens go here */

     return tween;
}

masterTL
.add( carMove())
.add( wheelsRotate() )
.play();

[How to return timeline outside of loop?]

I'm a little confused about how to return a timeline for later use. 

I have a number of elements that I am looping through and playing my timeline on, however, I need to return the timeline outside of this loop, so that I can call the .kill() method on it, inside of another function.

 

So my functions looks like this: 

dtnavs = {
    
    runStuff: function(){
        dtnavs.cellFloatyTweens();
    },

    killStuff: function(){
        // not sure how to kill the cellFloatTL here?
    },

    cellFloatyTweens: function(){
             
         dtnavs.cell.each(function(){
          cellFloatTL = new TimelineMax()
          .to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut});
          
          cellFloatTL.seek(9); //So when it starts it's already moving
         });

    }

    
}

 

Is it possible to call kill on this timeline, inside another method/function? I thought I could possibly do this, but it doesn't seem to be working:

dtnavs = {
    
    runStuff: function(){
        dtnavs.cellFloatyTweens().play();
    },

    killStuff: function(){
        dtnavs.cellFloatyTweens().kill();
    },

    cellFloatyTweens: function(){
      
      cellFloatTL = new TimelineMax();
   
         dtnavs.cell.each(function(){
          
          cellFloatTL.to(this, dtnavs.getRandomNum(8,17), {xPercent: dtnavs.getRandomNum(0.5,12.5), yPercent: dtnavs.getRandomNum(1.5,14), rotation: "'-=" + dtnavs.getRandomNum(-20,1) + "'", yoyo:true, repeat:-1, ease: Power2.easeInOut});
          
            cellFloatTL.seek(9); //So when it starts it's already moving
         });

        return  cellFloatTL;
    }
    
}

The above code only runs my tween on one of the dtnavs.cell elements, and I need it to loop through them all and then be able to kill the whole thing at a later time.

Thanks in advance for any insight. 
PS: I can add a codepen if you need, but my issue is really in syntax, not with the tween it's self, so I thought that just code would be sufficient here.

[SVG Animation on click, not as expected]

@Diaco and @PointC, thank you so much!

 

@jonathan - OK, I see - if I want to animate SVGs I need to inline them and not use the  `<use>` tag. 

[SVG Animation on click, not as expected]

Hmmm, Ok so you cannot use SVG defs files and Greensock together? Or is there a way to do that?

 

But even if I just use regular inline SVGs, I'm confused about what I'm doing wrong with the roation here? 

See the Pen MaYYwM by MandyMadeThis (@MandyMadeThis) on CodePen

 

Based on this, I'd think that my code is correct...but clearly it's not!

[SVG Animation on click, not as expected]

This is my first attempt at SVG animation with GSAP...I'm not sure what I'm doing wrong!?

 

I'm trying to achieve this simple animation on click (red/second box from left): http://callmenick.com/_development/css-hamburger-menu-icons/

 

I'm experiencing all kinds of weirdness...any help is greatly appreciated

See the Pen meybNe by MandyMadeThis (@MandyMadeThis) on CodePen