Jump to content
Search Community

MotionPath and regular transform issue

alexandrosb test
Moderator Tag

Recommended Posts

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.

Link to comment
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

Link to comment
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
Link to comment
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?

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

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

 

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

Link to comment
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
Link to comment
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 

Link to comment
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.
×
×
  • Create New...