Jump to content
GreenSock

lifvic

Members
  • Posts

    12
  • Joined

  • Last visited

Posts posted by lifvic

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

  2. 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!!

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

  4. Hi Jonathan,
     
    Thanks for the detailed explanation! I tried both ways but had no luck with either one. 
     
    So I changed the tag to <img> and set the original z-index to -1, and then animate the zIndex to 1 (or some other bigger numbers which I also tried). But the img seems to not appear at all no matter I put inside or outside of svg or how much zIndex I gave it.
     
    Could it be something I did wrong here?
    CSS:

    #patch {
      z-index: -1;
    }
    

    JS:

     

    tl_patch
    .to("#patch", 1, {css:{zIndex:1}});
    
     

    Thanks so much!

     

    Codepen: 

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

  5. Hi,

     

    I have been experiencing some problems regarding my animation. I want to animate the three red circles circling around the image in the center along the blue line paths and the circles gradually disappear behind the images once encountered (not opacity going to 0, but being covered by the image gradually). I somehow made it work on the way that the circle goes behind, by displaying a duplicated image on top that was set to display: none, for 1 second. 

     

    So the repeated master timeline works like:

    3 timelines for 3 Circles slide on the visible curve (3.5s) and shift for some other distance(1s) -- happen all at point 0s

    1 timeline image display: block (1s) -- while circles going in and out from behind the image -- happen at point 3.5s

     

    But I couldn't make it work when I tried to set the cover image to display: block again for .3s in a different timeline (patch_two) and made it only happen on time point 4.5s when the previous timelines finish and right at when the circles are coming out which will make them look like they just finished traveling behind the image.

     

     Instead, the circles just looped behind the cover image when the image could not go back to display: none.

     

    I'm confused of what the problem is and wonder if there could be a less-hassle solution.

     

    codepen: 

     

    Thank you!

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

×