lifvic

Wow that is super cool Blake! Much better than mine Thanks for the nice examples!

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: 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}); } 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 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!!

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

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!

Hi Jonathan, I finally made it work with prepend()! Thanks for your help!

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: http://codepen.io/lifvic/pen/NAmwyz

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: http://codepen.io/lifvic/pen/NAmwyz Thank you!

Thanks so much! Yes it does clear things up!

Hi Carl, I removed the red circle and the whole thing is still messed up. I think the red circle forced #gov to be a giant square and it rotated along the path that way. But I don't understand why #gov icon didn't move even after the red circle is removed. Thanks so much!

Hi Jonathan, Thanks for your input! I somehow got the cx and cy closer to the starting point, but it seems like the motion path is far far away, so the image always jumps to start the animation. http://codepen.io/lifvic/pen/NAmwyz

Hi Carl, Thanks for the response! I cleaned up the codepen and it still doesn't work: http://codepen.io/lifvic/pen/NAmwyz If you look at the bottom right corner, you will see the #gov element is animated there. It is showing up occasionally. Thank you!

Hi All, I'm trying to implement this technique on my own SVG. But somehow the element that I'm trying to animate (#gov) always gets out of the picture. I'm not sure how to fix that. here is the codepen: http://codepen.io/lifvic/pen/NAmwyz Thanks!!