Set max value to zoom/scale function

[coco]

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

[Diaco]

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 .

[coco]

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!


 

[Jonathan]

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;
}

[Diaco]

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

so 

 

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

 

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

[coco]

Diaco and Jonathan .. I got it!  

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

[mattsrinc]

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 .