Jump to content
GreenSock

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

Drag Action

Go to solution Solved by OSUblake,

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

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

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

Very cool Blake :)

Link to comment
Share on other sites

Wow that is super cool Blake! Much better than mine :D

 

Thanks for the nice examples!

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.
×