Jump to content
Search Community

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

alan0buchanan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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...



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.




  • Like 3
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...