Jump to content
GreenSock

eartha5

translate in Z not working, using TweenLite

Go to solution Solved by Jonathan,

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

Hi folks,

 

I've been googling this to death and can't figure out why I can't set the Z position of these divs using TweenLite (which is writing translateZ transforms, so presumably that way, either).

 

Any help, taking a look at the plnkr here?

http://plnkr.co/edit/OKIzzKlNv7yJVVHlraCR

 

See the _setLayoutTargets function and _moveEm function...

 

See the Pen by edit (@edit) on CodePen

Link to comment
Share on other sites

  • Solution

Hello eartha5, and Welcome to the Greensock Forum!

I'm not my computer right now, but what you can do is add transformStyle: preserve3d (transform-style) to your tween with Z and add perspective:1000px to its parent element or adding transformPerspective ( transform: perspective(1000px) )  to the element with Z.

Hope that helps! :)

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Basically you're mishandling some CSS properties.

 

First the Z value you're passing is way too small to even notice a difference, and second the element's container has a perspective value of zero, so no matter what value of Z you apply or tween, there's not going to be any visible effect in the element:

//at line 108 perspective is set to 0
function _initSlidePosition(jSlide) {
      // var topPos = _containerEl.outerHeight()/2 - jSlide.outerHeight()/2;
      // jSlide.css({left: (_containerPadding.left), top: topPos});
      TweenLite.set(_containerEl, {perspective:'0px'});
    }

// at line 114, the value of z is 1, too small
function _setLayoutTargets() {
      _slides[0].translateTargets = {
        x: _activeDims.width/2 - _slideDims.width/2 , 
        y: _activeDims.height/2 - _slideDims.height/2 ,
        z: -1,
        scale: 1
      };

If you give bigger values you'll notice the desired effect.

 

Also you can use the CSS Plugin to set up a default transform perspective for your entire project, it makes your life quite easier and you won't have to wory about the perspective in any element again:

CSSPlugin.defaultTransformPerspective = 750;
//you can use any value you want, I always start at 750 and change it if necesary

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Thanks for the replies guys.  So I'm not actually trying to gain a realistic 3D positioning of these elements, so much as just trying to use translation to achieve the best performance for swapping the position of these things around.  I was using perspective of 0 to eliminate perspective effect and just get the elements to display at exactly the x and y values I pick.  I was hoping that translating on Z would just move these elements behind or in front of on another according to their z positions, but I can't get them to ever overlap according to the z positions I've specified.  0 for the first one and -300 px for the other two, should put the other two behind the first one, no?  Is that not how it works?

Link to comment
Share on other sites

Hold up.  I think i got it.  I see that you apply preserve-3d to the container element and that gets the children behaving properly.  Thanks!!!!!

Link to comment
Share on other sites

Hi,

 

Glad that you got it working, but beware that preserve-3d is not supported by any version of internet explorer (surprise, surprise :roll:), so that approach won't work in those particular browsers (IE 10-11).

  • Like 1
Link to comment
Share on other sites

Yep the mighty Rodrigo is right! ;) ...  IE10-IE11 do not support transform-style preserve-3d. So to get around it in IE10-IE11, you can't just transform the parent... you also have to transform each child of the element separately.

 

Take a look at the MSDN Transforms docs (scroll down to transform-style):

 

http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx

 

On the above Microsoft's Transforms link, Microsoft states:

 

"At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform."

 

So there is a workaround..  for modern browsers that support transform-style: preserve-3d, you instead apply the CSS perspective function to the elements parent. But for IE10 - IE11 that does not support transform-style: preserve-3d.. you have to apply the perspective as a property inside the transform css function.

 

I made an example for transform-style IE10-IE11 workaround for a 3d cube using CSS animation and transform perspective, that does work, (test this below link in IE10 or IE11):

 

See the Pen xiJLn by jonathan (@jonathan) on CodePen

 

Have a great day :)

Link to comment
Share on other sites

Hey, yeah I ran into that but I am able to just use z-index property for the case of IE.  I flip z-index halfway through each animation and it mimics the effect of the translateZ where transform-style is supported.  I'll  check out your codepen, jonathan.  I've still got a lot to learn! Thanks guys.

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