alexandrosb

it's choppy for me too, especially when reaching the right

I want to animate the tail end from -5 to +5 degrees, and I was wondering if there is a way to do it in a single tween (I know I can chain two together)

after all that eating our friend went to sleep https://codepen.io/alexandrosb/pen/mdJWXLa my only question would be if/how can I rotate something to -+x degrees in a single tween.

And that would require I have a reference to the timeline right? This was the main reasoning I am creating all of the beforehand

For this animation I have a correct one (eating) and a wrong one (bouncing away). Is there a significant overhead in creating both timelines for all food items, so for examples for 5 items we have 10 timelines, and then just playing whichever is the relevant one? I am looking for an easy way to "reset" everything we all items are selected.

@mikel first of all thank you for the time you take to help, even though this is not strictly gsap related anymore. I am actually in the process of including them as <image xlink:href="/food-item.svg" width="100%" height="100%"/> Would that be a bad idea? This would make "injecting" the images easier for me, i think ? Now all my position calculations are messed up again. oh well.

By dynamically loaded I mean that from a pool of x food items I will pick and load y. This might be programmatic or it might be user driven. For all that I know in the final version the food items might not be svgs. Also I am moving the dragon around and depending on screen size he ends up in a slightly different position, that's why I stayed away from static path in motionPath. My "scene" is this https://codepen.io/alexandrosb/pen/JjdEbxm the dragon ends up on the bottom left corner. I have removed all the animations, but I can add them back if you want.

@mikel this looks so much better than mine, mind if I "borrow" it? regarding the making everything one svg, my main problem is that the foods are dynamically loaded. also I suspect the paths will not be responsive, am I wrong? did you use illustrator to make those paths, or you copied them from motionpathhelper?

Thank you for the suggestions. I will make sure to look into everything. Regarding the license I do have one through work, I am just using my personal account to interact here.

I was asking if what I do (three small bezier curves each with its own .to tween) is a good practice, or if there is a better way that I am missing. Now if you have a better idea/suggestion in terms of the actual animation, I would be delighted to hear it. I know this is way off scope here though. Went back and created a new pen, and sort of reverted the old one. One last things I noticed, is that depending on the codepen size the path changes and sometimes the points are completely off. Am I calculating the positions wrong and I was just lucky all this time? For example in your answer at 1x (zoom?) the path is off while at 0.5x it's ok. Thanks again for your time

Is there a better approach to animating the refusal to eat the broccoli? https://codepen.io/alexandrosb/pen/PoqbeyX

No? No! Noooooooooooooooooooooooooooooooo. ?

I have trouble animating using a motion path if I have first moved an element using x,y. The helper displays the correct path that the element should follow and if I comment out the move then everything works properly. I know I am missing something.

max-width is set to 500 but you are setting and animating the width. When the width, after multiple clicks, is 1000 for example you only see the first 500 (set by max-width) but you are animating down from 1000, hence the delay. either use only width in both code and css, or limit the addition of width to 500 max.

I know you probably either gave up or moved on but since this helped me with my own problem I am posting it here anyway. adapting your codepen to use @OSUblake code. you just need to move the text inside the same group as the slices for getBBox to work. https://codepen.io/alexandrosb/pen/ExjjrKV

1. I was in a rush to make the gif to better explain the issue, but it happens even if I move my finger really slow 2. I saw it as a suggestion somewhere and I just threw it in 3. no 4. no 5. no 6. I am lost to what's causing it. I know the tween inside the onRelease is not at fault, but how do you explain that when I remove it the problem goes away? I will try 3,4,5 and I will see if anything comes out of it. Thank you

Adding a gif that somewhat shows what happens

I am not sure where I am dragging after release. In the codepen I shared above, if I try dragging one of the circles it sometimes cancels the dragging mid drag. This happens only when I have a TweenLite inside the onRelease function. This is really weird to even explain.

I am cloning the whole svg group (the two dots and the line connecting them) which I am not sure it plays any role. My issue is that when onRelease I have a TweenLite, then for some (random) elements when I try to drag after a few pixels the drag is "canceled" and the element animates to wherever I have set it. If I remove the TweenLite then I never get this drag cancel.

I am facing this problem on touch devices only. Both an Android tablet and my laptop. If on the onRelease handled I try to tween the element then the drag event gets cancelled. If I remove the tween then I don't have this issue. Which element will be affected appears to be random. Logging the release event I observe that it has type: "pointercancel" where normally it is type: "pointerup" It might be related that I am cloning the item, since when I only had one instance or even one clone this wasn't happening. I am not sure I am explaining the issue properly, but any help would be greatly appreciated.

What I wanted was for it to look less rigid, if that makes any sense. Swinging and a texture would be amazing, but I am too new to the library to pull it off. I realize now though that this is not gsap specific question, so I am not sure how relevant my question is.

I am trying to modify the example of the draggable Bezier connector (https://codepen.io/osublake/pen/GMrExO) and get the curve to "hang" downwards like the cables in the image Carl posted. My solution after some trial and error and some more googling (https://codepen.io/anon/pen/LaKpeX) feels very static to me, but I am stuck on how to improve it. Anyone got a clue?