nhunt290

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

Hi Jonathan, That seemed to be the problem, thank you! I assumed they were just being moved off-screen, not under the image so I didn't think about the z-index. Explains why they were still visible without setting the background image as well I guess!

I'll take a look through your link now and see if I can sort the scaling problem. I've also created a pen regarding the position:fixed items disappearing. http://codepen.io/anon/pen/xLGFl When pasting all my code into the pen, I didn't have a full URL link in the background image on the #map-container css id, so when I clicked zoom in anyway without the background image being there, it seemed to work in chrome. I then added a background image with a full URL and it disappeared when zooming. So I remove the background-image property all together and it worked again. So that's what I've been able to find out if that helps you with any ideas.

Still wondering if anyone can help with the above? But I've also just come across another problem, which is that when I scale the div, another div that I have a position:fixed on outside the div that is being scale, disappears in Chrome, but doesn't in Firefox. Has anyone come across this before and have a solution?

Hi Carl, Thanks for this! Works great, the ._gsTransform object is very helpful to know about as well, so I will keep that in mind in future! In short, I have an image that is set to bigger than the screen, so when first loading the page I can see like 1/3 of it and the rest you scroll around to get to, it's like a map. So what I was wanting to use the scale for was to zoom in, which it does fine. However, my query is, when I scale the image up, I can no longer see the rest of the image, I can only scroll around the area that has been scaled. Do you know of a way I can use scale and make it not crop the window to the scaled area of the image? Or if there's a better way than using scale if not? Help is much appreciated

I'm using GSAP's TweenMax to scale a div when a user clicks on a button. However, what I want to do is be able to get the current scale value and/or know how to increment the scale value by say 0.5. This is how I'm setting the scale when the button is click: TweenMax.to(mapContainer, 0.4, { scale: 1.3}); So scaled to 1.3 over 0.4 seconds. So what I'm wanting to do is when a user clicks on that button again, it will scale it by an extra 0.5 each time. I've also asked this on SO as well if you'd like to asnwer on there as well for the benefit of anyone looking aorund: http://stackoverflow.com/questions/24181307/how-to-get-scale-value-using-greensock-animation-platform-gsap Thanks!