Jump to content
GreenSock

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

Failure to create Responsive MorphSVGPlugin Bezier Path Animation

Recommended Posts

Hi , I am trying to create an animation of a boat rolling backwards; however, I am unable to constrain the wheels touching the ramp on the way down at all widths and heights. 

 

The wheels touching the base of the ramp is dependent on the path of the traverse, not really the % from bottom or % from left. I was trying this using jquery but not realizing this was more of a styling according to the bezier path. It just isn't working and I feel like I am stumped for now and need to reach out for help.

 

Frustration.

See the Pen MKYoQw by jstafford (@jstafford) on CodePen

Link to comment
Share on other sites

When I say the boat fails to adhere to ramp at different widths and heights I

mean this is a failure of the boat to adhere to the ramp when window or device size changes. I know the key will be to make the boat adhere to the traverse path id="traverse-path" that the MorpSVGPlugin calculates the bezier path for. The traverse path of the hill seems to be scaling appropriately.

Link to comment
Share on other sites

Is there a particular reason you're not just putting the boat in the same SVG as the ramp? The fact that you're trying to have two completely different SVG canvases in sync even though they're scaling differently is the heart of your problem I think. 

 

Technically it is possible to do, but it's pretty complex and I'd rather not go down that path unless it's necessary. It involves matrix math and there are a bunch of browser inconsistencies you'll slam into as well with that path. Trust me - I've spent probably hundreds of hours on solving those problems and it's tricky. It'd be much, MUCH easier if you could just put them into the same SVG so that they scale together and use the same coordinate space. :)

  • Like 3
Link to comment
Share on other sites

I noticed this exact difference comparing my bezier path animation to yours from last week where you used a circle as the follower of the path. I can certainly put them both in the same coordinate space. Thanks for your insight on this. I will update you later. Thanks Jack.

  • Like 1
Link to comment
Share on other sites

Still struggling a bit, but I have combined the hill polygon with traverse path and boat together into one svg. 

See the Pen jWEpRO by jstafford (@jstafford) on CodePen

 

Any idea what is going on?

 

The boat is grouped together and can be targeted with #boat and needs to move along bezier path

 

The wheel 2 and wheel3 have #wheel2 and #wheel3 respectively and rotate and move along bezier path

 

#traverse-path is the path that the boat, wheel2, and wheel3 traverse with bezier data

 

wheel1 is just grouped with boat since it isn't really rotating in image

Link to comment
Share on other sites

See the Pen jWEpRO by jstafford (@jstafford) on CodePen

; this codepen is what I am getting locally, but the banner container seems to collapse on the codpen unless I give the boat-hill-container a height as well. The svg simply scales its height once I assign the svg a width on my local. Anyway, don't think this difference will matter as I am getting almost exact same visual result when I give the svg height.

Link to comment
Share on other sites

I seem to have got this working now. Thank you.

  • Like 1
Link to comment
Share on other sites

Excellent. What was the key? We'd love to see the result if you're willing to share :)

Link to comment
Share on other sites

Sorry Jack. Been a crazy day. I had a demo today at work. I will try to repost tomorrow. I took it down b/c in a fury of trying things , I ended up editing the original codepen with something that did not reflect my narrative above.

 

But I can say that putting everything into one svg and not making one svg traverse the path of another svg helped a lot. I got stuck again b/c I was trying to move seperate pieces of the svg by x and y but it wasn't working and I had to end up going with xPercent and yPercent. 

  • Like 1
Link to comment
Share on other sites

Here is the final solution I got to. It is a responsive animation according to the path of the slope which scales with changes in window or device size.

 

See the Pen VeLKON by jstafford (@jstafford) on CodePen

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