Jump to content
Search Community

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

thomas-12345 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...