Jump to content
GreenSock

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

Rotate from Left -> Already defined Matrix

Go to solution Solved by PointC,

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

Hello,

 

I've set up a demo CodePen below, which was set up with an element (similar to our Design application's element structure) with an already defined rotation matrix on the parent element we are transforming.

 

CodePen URL:

 

We've added various transitions such as slideInLeft, slideInLeftRotate, and others which provide entrance and exit animations to our canvas/scene within a 10-20s window of animation. We set these up similar but customized from Animate.css and the basic animations they use.

 

Our elements are rotated in absolute position, some using transform matrix to merely control rotation. Our positioning is controlled via left/top CSS properties.

 

Our issue:

 

When we apply the transform with left (outside canvas) tweened to 0, (maintaining our original left/top in parent), we lose our rotation matrix.

 

One of my solutions was to apply the matrix and animation to the inner layer, and this works well to keep our rotation as expected. The issue with this solution, is that our starting point is not coming from left direction due to having a transform within another transform. You can see this occur with the second button in the CodePen demo.

 

Is there any way we can achieve this, while maintaining our rotation at completion of animation?

 

Please let me know if you have any questions or if you did not understand my request.

Thanks,

Justin

 

See the Pen RKKVrW by jbevan2007 (@jbevan2007) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks for the demo. I can tell you put effort into trying to make it clear.

I've spent some time trying to decipher all this but am having trouble understanding what the problem is. 

I don't understand what "lose or rotation matrix means". The transforms that GSAP sets (x,y, rotation) are totally independent of positional properties of left and top. Changing left and top should have no effect on rotation.

 

 

 

It might help if the thing you were animating were a square or rectangle with a clear way of showing what the top is. When I see the triangle on the screen that has already had a rotation applied to it I don't have any way of knowing whether or not its been rotated properly.

It also might help if you do things like put different colored borders on the inner and outer divs so we can tell what elements are being animated and how.

 

Perhaps if there was just one animation that was close to what you want with a clear explanation of how you need it changed we could quickly offer some solutions.

 

I'm sure once things are cleared up we will be better suited to help. 

Link to comment
Share on other sites

Hello,

 

I've changed the SVG in the CodePen to a square. It's set at a 45 degree angle right now.

 

Our layers can rotate, or stay without any rotation based on the designer's preference. Our rotation is the only transform we apply which affects the matrix, so the default matrix and the matrix after reset is how our layer will end up after being designed, resized, colors changed, etc.

 

The issue is when we  try to apply rotation effects like slideInLeftRotate, the animation should come in from the left on a straight horizontal path, while rotating back to it's original position. If you look at the effect after clicking the first button "Run Animation using Outer Element" twice, it will perform the animation as expected. It comes from direct left (on a straight, horizontal path)

 

However when the element is rotated by resetting the original transform with the reset button, it is not maintaining the 45 degree angle we have after the animation runs.. It will either reset it, or come in from a different direction like the top left, instead of directly from the left side.

 

I've tried the following 3 scenarios to make this animation work, while maintaining our original rotation after animation completes but no luck.

 

I've tried outer elements, inner elements but there is no way to make this work that I am aware of. I was hoping there was some way to make this work, programmatically as we have rotations of different types, from the right, etc.

 

Let me know if you understand now.

 

Thanks,
Justin

Link to comment
Share on other sites

That helps a bit. I'm ignoring the behavior on the 2nd and 3rd button as it seems those were just experiments for other techniques.

 

When the page loads the box is rotated 45 degrees.

 

If I hit the first button "run animation using outer element" the box will rotate from rotation:0 to rotation:360 as you have declared in your timeline while sliding in from x:-550

 

tl.set(rotatedEl, {rotation: 360});
  
  tl.from(rotatedEl, .4, {
    x:        -550,
    opacity:  0,
    rotation: 0
  });
  
  tl.to(rotatedEl, .4, {
    x:        0,
    opacity:  1,
    rotation: 360
  });

First issue: What is the purpose of the second tween? From what I can tell It doesn't really do any thing as the first tween already animated to rotation:360 and opacity:1

 

Second issue: I can not replicate the behavior you describe here:

 

However when the element is rotated by resetting the original transform with the reset button, it is not maintaining the 45 degree angle we have after the animation runs.. It will either reset it, or come in from a different direction like the top left, instead of directly from the left side.

 

Perhaps its a typo but that confuses me. The rotation is not supposed to be 45 after the animation runs. It always ends at 0 because you are animating to rotation:0 from rotation:360.

 

The rotation is only 45 after you hit the reset button (which re-applies the original transform).

 

Every time I hit the reset button the box jumps back to a rotation:45 and looks exactly as it did when the page first loaded.

 

Every time I click the first button to re-run the animation I  get the same exact animation as I did the first time regardless of whether or not I reset.

 

I do not see the box animating in from a different direction.

 

 

If anyone else would like to weigh in, feel free. I feel like I'm missing something.

  • Like 2
Link to comment
Share on other sites

I see the same thing that Carl is seeing so I'm a bit confused as well. 

 

Bottom line - what is the desired behavior here? Are you saying you expect the square to be at 45 degrees at the end of the animation?

 

Thanks. :)

  • Like 1
Link to comment
Share on other sites

Yes that is correct. I'd like the square to be at it's starting rotation of 45 degrees at the end of the animation. However when running the animation with rotation in any fashion, it replaces this with the values I pass.

 

As mentioned, I even tried to set inner elements in second/third example, which should not affect the original (parent) layer's animation. This has to be dynamic, so that any value of rotation can work with it.

 

If I want a rotation in from left, clockwise I have to do 0 - 360 for the effect to roll in this way. If I change the last animation to 45, it doesn't render right.

 

Does this clarify?

Link to comment
Share on other sites

  • Solution

o.k. - I think I understand. Instead of setting your rotation to 360 could you set it relative to the current rotation? Like this:

tl.set(rotatedEl, {rotation: "+=360"});

Does that work?

  • Like 3
Link to comment
Share on other sites

I just gave that a try, in the CodePen and had some success.

 

I'll test with further implementation, but if I do it like this it works:

  // Set Default Rotation
  tl.set(rotatedEl, {rotation: "+=360"});
  
  tl.from(rotatedEl, .4, {
    x:        -550,
    opacity:  0,
    rotation: "-=360"
  });
  
  tl.play();

I will give this some tests and let you know. I have some ideas now, using relative rotation changes. This may work well.

 

Thanks,

Justin

Link to comment
Share on other sites

Hello,

 

After testing, everything seems to work well. I've re-implemented all of my animations with this logic, and reduced my code a bit. Basically I am using from -> to in my previous versions. I just realized that using from actually brings you back to the origin point.

 

I'm going to mess around with this a bit more, but it seems very promising.

 

Thank you for all your help, and sorry for the confusion!

 

Justin

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