Jump to content
Search Community

Scale up its crops top-left

Spiderian 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

I have a container div that has overflow: auto; and then I use tweenlite to zoom in some of the images. I like that it zooms to the center using the scale feature, but it only let's me scroll down and right. It chops off anything in top or left. I can get everything if I scale then more the top and left negatively, but I don't want to zoom to the top corner.


Is there a way to re register the size, or a workaround?



Link to comment
Share on other sites

That sounds like just the way the browser calculates what it perceives as the scrollable content - remember, transforms don't affect document flow at all. Some browsers ignore that area (in terms of scrolling) which has nothing to do with GSAP. Two ideas come to mind (I haven't had time to test either):

  1. Wrap the element inside another one - maybe as you scale it inside the container, the container's bounds will be updated for the parent's scroll container (guess)
  2. Instead of scaling, tween the width and height. Since that'll effectively make it look like it's scaling from the top left corner, though, you can also simultaneously animate the marginTop and marginLeft (or top and left) in the opposite direction to compensate, making it look like it's scaling from the center. 
Link to comment
Share on other sites



Try this.. i made it on codepen.. for some reason jsfiddle was throwing some 500 Internal Server Error.



See the Pen pfgwm by anon (@anon) on CodePen


Looks like you were missing the ending squiggly bracket }; for the window.load function.


Also in your onclick you were referencing a new object, instead of the btn01 and btn02 variables that were referencing your button elements.


onclick reference: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick


In jsfiddle or codepen, you wont need to put the body tags in the HTML panel because the HTML panel is the inner HTML of the body tag.

window.onload = function() {
	var btn01 = document.getElementById('in');
	var btn02 = document.getElementById('out');
	var lay01 = document.getElementById('lay01');
	var lay02 = document.getElementById('lay02');
	var lay03 = document.getElementById('lay03');
	var lay04 = document.getElementById('lay04');
	var animateZin = new ZoomIn();
	var animateZout = new ZoomOut();

	function ZoomIn() {
		this.tweenCount = 0;
		this.animate_Zin = function(){
			TweenLite.to(lay01, 0.25, {scale:2});
			TweenLite.to(lay02, 0.25, {scale:2});
			TweenLite.to(lay03, 0.25, {scale:2});
			TweenLite.to(lay04, 0.25, {scale:2});

	function animate_Zin(event){

	function ZoomOut() {
		this.tweenCount = 0;
		this.animate_Zout = function(){
			TweenLite.to(lay01, 0.25, {scale:1, left:0, top:0});
			TweenLite.to(lay02, 0.25, {scale:1, left:0, top:0});
			TweenLite.to(lay03, 0.25, {scale:1, left:0, top:0});
			TweenLite.to(lay04, 0.25, {scale:1, left:0, top:0});

	function animate_Zout(event){

        btn01.onclick = animate_Zin; // this should reference your element
        btn02.onclick = animate_Zout;  // this should reference your element
}; // and you missed the ending squiggly 
   // bracket and semi-colon for the window.load function

Does that help? :)

  • Like 1
Link to comment
Share on other sites

Thanks johnathan. That put on the right path to showing you my problem. I forked with your codepen  and got it to react just like my local files.


See the Pen IJFua by Spiderian (@Spiderian) on CodePen


When you hit the top button it makes parts go off the canvas. I set the #canvas to overflow: scroll; and that allows me to see everything down and right, but it makes the top/left inaccessible. That is the meat of my problem.

Link to comment
Share on other sites

Hello again,


If you look at this example,  you can use the set() method to set the transform-origin of your elements that transform.. to control the origin point when your element transformed:


Check out this example:

See the Pen wFHId by anon (@anon) on CodePen

// adds transform-origin to control the origin point of the transform
       css:{transformOrigin:"20% 20% 0"}

You can play with and adjust the transform-origin values to your liking.. default is 50% 50% 0


CSS transform-origin resource... transform(x, y, z) :




Also you could set the overflow to auto, instead of scroll so if there is overflow the scroll-bars will display automatically..


Does that help? :)

  • Like 1
Link to comment
Share on other sites

It's neat and will be used down in conjunction with this project, but I want the pieces to overflow off in all directions, like when you zoom in on google maps. I want to be able to scroll in all directions regardless of what's hanging off where.

Link to comment
Share on other sites

I think I may have thought up a work around, but I am not sure how to implement it. What if I have it just zoom to the top left while scrolling to a focus point. Like a hidden item with a specific area, maybe a radio button that is un-clickable.


Does GSAP have a focus command?


If not what about the scrollTo function. I wouldn't  mind if it zoomed in and scrolled back to where you are, or zoomed and scrolled to hide the adjustment.

Link to comment
Share on other sites

Please try this:



See the Pen EiHJw by jonathan (@jonathan) on CodePen


Basically the above codepen example does this: 

  1. the #canvas div would stay the same width 500px with overflow: auto or scroll
  2. make the #holder div's width like 1500px
  3. set the initial position of your elements, so your lay01 - lay04 colored boxes are centered in your #holder div.. either by using left or x.
  4. set the #canvas scroll bar to the center of the #holder by dividing the #holder width by 2
  5. Once you click the button and the colored boxes scale up... you will be able to scroll to either side, and have enough room to scroll left or right.

If you inspect the #holder div you will notice how its width is 1500px and how you only need to put the overflow on #holder div parent #canvas.


Does that make sense?



  • Like 1
Link to comment
Share on other sites

It breaks the coding for my draggable and I am struggling with an if statement so it won't allow scrolling until it is zoomed in.


I'm trying to make a map that you can zoom in and out to different locations and drag around. It seems to break if I do anything but zoom to the top left corner.


All the images are 2000px square pngs. I force them to start at 1080px. I didn't think it would be this hard to redefine the area after zooming in.

Link to comment
Share on other sites



Why don't you try a Draggable instance?. Like that you can zoom in /out the entire draggable container with the child images, and then you can drag the container around.


If you don't know the latest update of Draggable works on transformed elements, like scale up and down, among others:

See the Pen KAFow by rhernando (@rhernando) on CodePen


With that you can put the draggable main container inside a wrapper with overflow hidden, so it'd work like google maps.



  • Like 2
Link to comment
Share on other sites

Using a combination of both of your advice I got it working smoothly. I had to add an extra layer to hide the map holder. Then I made the holder way bigger and offset to have room to the top and left. The hierarchy made it so you can't drag the map off the screen before I scale it up.



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