Tweening Draggable's bounding values... with easing?

[SammyC123]

When you're using applyBounds() to set new container boundaries (e.g. on a resize event), is there a way to make the old boundary values tween to the new ones... with easing?

 

For context: I'm using Draggable on a fullscreen map element and then using applyBounds when I show/hide a sidebar. It's a rather jarring experience when the map is forced into the new boundaries. The whole screen seemingly jumps.

 

EDIT: Added a Codepen.

 

To replicate this, drag the map all the way to the left, then toggle the sidebar closed. You will see how the map jumps to fit the new boundaries. I would like to tween it to resize the bounds in tandem with the sidebar toggle animation... slowly and smoothly.

 

See the Pen LKVLZq by anon (@anon) on CodePen

[GreenSock]

Nah, you shouldn't need to tween the bounds - just tween the position of the target like this: 

 

See the Pen d96c86c16fe45612bb019207c1eb3b7b?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[SammyC123]

Yes, that's perfect! Thank you.

 

That's so much more elegant and simple than what I thought I needed. My whole idea of tweening the container values seems pretty silly in hindsight.  ?

 

You GreenSock guys, I swear... you're just the best. Every single time.

[GreenSock]

Happy to help, @SammyC123! And yeah, I sometimes overcomplicate things myself. It happens to all of us