Can I animate preserveAspectRatio (svg) ?

[Lollibomber]

I've got a svg-file that I placed (due to responsive reasons) this way: 

 

<svg width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMaxYMax slice" class="MAIN">My super duper svg</svg>

I want to animate this svg with some kind of event to 

<svg width="100%" height="100%" viewBox="0 0 1000 500" preserveAspectRatio="xMidYMax slice" class="MAIN">My super duper svg</svg>

In other words, the position of the svg changes from "xMaxYMax slice" to "xMidYMax slice" (depending on the aspect ratio of the browser). Is there a way to achieve this? Maybe with FLIP? 

[PointC]

Hi @Lollibomber 

 

Welcome to the forum and thanks for being a Club member. 🎉

 

I don't think that will work. @GreenSock will correct me if I'm wrong but I believe the Flip plugin is only for CSS properties. You can certainly set that attribute with GSAP and the Attr plugin. MDN docs does list preserveAspectRatio as animatable, but in my experiments, using the SVG built-in <animate> element produces a result that is no different than setting it with GSAP.

 

You can animate the viewBox with GSAP if you like.

 

Happy tweening and welcome aboard.

 

[GreenSock]

@PointC is correct. Flip plugin is for CSS properties. Animating viewBox values  with attr:{} is probably your best bet. 👍

[Lollibomber]

Thank you for pointing me to the right direction. I noticed that this does not animate, but does change the aspectRatio:

 

gsap.set(svg,{attr:{preserveAspectRatio:"xMaxYMax slice"}});
gsap.to(svg, 1, {attr:{preserveAspectRatio:"xMinYMax slice"}});

So by first animating the viewbox, and the end of the animation changing the preserveAspectRatio that way, I could establish what I wanted. Thanks!