Jump to content
GreenSock

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

Resize Browser, change height, width and Ypos, Responisve

Recommended Posts

Hello,

 

I made a codepen page to illustrate my issue.  Basically, I have a black box that tweens its' width and height properties, then tweens down Y 150px and tweens its' width and height again.  However, when I resize the page, I need to change the Y and width and height coordinates.  How can I do this when it's written in the script?  Can I save the coordinates as variables and somehow change them when the browser resizes?

 

Thanks!

See the Pen PqBrLV by hyperbola (@hyperbola) on CodePen

Link to comment
Share on other sites

  • 1 year later...

Hello,

 

As per the blog post you suggested, I have used css and GSAP as below - the problem is until the browser gets to the gsap, the image with the css is at top and left 50% and then jumps in to the center when gsap kicks in (the fact it's an image complicates things because I need the image to download to use it's width and height for GSAP)...any ideas on how to get around this, I tried setting the 3d translate in the css, hoping for it to be overwritten when gsap kicks in but it gets taken in to account by GSAP (fair enough). 

 

Any advice on how to get around this somewhat janky experience?

 

Many thanks in advance

 

 

myClass {
position:absolute;
left:50%;
top:50%;
}

//JS
//center all .myClass elements around their origins
TweenLite.set(".myClass", {xPercent:-50, yPercent:-50});//handles all vendor prefixes of translateX(-50%) translateY(-50%)
 
Link to comment
Share on other sites

Hey buddy! Welcome to GSAP Forum and I really appreciate your wonderful problem with GSAP.

 

Well head to my forked Codepen for you to check -->

See the Pen qqoNEw by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

 

I'll explain how I did it, well the above suggestions was good and got a point. If you want to make your code flexible or what I mean is responsive please use a percentage instead of actual pixel. Pixel is specific measurement and percentage is what the screen size in percent. You can easily estimate the screen resolution using Percentage.

Here's my quick edit to your codes in JavaScript:

 

var el = document.getElementById("testDiv_id");

//Set The Tween Width
TweenMax.set(el, {width: "80%"});

//Animate it to bigger size, previouslu 930px
TweenMax.to(el, 1, {width:"90%", height:230, borderRadius:"0px 120px", onComplete:runTween});

//Subtract it to 25% because that is the percent of 730 over 800px
function runTween() {
	TweenMax.to(el, 1, {width:"-=25%", height:130, y:150, borderRadius:"120px 0px"});
}

//DevTip: Always use percentage if you want to be your work responsize!
//Waren | GSAP Enthusiast.

Explanation: The above code is revised, first I setup the width using set method in TweenMax. Then I calculate the percentage based on your original pixel measurement. That's it! I hope it helps...

Additional I add wrapper div...  just check it :)

Waren | GSAP Enthusiast

  • Like 1
Link to comment
Share on other sites

Hey RealMakAttack,

 

I'm not near my computer but one quick thing you can do is have the images set to have their visibility:"hidden" until GSAP kicks in. You can do the positioning first, fading/toggling the autoAlpha back to 1 after.

 

That way, you'll have access to the image's width and height but no one will see the jump.

  • Like 1
Link to comment
Share on other sites

Hey buddy! Welcome to GSAP Forum and I really appreciate your wonderful problem with GSAP.

 

Well head to my forked Codepen for you to check -->

See the Pen qqoNEw by Waren_Gonzaga (@Waren_Gonzaga) on CodePen

 

I'll explain how I did it, well the above suggestions was good and got a point. If you want to make your code flexible or what I mean is responsive please use a percentage instead of actual pixel. Pixel is specific measurement and percentage is what the screen size in percent. You can easily estimate the screen resolution using Percentage.

 

Here's my quick edit to your codes in JavaScript:

 

 

var el = document.getElementById("testDiv_id");

//Set The Tween Width
TweenMax.set(el, {width: "80%"});

//Animate it to bigger size, previouslu 930px
TweenMax.to(el, 1, {width:"90%", height:230, borderRadius:"0px 120px", onComplete:runTween});

//Subtract it to 25% because that is the percent of 730 over 800px
function runTween() {
	TweenMax.to(el, 1, {width:"-=25%", height:130, y:150, borderRadius:"120px 0px"});
}

//DevTip: Always use percentage if you want to be your work responsize!
//Waren | GSAP Enthusiast.

Explanation: The above code is revised, first I setup the width using set method in TweenMax. Then I calculate the percentage based on your original pixel measurement. That's it! I hope it helps...

 

Additional I add wrapper div...  just check it :)

 

Waren | GSAP Enthusiast

 

Hello Waren,

 

That's great, thank you very much. I ended up using both %'s for the xPercent and relative values (?) for the x and y, eg. '=+10%' and it worked great. 

Link to comment
Share on other sites

Hey RealMakAttack,

 

I'm not near my computer but one quick thing you can do is have the images set to have their visibility:"hidden" until GSAP kicks in. You can do the positioning first, fading/toggling the autoAlpha back to 1 after.

 

That way, you'll have access to the image's width and height but no one will see the jump.

 

Hello Dipscom,

 

Perfect, i actually ended up doing that but with display: none but i suppose it's more performant with visibility: 'hidden' as it won't cause a layout change, so I'll use that.

 

Your help is much appreciated.

 

Thanks.

  • Like 1
Link to comment
Share on other sites

And with display:none you might have trouble in some browsers as you might not get the width/height correctly. 

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