Asored Posted September 26, 2022 Share Posted September 26, 2022 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 26, 2022 Share Posted September 26, 2022 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 2 Link to comment Share on other sites More sharing options...
GreenSock Posted September 26, 2022 Share Posted September 26, 2022 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! Link to comment Share on other sites More sharing options...
Asored Posted September 27, 2022 Author Share Posted September 27, 2022 @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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now