Jump to content
GreenSock

ice-frog

3D transform issue in GSAP with 120deg ~!?

Recommended Posts

I found some 3d transform  issue, about the set() method.

when I use CSS transform, I got the desired results

and when I use the GSAP set() method, the result difference is very big,

especially 120 degrees, the elements turn over in the vertical direction

I'm using GSAP to make a 3d carousel effect, But the results are not ideal, especially 120 degrees, the card will flip vertical

 

my 3d carousel project:

(you can swipe left or right,you will see some card(transform with 120deg) is flip vertical )

See the Pen pjaJRp by bbzz7 (@bbzz7) on CodePen

 

A simple test:

See the Pen NGyPZR by bbzz7 (@bbzz7) on CodePen

Link to comment
Share on other sites

Hi ice-frog,

 

You could try using Greensock's native syntax: 

See the Pen bVLEQE by Acccent (@Acccent) on CodePen

 

In your carousel pen, try using something like:

var tl = new TimelineMax();
tl.set('.card',{
	width:110,
	height:149,
	backgroundImage:'url(http://www.zhuzhouzhixin.com/H5/demo/bt01.png)',
	backgroundSize:'100% auto',
	backgroundRepeat:'none-repeat',
	position:'absolute' })
  .staggerTo('.card', 0, {
	cycle:{ rotationY:function(i){ return 30*i; } },
	transformOrigin: "50% 50% -300px" }, 0);

(This doesn't exactly work like you intend it to, but it should help you I think.)

 

Someone else will probably be able to better explain the difference between using transformOrigin and a z transform by itself...

 

Good luck :)

  • Like 1
Link to comment
Share on other sites

Acccent, thank you,

I don't use GSAP‘s native syntax,

because I found that I can't use GSAP for continuous transformation of an element,
for example: "transform:'rotateY(30deg) translateZ(300px) rotateY(-30deg)"
see the codepen (the card1 use the transform property, the card2 use the GSAP's native syntax):

See the Pen ZbrWRq?editors=001 by anon (@anon) on CodePen

Link to comment
Share on other sites

ice-frog when you say "continuous transformation of an element" do mean increment the element by a certain amount of degrees. This is possible with relative values.

 

To use relative rotation you simple use either += or -=. And it can be used for other transform values as well, not just rotation

 

Taken ffrom the GSAP CSSPlugin Docs:

  • directionalRotation
    Tweens rotation in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path. For example, if the element's rotation is currently 170 degrees and you want to tween it to -170 degrees, a normal rotation tween would travel a total of 340 degrees in the counter-clockwise direction, but if you use the _short suffix, it would travel 20 degrees in the clockwise direction instead. Example

TweenLite.to(element, 2, {rotation:"-170_short"});
//or even use it on 3D rotations and use relative prefixes:
TweenLite.to(element, 2, {rotation:"-170_short", rotationX:"-=30_cw", rotationY:"1.5rad_ccw"});
  • Notice that the value is in quotes, thus a string with a particular suffix indicating the direction (_cw, _ccw, or _short). You can also use the "+=" or "-=" prefix to indicate relative values. Directional rotation suffixes are supported in all rotational properties (rotation, rotationX, and rotationY); you don't need to use directionalRotation as the property name. There is a DirectionalRotationPlugin that you can use to animate objects that aren't DOM elements, but there's no need to load that plugin if you're just animating css-related properties with CSSPlugin because it has DirectionalRotationPlugin's capabilities baked-in.

    Check out an 

    See the Pen jiEyG by GreenSock (@GreenSock) on CodePen

    .
     

    Prior to version 1.9.0, directionalRotation was called shortRotation and it only handled going in the shortest direction. The new directionalRotation functionality is much more flexible and easy to use (just slap a suffix on the regular property).

 

Here are some codepen examples:

 

Shows animating rotation in increment relative values of deg "+=360" and  "-=360"

 

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

 

And an example by GreenSock on rotation:

 

See the Pen jiEyG by GreenSock (@GreenSock) on CodePen

 

In your case you would just use to go clockwise rotation: "+=120" or to go counter clockwise rotation: "-=120"

 

GSAP gives you full control of rotations in CSS.

 

:)

  • Like 3
