Jump to content
Search Community

3D transform updates to GSAP 3?

Guest howeller
Moderator Tag

Recommended Posts

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 by howeller
Added CodePen
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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!

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.
×
×
  • Create New...