Jump to content
GreenSock

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

Set max value to zoom/scale function

Go to solution Solved by Diaco,

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

Hi All

I forked Carl's solution to a previously answered question incrementing the scale value onclick. (June 2014)

http://greensock.com/forums/topic/9759-how-to-get-or-increment-the-scale-value/

Here is my fork:


My conundrum: How can I set a maximum value to the zoom in/out functions I have created?

In the thread Ilink above there is a post about this very thing but I cannot get this to work,.  I think I am still not 100% sure about JS objects, targeting them and making it work in this case. 

Here is what the post stated as a solution:
 

I created an if statement to make sure it didn't scale beyond '6'

 

So in my zoomIn function, I did:

 

var mapContainer = document.getElementById("map-container");
if(mapContainer._gsTransform === undefined || mapContainer._gsTransform.scaleX < 6){

    //do your scale stuff

    TweenMax.to(mapContainer, 0.4, { scale: "+=1", onComplete:setAnimatingFalse});

}

 


Can anyone give me a helping hand here?   Thanks!
Ana (aka Coco)  lol


 

See the Pen bVOpzM by nushi (@nushi) on CodePen

Link to comment
Share on other sites

  • Solution

Hi coco  :)

 

you have 2 way to go :

 

1 - check the target scale with onUpdate function : 

See the Pen zvyBgz by MAW (@MAW) on CodePen

 

2 - use .isActive() method and check the target scale before tween : 

See the Pen GpPjKz by MAW (@MAW) on CodePen

 

i prefer the first one .

  • Like 4
Link to comment
Share on other sites

Diaco!  

Thank you ... Works like a charm ... :) 

I'd love to use it but I'd love to understand it even more ... just one part evades me : 

 TweenLite.set(this.target,{scale:tS>mx?mx:mn}); 

is this part shorhand for something in JS?  "tS>mx?mx:mn"  ... I'm not just fully getting the statement here even though it works perfectly 

thanks!


 

Link to comment
Share on other sites

Diaco is using a Ternary Operator - shorthand if else statement

 

So this:

// if tS is greater than mx, then use mx variable, if not use mn variable
tS > mx ? mx : mn

Is like writing this:

var scaleValue;
if(tS > mx) {
    scaleValue = mx;
} else {
    scaleValue = mn;
}

:)

  • Like 5
Link to comment
Share on other sites

statement ? (if true) : (if false) ;

so 

 

scale : 2.001 > 2 ? 2 : 0 } == scale : 2 }

 

scale : 0.001 > 2 ? 2 : 0 } == scale : 0 }

  • Like 4
Link to comment
Share on other sites

Diaco and Jonathan .. I got it!   :-D

I knew I'd studied that but it completely disintegrated in my memory. 

Link to comment
Share on other sites

  • 9 months later...

Thanks Diaco for the onUpdate example. It has solved my limiting DIV scale setting on mousewheel event as well.

 

For the community benefit - mousewheel up e.g. zoom in event won't trigger or triggers as mousewheel down (zoom out) event in Chrome and Safari on Mac. So you end up with zooming out only on those browsers (August 2016).

 

This jQuery plugin solves the issue completely:

 

https://cdnjs.com/libraries/jquery-mousewheel

 

with a mousewheel event on the div element (see Diaco's first CodePen example) usable like this:

$("#proxytrigger").on('mousewheel DOMMouseScroll', function(event) {
  event.preventDefault();
  
  //console.log(event.deltaX, event.deltaY, event.deltaFactor);

  if (event.deltaY < 0) {
    // scroll down
    TweenLite.to(chart_div, 0.5, { scale: "-=0.5", ease:Linear.none, onUpdate:limits });
  } else {
    // scroll up
    TweenLite.to(chart_div, 0.5, { scale: "+=0.5", ease:Linear.none, onUpdate:limits });
  }

});

For more context this was used to add 3D rotation with dragging and zooming to Google (Charts) organizational chart. The chart is SVG so using GreenSock is the perfect combination!

 

Firefox (at least on Mac) requires preventing default event or it will trigger twice making zoom unusable.

UPDATE: really need to share one of the possibilities (with the image background on the web page). Image below :-).

 

Google-Chart-3D-GreenSock-enabled.jpg

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