Failure to create Responsive MorphSVGPlugin Bezier Path Animation

[jstafford]

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

[jstafford]

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.

[GreenSock]

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.

[jstafford]

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.

[jstafford]

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

[jstafford]

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.

[jstafford]

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

[GreenSock]

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

[jstafford]

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. 

[jstafford]

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