Jump to content
GreenSock

celli

Scale Div and It's Contents with window width

Recommended Posts

I am trying to get my div, including all of the contents inside of the div to scale proportionally, if my window-width is under 840px, so that the div and it's contents will scale with the window width. In my codePen I am achieving this with 'window.matchMedia' and setting TweenMax to scale my div and it's contents, which works... however I'd like to be able to have the div and it's contents' width be equal to my window width (if my viewport is under 840px wide) on page load and page resize. How can I add to my code to make that happen ?

 

I also tried a completely different way using something from css-tricks here 

See the Pen JKPogz by celli (@celli) on CodePen

but I'd like to stick to using GSAP. This way leaves me with a jQuery UI frame and resizer, which I don't want for the particular usage that this is for. I'd like to figure out how to get it to work using my first method, but instead of the scale snapping into place, I'd like it to match my window/viewport width.

 

Any help is appreciated!

See the Pen BzByeL by celli (@celli) on CodePen

Link to comment
Share on other sites

Hey celli :)

 

I'm not 100% sure if I understand your desired outcome, but maybe this can get you a step closer. You could check the window innerWidth on resize and when it falls below your threshold, you could scale proportionally. 

 

See the Pen VjZbeZ by PointC (@PointC) on CodePen

 

Hopefully that helps a little bit.

:) 

  • Like 4
Link to comment
Share on other sites

PointC, that is absolutely awesome. It works perfectly ! Where did you get the .125 number from ?

 

Not that this is a GSAP thing, but is there a reason that the body (caused by the wrapper/outer divs) remains at 600px in height after it scales down (and we get a vertical scrollbar), or a way to reduce the height of the wrapper/outer divs to the height of the div, when the div scales ?

Link to comment
Share on other sites

Based on PointC's pen, for a no-Jquey solution you can also try the global event handler

window.onresize = sizeAll;

or attaching an event listener:

window.addEventListener("resize", sizeAll);

which are the same but have different usage. Event listeners can be used for attaching multiple functions on the same event handler.

 

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions. (as copied from: http://www.w3schools.com/jsref/event_onresize.asp ) 

  • Like 4
Link to comment
Share on other sites

@RedGlove, your logo looks like the long-lost brother of our GreenSock logo. Wonder-twin powers, activate! ;) 

 

Thanks for pitching in. 

 

Oh, and warning: be very careful about using window.onresize because by its very nature, you can only have one callback there, thus if another library (or your own code) had already assigned one, and then you re-assign it, that could mess things up (the other code wouldn't fire). To be safe, you'd have to do something like:

var oldOnResize = window.onresize;
window.onresize = function(e) {
    yourNewFunction(e);
    if (oldOnResize) {
        oldOnResize(e);
    }
}
  • Like 4
Link to comment
Share on other sites

Thanks everyone! @RedGlove ditto on the logo, awesome !!

Link to comment
Share on other sites

To loose the horizontal scroll-bar insted of 

var w = window.innerWidth;

use

var w = document.body.clientWidth;

to get the width minus the scroll-bar. Keep in mind that this won't work if you set the width of the body element.

See the Pen LZPLYZ?editors=1111 by RedGlove (@RedGlove) on CodePen

  • Like 1
Link to comment
Share on other sites

PointC, that is absolutely awesome. It works perfectly ! Where did you get the .125 number from ?

 

Not that this is a GSAP thing, but is there a reason that the body (caused by the wrapper/outer divs) remains at 600px in height after it scales down (and we get a vertical scrollbar), or a way to reduce the height of the wrapper/outer divs to the height of the div, when the div scales ?

In your demo, 800 pixels represents full size or a scale of 1. Every 100 pixels then represents 12.5% = 0.125. If your div was originally set to 1000 pixels wide and that's the point where you wanted to scale, you'd use 0.1 instead of 0.125 . You could easily set those up as variables so you wouldn't need to hard code them.

 

The vertical scroll-bar remains because scaling that div is not affecting document flow. Off the top of my head, I'd say you could probably use two divs. An outer that floats and has its size specifically set by GSAP on a window resize event rather than scaling it. That would affect document flow. Then have the absolutely positioned inner div with the content do the scaling. 

 

Hopefully that makes sense.

:)

  • Like 3
Link to comment
Share on other sites

Perfectly explained PointC. thank you!

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