Jump to content
GreenSock

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

rotation and position using css plugin affecting parent container's size

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

All I want to do is move an element outside of it's container without it creating, or altering the scroll bars..

 

I'm familiar with making sure the divs I'm animating are positioned absolutely.. as well as the parent. I've made a jsFiddle that shows that this works with regular moving.. I have a feeling it has to do with the webkit transform. 

 

http://jsfiddle.net/4Ldca/5/

 

but in practice I CANNOT get this to work and i've been struggling with it for a day straight. Any help would be greatly appreciated. 

 

current non-working example for anyone to play with: http://borg.nitestage.com/v3/

 

I have to have them rotate, I guess I'm asking if I'm doing something wrong? 

 

 

TweenMax.to(".gate-top", 1, {css:{left:"-300px", top:"-275px", rotation:"-28deg"},delay:2.2, ease:Quad.easeOut});
TweenMax.to(".gate-bottom", 1, {css:{left:"510px", top:"575px", rotation:"-28deg"},delay:2.2, ease:Quad.easeOut});

 

BTW, it's great to be back and using JS this time! Thanks Jack!

 

Link to comment
Share on other sites

your fiddle seems a bit different than the borg site.

 

Here you can see TweenLite working with rotation and no scrollbars show up.

http://jsfiddle.net/A9xJA/4/

 

I think if you have overflow:hidden on the outer container it will help.

Link to comment
Share on other sites

but, it's not visible outside of main. am i missing something? I need it to stay visible and not affect window size.

 

 

your fiddle seems a bit different than the borg site.

 

Here you can see TweenLite working with rotation and no scrollbars show up.

http://jsfiddle.net/A9xJA/4/

 

I think if you have overflow:hidden on the outer container it will help.

Link to comment
Share on other sites

here is your fiddle with the only thing changed is that it now uses TweenLite instead of jQuery.animate(); no css changes.

 

http://jsfiddle.net/vKPxc/1/

 

I don't see scrollbars appear and the blue div is visible outside of main.

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