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