Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alan0buchanan

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

Recommended Posts

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

Link to comment
Share on other sites

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

 

.

  • Like 3
Link to comment
Share on other sites

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

 

.

  • Like 1
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.
×