Jump to content
Search Community

onThrowComplete to cancel only onDrag animation

lifvic test
Moderator Tag

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,

 

I have created this floating jellyfish animation using SVG where it moves up and down and its head scaling and tentacles rotating and moving (original state).

 

Now I'm trying to make the jellyfish's head and tentacles move and rotate differently while being dragged towards different directions looking like water resistance is felt, which works. But within the draggable function, I want to set everything back to its original state once the dragging it's complete:

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.staggerTo(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 () {
     TweenMax.to(head, 1, {rotation:0,ease:SlowMo.easeInOut});
        TweenMax.to(feet, 1.5,  {rotation:0, y:10, ease:SlowMo.easeInOut});
   },
                            
                        
                            
                           });

I wrote some code inside the onThrowComplete function to set it partially back to its original state, but I stopped when I realized how much work it could be to reset everything. I was wondering if there's a way to cancel whatever animation enabled only by the onDrag function?

 

Thank you! :)

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

Link to comment
Share on other sites

Oddly, as I reload many times: sometimes it works as in the original animation comes back after dragging is complete, sometimes it doesn't, while other times I can't even drag it to move. But I cannot locate any problem since the console doesn't say about any errors... What can I do better to better the code practice? 

 

Thank you!!

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.
×
×
  • Create New...