Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alexandrosb

MotionPath and regular transform issue

Recommended Posts

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.

See the Pen KKpNMqB by alexandrosb (@alexandrosb) on CodePen

Share this post


Link to post
Share on other sites

No? No! Noooooooooooooooooooooooooooooooo. 😭

  • Haha 1

Share this post


Link to post
Share on other sites
2 hours ago, alexandrosb said:

Is there a better approach to animating the refusal to eat the broccoli?

Are you asking for an art direction, like things he could do instead?

 

2 hours ago, alexandrosb said:

maybe I should have forked it?

Generally that's a good idea if you post a new version. That way the forum thread makes sense for others reading it in the future.

Share this post


Link to post
Share on other sites
21 hours ago, ZachSaucier said:

Are you asking for an art direction, like things he could do instead?

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.

 

Quote

Generally that's a good idea if you post a new version. That way the forum thread makes sense for others reading it in the future.

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

Share this post


Link to post
Share on other sites
26 minutes ago, alexandrosb said:

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.

If I were approaching that animation, I would likely have a motion path to the dragon's head and a separate path for the fall away. What you have with multiple paths is fine. There's also GSAP's CustomBounce ease that you could use on the y component. It even has a built in squash/stretch functionality if that interests you :) 

 

Note that it's a Simply Green or above Club GreenSock benefit, so you'd need a membership to use it in your actual project but it's free to use on CodePen.

 

30 minutes ago, alexandrosb said:

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.

Zoom is a tricky thing. I would recommend testing on an actual web page as opposed to using CodePen to see if things are off or not. 

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

Hey @alexandrosb,

 

If you position all elements in one SVG - including the paths for the animation - you will definitely make it easier for yourself.

 

See the Pen WNvoyor by mikeK (@mikeK) on CodePen

 

Good Appetite ...

Mikel

  • Like 7

Share this post


Link to post
Share on other sites

@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?

Share this post


Link to post
Share on other sites

Hey @alexandrosb,

 

What do you mean by 'dynamically loaded'?
You can place all different foods in the same SVG.
With individual motion paths. You could use Illustrator, Affinity Designer or ...

Feel free to use this SVG and fork it.

 

See the Pen abOpmrW by mikeK (@mikeK) on CodePen

 

Happy forking ...

Mikel

  • Like 1

Share this post


Link to post
Share on other sites

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 

See the Pen JjdEbxm by alexandrosb (@alexandrosb) on CodePen

 the dragon ends up on the bottom left corner. I have removed all the animations, but I can add them back if you want.

Share this post


Link to post
Share on other sites

Hey @alexandrosb,

 

A green GSAP dragon can do almost anything

 

See the Pen RwPKKaP by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

  • Like 5

Share this post


Link to post
Share on other sites

 

hhmmm ... You can also integrate the apples img into the SVG.

 

See the Pen OJVWpPz by mikeK (@mikeK) on CodePen

 

Happy serving ...

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites
49 minutes ago, alexandrosb said:

Would that be a bad idea?

Not particularly. The only thing to be weary of is that the <image> will scale with the SVG and may become blurry (but that's true if its outside of the SVG as well, just less likely to happen since SVG scale responsively by default if a size isn't given).

 

If you make sure that all the food will be in SVG then it'd definitely be best to use a single SVG in terms of ease of positioning.

  • Like 2

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
3 hours ago, alexandrosb said:

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?

Not particularly. But as always, test it for yourself :) 

 

3 hours ago, alexandrosb said:

I am looking for an easy way to "reset" everything we all items are selected.

Using .pause(0) would be an easy way to reset everything. Just keep in mind that you'd need to handle page resizes.

  • Like 1

Share this post


Link to post
Share on other sites
42 minutes ago, ZachSaucier said:

Using .pause(0) would be an easy way to reset everything. Just keep in mind that you'd need to handle page resizes.

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

Share this post


Link to post
Share on other sites
14 minutes ago, alexandrosb said:

that would require I have a reference to the timeline right?

A timeline or a tween, yes.

  • Thanks 1

Share this post


Link to post
Share on other sites

 

I really enjoy it.
You can arrange a lot with the two functions.
I 'simplified' the motion paths. If you look at the paths

and modify them in DevTools, you will quickly see where the 'set screws' are.

 

See the Pen GRJrbJR by mikeK (@mikeK) on CodePen

 

Happy serving ...

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

after all that eating our friend went to sleep 

See the Pen mdJWXLa by alexandrosb (@alexandrosb) on CodePen

 

my only question would be if/how can I rotate something to -+x degrees in a single tween.

  • Like 2

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

 

Just for fun: one tail, one tween, one ease

 

See the Pen MWwmwoa by mikeK (@mikeK) on CodePen

 

Happy waving ...

Mikel

  • Like 2

Share this post


Link to post
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.

×