Rotating Platter Runs Differently Between Chromebook and Nexus 4

[Darius Clarke]

Viewing my uploaded published file on http://electrickraken.com/ the web server shows different behavior depending on the device. 

• On the Nexus 4's Chrome browser the object appears to make a continuous rotation in one direction.
  
  
• On the Acer Chromebook Chrome browser the object appears to make the rotation for three quarter of the turn, then rapidly rewinds over the three quarter turn in the counter direction to then continue its original direction from the beginning. 
  

Is there a way I can correct or work around this to be consistent across devices?

Thank you,

- Darius

[Nivesh Rajbhandari]

Hi Darius,

There are some implementation differences between the various browsers (even within different versions of the same browser) in how they interpolate animations that use matrix3d values. For example, this demo also exhibits the same quirk in Firefox.

It seems all the browsers interpolate animations using the rotateX, rotateY, rotateZ values consistently.  Unfortunately, GWD's tools currently output matrix3d values. However, you can use rotateX, rotateY, rotateZ values in the CSS panel or in Code view.  I have included an example with the Chrome logo spinning using rotateZ instead of matrix3d.

Thanks,

Nivesh

(GWD team)

[Darius Clarke]

Thank you Nivesh, 

I'll work with the CSS rotate values. 

- Darius

[Darius Clarke]

Hi Nivesh, 

I've found that the advice for using the rotateX, rotateY, and rotateZ values conflicts with the advice about moving the transform-origin. Moving the origin always creates a new matrix-transform which changes the meaning of the axis rotate values, at least with advanced animation. 

I've attached a "before" and "after" effort. The goal is to rotate the two image panels around their y axis for continuous 360°.  But, they should be offset by 10° on their y axis from each other (though that's fixed throughout the animated rotation). 

It sounds simple, but the two kinds of rotation, one: offset the origin and an initial partial rotation and two: use rotateY value, keep conflicting with each other. Unless I'm missing something. 

Thank you for your suggestions. 

- Darius 

[Darius Clarke]

In other words. Once a transformX() and rotateY() CSS values are set by hand, moving the origin or editing the 3D property values in the Property panel, overwrites the hand entered CSS property with the Matrix3D one. Even when working on a different time node I think. 

[Nivesh Rajbhandari]

Hi Darius,

My responses in red inline below:

I've found that the advice for using the rotateX, rotateY, and rotateZ values conflicts with the advice about moving the transform-origin. Moving the origin always creates a new matrix-transform which changes the meaning of the axis rotate values, at least with advanced animation. 

NR: Adjusting the transform origin (the smaller ring) with the rotation tool should only update the -webkit-transform-origin style and not the -webkit-transform style.

I've attached a "before" and "after" effort. The goal is to rotate the two image panels around their y axis for continuous 360°.  But, they should be offset by 10° on their y axis from each other (though that's fixed throughout the animated rotation). 

It sounds simple, but the two kinds of rotation, one: offset the origin and an initial partial rotation and two: use rotateY value, keep conflicting with each other. Unless I'm missing something. 

In other words. Once a transformX() and rotateY() CSS values are set by hand, moving the origin or editing the 3D property values in the Property panel, overwrites the hand entered CSS property with the Matrix3D one. Even when working on a different time node I think.

NR: You should be able to keep the initial state of your animation (-webkit-transform-origin) separate from the animation itself (-webkit-transform). However, you are correct that if you modify 3d properties using one of the tools or the Properties panel, the -webkit-transform values you entered by hand (rotateY, translateX, etc.) will be overwritten by a matrix3d value. We are working on ways to improve how these styles are written.

What I would do is start off by positioning the elements you want to animate, then adjust their transform-origin styles using the tools in the first keyframe. Once you have that set up, add a keyframe, but don't modify any 3d styles with the tools or Properties panel. Instead, switch to Code View and manually insert animation styles (rotateY in your case) in the CSS animation keyframes styles. You only have to update the styles you want to animate. In your example, you only have to animate the rotateY style, not the translateX and translateY styles. I have updated one of your files to show what I mean.

Thanks,

Nivesh

[Darius Clarke]

Thank you Nivesh, 

Your described workflow does work. I've found that out too by trial and error. It's just difficulty for me to work within such a workflow as I'm constantly updating and tweaking all aspects of the composition until the web page/ad aesthetics match my artistic sensibility. Once I apply the animation, the work for tweaking each (and usually the page's every) object's animation node becomes tedious and time-consuming. I get to the point where, once I add the animation, I begin to wish I had a spreadsheet interface view on the timeline where I can lock certain cells or certain transformations in each cell throughout my manipulations. 

However, I know you're working hard to give us more control in a manageable interface so I'll be patient. 

Cheers, 
Darius