Laggy `translate: scale` transition in `TweenLite.to`

[alan0buchanan]

In the Codepen attached, I have a map that contains a large image of the map.

 

The features of the map are:

• You can navigate around the map (using the Draggable API).
• You can zoom in and out on the map using scroll.

The zoom behaviour is handled by a `wheel` event. The default scroll behaviour is prevented, and a `TweenLite.to()` is used to change the `scale` value according to the scroll direction.

 

It works fine, except when I try to place a transition between the two different `scale` values. When a duration is placed on the `TweenLite.to()` (in my example it's `1`), the transition happens, but it's laggy as you'll see.

 

Is there some way I can achieve a nice smooth transition in this case?

See the Pen eveBPM by alanbuchanan (@alanbuchanan) on CodePen

[OSUblake]

Hi @alan0buchanan,

 

Here's how you can do a stable zoom...

https://greensock.com/forums/topic/15795-refresh-draggable-child-overflow-size-after-content-resize/?p=69180

 

For a smooth transition, I would use the ModifiersPlugin. Here's a post about using it for panning, but the same concept could be applied to scaling.

https://greensock.com/forums/topic/15210-easing-to-y-position-set-on-mousemove/?p=66157

 

.

[OSUblake]

And here's how to pan and zoom a container like Google Maps. I'm using a single image, but you could use tiles to piece together a really large world.

See the Pen pedmMW by osublake (@osublake) on CodePen

 

.