Link to comment
Share on other sites

Hi,jonathan,Thank you very much for you give me some information
In fact my purpose is very simple, but I can't find the way to use GSAP to get it,

I want to achieve the following effects by using GSAP:

 

CSS effect:

<div class='card' style="transform:rotateY(30deg) translateZ(300px) rotateY(-30deg)"></div>

 

 

and I've tried the following these methods use GSAP:

 

1:  

TweenMax.set('.card',{

    transform:"rotateY(30deg) translateZ(300px) rotateY(-30deg)"

})

 

    in this way,it works perfect in almost time,except '120deg',the card is flip vertical,and I can't use DirectionalRotationPlugin here

 

 

2: 

TweenMax.set('.card',{

    rotationY:30,

    z:300,

   rotationY:-30

})

 

   in this way the result is Different from the CSS effect

 

 

3:  

TweenMax.set('.card',{

    rotationY:'+=30',

    z:300,

   rotationY:'-=30'

})

 

   in this way the result is Different from the CSS effect too

 

 

4: 

TweenMax.set('.card',{

    rotationY:'+=30_cw',

    z:300,

   rotationY:'-=30_cw'

})

 

   in this way the result is Different from the CSS effect too

 

 

5:  

TweenMax.set('.card',{

    rotationY:'+=30_ccw',

    z:300,

   rotationY:'-=30_ccw'

})

 

   in this way the result is Different from the CSS effect too

 

 

this is the codepen:

See the Pen JYpreg?editors=011 by anon (@anon) on CodePen


 

Link to comment
Share on other sites

First of all, there was indeed one variable that was off in the matrix decomposition algorithm. Sorry about that. It would only show up in rare situations, but you stumbled upon it. I'm glad you did. It's fixed now. The fix will be in the next release, 1.18.1. If you'd like to see a preview, you can get the uncompressed version of TweenMax here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

The other aspect of your question has to do with an order-of-operation issue. One of the great things about GSAP and the way it handles transforms is that it gives you 100% consistency across the board and allows you to control each component independently...anytime. In other words, let's say you're animating the rotation constantly and part-way through that animation, you want to animate the scale or x/y translation or skew. That's entirely possible with GSAP (easy in fact). It's impossible with CSS. All of the components are mashed into a single property that can have any order of operation that result in wildly different appearances. In other words, transform: translateZ(100px) rotateY(45deg) looks very different than transform:rotateY(45deg) translateZ(100px). 

 

The tradeoff for all that control and predictability is adherence to a particular order-of-operation. Most animators prefer the individual control and predictability but in your particular case you're attempting to combine multiple commands in a non-standard order. 

 

I'd strongly recommend using the native GSAP shortcuts for the various properties instead of the "transform" property because:

  1. It's faster (performance). If you define a transform string, it must pass that off to the browser, request the calculated matrix3d() and parse it. It's much faster to just use the native numeric values. 
  2. It's more predictable and accurate, particularly if you have rotations beyond 180 degrees in either direction. The problem with transform strings is that they get baked into a matrix3d() that must be decomposed, but due to the way they work, it's impossible to accurately discern the original rotational value if it's beyond a certain amount. For example, a rotation of 720 degrees results in exactly the same matrix() or matrix3d() as a rotation of 360 or 0 or -360. If you pass in the native numeric values to GSAP, it records them and ensures that things are perfectly accurate all the time regardless of how much you rotate. 

You should be able to reproduce anything that you were doing with the "transform" strings directly with the native properties. Here's a fork of your pen that demonstrates it: 

http://codepen.io/anon/pen/jbZoww?editors=001

 

Does that help? 

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