How to make MotionPaths responsive and reduce them to the viewport?

[Asored]

I'm just playing with the incredible MotionPath plugin. The MotionPathHelper extension is very helpful for my users to build easily custom paths without struggling in Illustrator. But I already know. There will come questions like: "Why this is not responsive? We cannot use this in production if so". Is there a way to make such a scenario responsive and limit it to the viewport?

 

 

I don't think if we can play with nested SVG and if its a best practice to do so, but what if the user want to create a MotionPath from another element type like an image? In general I don't know what I get. The user can choose any HTML code and create paths for it.

 

Have any of you thought about this specifically, how to solve something like this?

See the Pen jOxadKJ by asored (@asored) on CodePen

[mvaneijgen]

Your SVG doesn't have a viewBox. An SVG with a viewBox are responsive by default. I don't think you know the viewBox size of each shape that will be drawn, so you'll have to calculate it  based on the drawn shape or allow the user to only draw within a known viewBox. 

 

See the Pen VwxyZrP by mvaneijgen (@mvaneijgen) on CodePen

[GreenSock]

Yep, SVG is a great solution. You could still do it without, but it would be CPU-intensive to recalculate on each resize. Basically, every single coordinate in the path must get recalculated at the new size. You could use an SVG for the original and set it up with your CSS so that it's fully responsive, and then if you've got non-SVG elements that are traveling on that path, you could use a resize event handler to get the progress() of that animation, save it, then rewind that tween to the start, kill it, invalidate() it (to flush all the recorded values) and then set the progress back to the saved one so that everything gets recalculated at the new size and it appears seamless. 

 

Good luck!

[Asored]

@GreenSock @mvaneijgen Thanks so much for your feedback! I've got it to work calculating the viewBox dynamically depending on the path:

 

// Calculate Viewbox
let clientRect = document.querySelector(pathElementClass).getBBox();
let viewBox = clientRect.x+' '+clientRect.y+' '+clientRect.width+' '+clientRect.height;
document.querySelector(pathElementClass).closest('svg').setAttribute('viewBox', viewBox);

It works like a charm. GreenSock, great concept to recalculate also the motion values. But I think this will be too much. Its okay for me to have the new calculated viewBox on page reload. If I need this at some point, I will return to this post.