Drag Action

[lifvic 3 Likes (Newbie)]

Hi,

 

It's still the same question I posted before. I apologize if it was confusing. I think I found a better way to ask it this time.

 

Problem: The jellyfish's tentacles stopped animating like it used to or it is only animating partially after being dragged, while the head was still animating the whole time.

 

My thought process of creating this animation is:

 

1. head and tentacles rotate, scale and move -- the original state, stored in the original function

function original() {
  tlAll
    .to(total, 30, 

            {
              bezier:path,
              ease:Power2.easeInOut
              }
  );

  tl
    .fromTo(head, 3, 
            {scale: 1, y: 0},
            {scaleX:.8,
    scaleY:1.2, autoAlpha: .8,  ease:SlowMo.config(20)}
            );

   feetLeftTl
     .to([top_first_left,
  bottom_first_left,
  top_sec_left,
  bottom_sec_left], 3, {y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut});

  feetMdTl
  .to([top_middle,
  bottom_middle], 3, {y: 10, scaleX: 0.8});

   feetRightTl
     .to([top_sec_right,
  bottom_sec_right,
  top_first_right], 3, {y: 10, scaleX: 0.8, rotation: 10, ease:Sine.easeInOut})
   .to(bottom_first_right, 3, {x: -4, y: 10, scaleX: 0.8, rotation: -10, ease:Sine.easeInOut}, 0);


  TweenMax.to("#light feGaussianBlur",3,{attr:{stdDeviation:5},repeat:-1,yoyo:true});

}

1. the whole jelly fish can be dragged to move towards left or right, during which the head and tentacles rotate slightly to the other direction to create a sense of water resistance
2. when the dragging is finished, the jellyfish should go back to its original animation -- the part that I can't figure out 

Draggable.create("#total", {type:"x,y", edgeResistance:0.65, bounds:"svg", 
                
 throwProps:true,    
 autoScroll:true,
 onPress:function() {
  
    startX = this.x;
    startY = this.y;
  },
                            
 onDrag:function () {
   var xChange = this.x - startX;
   var yChange = this.y - startY;
   if(xChange < 0) {
     //to the left
     TweenMax.to(head, 1, {rotation:5});
       TweenMax.to(feet, .6, {y: 15, rotation:-10});
   }
   //to the right
   else {
     TweenMax.to(head, 1, {rotation:-5});
        TweenMax.to(feet, 1, {y: 10,rotation:15, ease:SlowMo.easeInOut});
   }
 
  },
  onThrowComplete: function () {
    var reset = new TimelineMax();
    // // 
    //  reset
    var newhead = new TimelineMax();
    var newfeet = new TimelineMax();
  newhead.to(head, .5, {rotation:0});
  newfeet.to(feet, .5, {y:10,rotation:0})
  
    reset
      .add(newhead,0)
      .add(newfeet,0)
      .add(feetLeftTl,0)
      .add(feetMdTl,0)
      .add(feetRightTl,0);

  },
                            
                        
}); 

But now, the tentacles stop rotating and scaling after the jellyfish being dragged and I checked the code over and over again but could not find a solution. 

 

Please advise on this problem. Thank you so much!!

 

See the Pen xOmXmV by lifvic (@lifvic) on CodePen

[OSUblake 9,990 Likes (Superhero)]

This really isn't an answer to your question, and I'm not sure how your coding skills are, but your animation reminded me of this muscular hydrostat simulation of tentacles.

http://soulwire.github.io/Muscular-Hydrostats/

 

It looks super complicated, and it is, but you can actually reduce most of that down to a couple vector calculations like so...

See the Pen bfafda9d056dbc126333b67dfdbd12b7?editors=0010 by osublake (@osublake) on CodePen

 

Now create several tentacles, attach them to head, hook them up to a Draggable instance, and now you have a jellyfish.

See the Pen vKoXwW?editors=0010 by osublake (@osublake) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Very cool Blake

[lifvic 3 Likes (Newbie)]

Wow that is super cool Blake! Much better than mine

 

Thanks for the nice examples!