3D transform updates to GSAP 3?

[Guest howeller]

I have a dynamic timeline animation has 2 divs do a simple 3d flip that broke when I updated it to GSAP 3. I read about the new translateX, translateY, rotate, rotateX, and rotateY aliases. Does anyone know if there were there changes to transformPerspective, transformStyle, or transformOrigin mappings as well?

 

My working legacy code:

var tl = new TimelineMax();
tl.set([t1.div, t2.div], { css: { transformPerspective: 300, transformStyle: "preserve-3d", backfaceVisibility: "hidden" } })
  .add("start")
  .to(t1.div, 1, { rotationX: -90, transformOrigin: "50% " + t1.yAxis + " " + zAxis, force3D: true }, "start")
  .from(t2.div, 1, { rotationX: 90, transformOrigin: "50% " + t2.yAxis + " " + zAxis, force3D: true }, "start")
  .set(t1.div, { autoAlpha: 0, rotationX: 0, transformOrigin: "50% 50% " + zAxis });

My broken V3 update

var tl = new gsap.timeline();
tl.set([t1.div, t2.div], { css: { transformPerspective: 300, transformStyle: "preserve-3d", backfaceVisibility: "hidden" } })
  .add("start")
  .to(t1.div, { duration:_flipSp, rotateX: -90, transformOrigin: "50% " + t1.yAxis + " " + zAxis, force3D: true }, "start")
  .from(t2.div, { duration:_flipSp, rotateX: 90, transformOrigin: "50% " + t2.yAxis + " " + zAxis, force3D: true }, "start")
  .set(t1.div, { autoAlpha: 0, rotateX: 0, transformOrigin: "50% 50% " + zAxis });

 

See the Pen xxbNQrR?editors=0010 by howeller (@howeller) on CodePen

Edited January 30, 2020 by howeller
Added CodePen

[ZachSaucier 7,123 Likes (Superhero)]

Hey howeller and welcome.

 

A couple notes:

• You don't need to put new before gsap.timeline().
• You don't need to have the css property inside of your tweens. GSAP automatically detects DOM elements and looks for properties that apply to them.

But neither of those should be causing any issues. Can you please create a reduced case example that shows this issue in a CodePen? It will lessen the time required for us to figure out what's going on. 

[Guest howeller]

Thank you for the response.

I injected a pen above with my TweenMax & GSAP 3 code. Turns out after more troubleshooting it appears that both are correct, but I am seeing the "side2" shapes get distorted when i use version 3.1.0 (and lower), but when I change the reference to version 3.1.1 or the previous Google TweenMax version the shape animates correctly. Seems this was a similar issue here. Now I just need this update to migrate to the Google Shared Libraries (this is for a banner animation) and I'm all set!

Thanks!