Cannot Animate `x` (Pan) and `scale` (Zoom) on SVG Concurrently

[thomas-12345]

I'm have a panoramic SVG with three main focal points. I style it to be wider than the user's monitor, and the idea is as they advance from one position to the next in the UX, the SVG will pan to center each of those three points to give the impression of moving along the X-axis. I'm also zooming in and out when the "frame" changes.

 

I can calculate the center of each focal point and provide GSAP with an x coordinate describing how it should transition left to give the impression of forward motion. I use `scale` for zooming. However, I must to provide a positive `position` property to the `.to()` to ensure the two events don't happen at the same time, or the transform-origin causes problems: It's not linear forward movement; the animation tugs back and forth. I think it would be better looking if both props animated at the same time.

 

I have tried adding an `onUpdate` callback attempting to adjust the transform origin as the animation progresses, but it doesn't work at all. something like:

 

const setTOrigin = gsap.quickSetter(this.selector, 'transformOrigin')

onUpdate: () => {
  // const currentOrigin = gsap.getProperty(this.selector, 'transform-origin')
  setTOrigin(`${animation.progress() * centers[1]}px`) // centers is an array of the focal point centers coords
}

 

Not sure this is even a good idea. Just something I tried.

 

What I have, technically works. But it is pretty janky. And again, doesn't provide the option to use negative positions to make the animation quicker and smoother.

 

I've made a minimal reproduction here hoping someone can offer some guidance:

 

 

Thanks for any insight.

See the Pen RwqbymO by thomas-hibbard (@thomas-hibbard) on CodePen.

[PointC]

Getting things to animate at the same time involves the position property. I see you're adding some labels but I'm not seeing multiple tweens using the same label unless I missed something in your code.

 

If I'm panning and zooming around an SVG, I usually reach for the viewBox. I find it easier to art direct those types of animations with this technique.

 

I have a tutorial here:

https://www.motiontricks.com/basic-svg-viewbox-animation/

 

See the Pen bc5bb5c85338b629f3106a89585d02c9 by PointC (@PointC) on CodePen.

 

A couple other older demos showing various ways to use the viewBox to animate.

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

 

See the Pen wvpObWa by PointC (@PointC) on CodePen.

 

See the Pen LmOvEQ by PointC (@PointC) on CodePen.

 

Hopefully that points you in the right direction. Happy tweening.