megaman

here is a codepen example i put together http://codepen.io/megaman1/pen/oxKxMz as you can see if you rotate the cube it does not rotate on the spot the origin point seams to be to the left somewhere, how do i fix this? also In my real project i want an existing auto centered div to be one of my "cube faces". can I do this without the normal behavior of this div? What would be the correct perceptive to use? Is what i am trying to do difficult to do if the divs need to have a fixed max width and % widths on lower screen sizes? one last thing The codepen demo uses rotationY:500 as the property to animate yet the correct css is transform:rotateY(500) Why does this work, and where is the documentation for this?

I wish to use greensock to handle to 3D animations. I will explain what I want to do I and then post my questions. I have an existing site which has an auto centered container div It has a max-width:900px and width:100% applied. I want to create a rotating effect by creating a second div applying transform: translateZ(?) rotateY(90deg) to it, wrapping a container div around both and rotating the container in response to certain events. The result i am looking for will be like this cube demo, but with only 2 faces https://desandro.github.io/3dtransforms/docs/cube.html I have the following questions What i have described is a lot like making a CSS cube except it will only have two faces. Normally you have to translate each face by 1/2 of the width of the faces in order to move them from the cube center to the correct position. However my existing div is one of the faces and its width is not always fixed. Will i be able to get around this by having a simple CSS media query so that i can set translateZ(450px) when the container is at its max width of 900px and translateZ(50%) when it is at 100% width? The existing div scrolls down (like a normal website) but i want the new one to be fixed at 100% height and have fixed positioning (so there is no scrolling when it is showing, i dont mind if the main div is technically scrollable while it isnt visiable) Will i be able to achieve the rotating cube effect when fixed positioning is applied one of the faces? I have been experementing with transform-origin but no matter what settings i get i cant make a cube (or a 2 faced cube) roatate on the spot. how can i do this? What would be the correct perspective and perspective-origin to use?

I have been experimenting with that and it does not work perfectly. It only works if the parent DIVs position is top:0 left:0 since this means the child DIVs position does not change when it is given position:fixed if you add any top or left to the parent DIV when you start the animation the child DIV jumps to a different part of the screen and then starts animating. I need the child DIV to animate out from its current position (regardless of the parents position) until it fills the screen and have fixed positioning to that the page cant be scrolled.

perfect, thats exactly what i thought i would have to do myself

I am using the following code TweenMax.to(this,2,{height:100, width:200}); This animates the DIV represented by THIS to 100px and 200px This works when the initial values are set in PX and when they are set in % How do i animated to a % based width and height TweenMax.to(this,2,{height:100%, width:200%}); does not work

I wish to make some DIV's expand and take up the full screen when clicked on. . I cant just animate their height and width to 100% because this would only work if they are in the top left of the screen when clicked, if they are anywhere else they will end up partially off screen. Would the following steps achieve the effect I want 1) Place the DIV inside a parent DIV (so that I can place absolute positioning on it as default) 2) When clicked - change its position to fixed - animate its top and left properties to 0 - animate its height and width to 100%

I wish to animate a css gradient but apparently greensock cant do this However it can change any numeric value of a javascript object Could i get the effect i want by doing the following 1) Making a javascript object which stores RGB values for each color I want in my gradient. 2) Using greensock to "animate" the values stored in the javascript object. 3) Setting a JS timer which runs 30 times a second 4) Making a function which changes the css gradient colour value properties with the values from the javascript object (and using the timer to run it) If yes Would doing this cause me to loose the benefit of greensocks speed?

I have an existing webpage which has multiple DIVs which each contain a "section" of content. They are positioned in the standard block level element way (one on top of the other) To improve tablet and mobile users experience I want to change this so that each DIV is a slide and swiping it off to one side makes the next/previous DIV slide in. My questions are 1) Is it possible to detect tablet and mobile devices with greensock? 2) Is it possible to detect if events which are usually unique to tablets/mobiles such as tap and swipe are available using greensock? 3) For moving the existing slide out I am torn between using the standard TweenMax.from() method to set the destination of the slide being moved out to some point just outside of the far left/right of the screen or using Draggable on the slide being moved out with snap to stop it going too far outside the screen bounds. - Any advice which I should choose? - If i choose the Draggable route and is there an event or callback function i cna use to detect if the slide has been completely moved out (so that i can a TweenMax.from() which moves the next slide in)? - If i use the Draggable route is there any way to make the next slide "drag" with the draggable slide?