Help with 3D perspective, child object snap to incorrect position

[funkybudda]

hello all,

 

the original codenpen I used for my demo is here:

 

As you can see, this is a responsive 3D menu, when you click on any specific parent box (1-16), the inner child (detail content) will scale up to fit the viewport area correct.

 

For my need, I have to have the 3D menu set up in a container that's centered within the viewport, so I modified with the codepen below:

See the Pen rVdXKb by funkybudda (@funkybudda) on CodePen

 

The transition of clicking on any of the parent boxes still works, but the inner child (detail content) position are offset incorrectly. I have change some of the viewport size detection to reference the new container (#outerContainer), but I still cant figure out the offset issue with the child animation.

 

Any help from 3D experts using GSAP will be greatly appreciated.

 

PS: Would it be easier to use the parent boxes to snap into the container size area, instead of using the child content? How would one go about the calculate the correct camera/pan value to move the parent object into correct position?

See the Pen OVZJEV by funkybudda (@funkybudda) on CodePen

[Carl]

Thanks for the demos. Not really sure what I can do to help with this without sinking a lot of time going through the code and testing various approaches. From your description and what I've seen it sounds like its a matter relating to document structure and CSS. 

 

If there is a GSAP-specific issue you need help with, feel free to reduce the code down as much as possible and I'm sure we can help get it sorted.

[Rodrigo]

Hi,

 

The issue has to do with the fact that you're giving the main container a fixed width instead of a flexible (percentage based) one, therefore the #detail element's horizontal position, given by the variable _x has to be corrected considering either the left margin between the full width container (outer container) and the content container. Since that value will change in a device orientation change you're going to have to calculate that margin and the gutter between the grid elements. Also it might be necessary to adjust the position of the item holder element as well.

 

Unfortunately this is more of a CSS/Layout question than a GSAP related issue and we can't spend too much time digging into this type of issues and focus our efforts in GSAP matters. On top of that John Blazek's samples are usually not the simplest things to dig into, which will require even more time.

 

Another suggestion I could give you, is to experiment with xPercent which has been around since version 1.13.1 (consider that the version used in the original sample is 1.11  so an update might not be a bad thing), which helps a lot for responsive animations. Take a look at this blog entry:

 

http://greensock.com/gsap-1-13-1