Animate SVG ViewBox along path?

[dfreerider]

Hi,

 

I'm quite new to Gsap and for my first project I am creating an animated map (think Indiana Jones's plane flying across the continents ). I have the map and the flight path all working, but I would like to be able to draw a second path and have that control the "camera".

 

I have been experimenting with the Svg ViewBox as a way to pan and zoom on the svg map and it works quite well. I can create a tween to set the viewBox attribute and the camera animates.

 

But I would like update the viewBox attribute such that it follows a path. 

 

I don't have a codepen since this is such a generalised question. But I was hoping for some ideas on how to best achieve having a svg viewBox animate along a path.

 

Best Regards

 

Espen 

[mikel]

Hey @dfreerider,

 

Welcome to the GreenSock Forum.

 

Could this be an option:

 

See the Pen rNWzGaa by mikeK (@mikeK) on CodePen

 

See the Pen qBqEeMj by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[OSUblake]

You can animate the viewBox, although I don't know if changing the width and height will throw off its positioning.

 

const viewBox = document.querySelector("#svg").viewBox.baseVal;

gsap.to(viewBox, {
  motionPath: {
    ...
  }
});

 

[mikel]

Hey @OSUblake

 

'I don't know if changing the width and height will throw off its positioning.'

 

I don't believe it!

 

Hmmm, look at this example:

 

See the Pen QWdZQWw?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening the viewBox ...

Mikel

 

[OSUblake]

Now try it with a motion path.

 

const viewBox = document.querySelector("#svg").viewBox.baseVal;

gsap.to(viewBox, {
  motionPath: {
    path: [
      { x: 0, y: 150, width: 600, height: 2000 },
      { x: 0, y: 450, width: 600, height: 2000 },
      { x: 200, y: 770, width: 200, height: 2000 }
    ]
  }
})

 

[mikel]

Hey Blake,

 

Here scale with and without motionPath

 

See the Pen QWdZmNM by mikeK (@mikeK) on CodePen

 

See the Pen gOpXozV by mikeK (@mikeK) on CodePen

 

The animation looks different. End position is the same.

 

 

[OSUblake]

Just put the width and height in a separate animation.

 

var scaleIt = gsap.timeline({paused: true,reversed: true})
.to(viewBox, {
  motionPath: {
    path: [
      { x: 100, y: 220,  },
    ]
  },
  duration: 1, ease: "none"
})
.to(viewBox, {
  ease: "none",
  duration: 1,
  width: 500, 
  height: 200
}, 0)

 

[dfreerider]

Wow! This is truly of great help! 

 

Blake's tip of using MotionPath to control the viewBox is fantastic! I thought it might be possible but just couldn't figure out how.

 

And Mikels examples show some really cool ideas. From them I think I should be able to accomplish exactly what I need. 

 

Thanks guys!

 

-Espen