[SVG viewBox not behaving as expected]

I’m still working on the site in which they’ll be featured, but here’s the finished animation from this thread (I changed it a bit from my original zooming-in plan) and another one that also animates the viewBox:

• See the Pen wGpRWY by kylegach (@kylegach) on CodePen

I’m all ears for suggestions of improvement, if you feel like sharing. Specifically, in that first one, I had to do some funny stuff (see the tweens ending with “_strokeReset”) because I couldn’t get the onComplete parameter of TweenLite.to() to work. It would fire immediately, instead of after the animation finished, which had the result of completely cancelling the line drawing effect. And in both, I had to redefine any width and height that I changed with a tween, because GSAP was setting them to “auto” once the animation looped. Simple enough, but it seemed like there should be a better way.

 

Thanks again for your help, Craig & Carl! I’ve felt very welcome here, and had fun learning GSAP for the first time. Now I just need to get it working in my statically-generated React site... Done!

[SVG viewBox not behaving as expected]

Thank you!! I suppose I shouldn’t be surprised it was something so relatively simple when I was operating on ~4 hrs sleep while working on it last night.

 

That explanation was very helpful and solved my issue exactly. And yes, I intentionally made the aspect ratios match, per your comments in that quoted post.

 

Thanks also for your original house Pen. It was obviously inspirational. The animation I shared is part of a larger effort, which I’ll be sure to share here once it’s complete so you can see what you helped create.

[SVG viewBox not behaving as expected]

Animation/Workflow tip: Don’t forget - you can animate the viewBox attribute

I don’t see this technique in practice (or talked about) very much, but sometimes it may be a better solution than trying to scale elements and center them.

 

To illustrate this easy, but powerful method of SVG animation, I’ve made a simple house tour complete with some GreenSock home décor and a few nods to our great moderators. Take a look:

 

See the Pen OMabPa by PointC (@PointC) on CodePen

I’m looking for some help, please.

 

I’d like to use the zooming effect like in the quoted Pen, but the viewBox attribute isn't behaving as I expected and I can’t tell what I’m doing differently.

• Here’s the original Pen with the issue:  (Edit: this is now fixed, but the simplified one still exhibits the issue, for reference)
• And here’s a simplified test case without GSAP to show that even a static viewBox isn’t behaving the same as PointC’s example:

  See the Pen ONzzaG by kylegach (@kylegach) on CodePen

I’ve also read this (excellent) explanation of the SVG viewport, viewBox, and preserveAspectRatio: https://sarasoueidan.com/blog/svg-coordinate-systems/, but I just cannot determine why mine isn’t working.

 

Any help would be appreciated. Thanks!

See the Pen jqYaYp by kylegach (@kylegach) on CodePen