How to update path size after MorphSVG is already initiated

[Beverly Tang]

I'm trying to make a background morph into an svg shape by starting with a rect and converting that to a path with MorphSVGPlugin.convertToPath('rect'). However, I'm initially setting the rect size based on the page size (to look like a background color). 

How would I make this responsive to page resize? After the rect is converted to a path, I tried creating a new rect but morphSVG doesn't work with the newly replaced path.

 

Is there a way to make this work? (this is a scrolling animation)

 

Update: When I repeat the timeline action after the resize, it'll sort of work but the morphing is not smooth. 

See the Pen zYPNpxe by sublimina (@sublimina) on CodePen

[elegantseagulls]

Do you need the SVG background to be a fixed height, or can that scale with the browser as well? If not, my suggestion would be to set the viewBox for the SVG along with the width value, so that it naturally is responsive with the page.

 

If this isn't viable, you'll need to .kill() the animation and possibly ScrollTrigger on resize, and reset it based on the new width (you are currently just adding a new tween to the timeline, which is likely what's giving you jumpy results).

Another option would be to dive into preserveAspectRatio, and use a functional end scaleX tween based on viewport width to get your final shape the way you want it. I do not have an example of this, but I imagine it should/could work (in theory and my imagination at least):

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

https://www.digitalocean.com/community/tutorials/svg-preserve-aspect-ratio

 

[GreenSock]

If you can't just fit the <svg> itself the way @elegantseagulls mentioned (which may introduce some stretching, so I can see why in some situations you'd need to avoid that), here's how I'd approach it: 

See the Pen OJOWZbm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Beverly Tang]

@elegantseagulls Yes, the height would need to change too. I actually didn't know viewBox was responsive so thank you for that tip!

 

@GreenSock Thank you for this solution! It is exactly what I was trying to do.