Search the Community
Showing results for tags '3dflip'.
Found 2 results
-
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 });
-
Hello, EDIT: I'm looking for 3D Planes in 3D space, like Flash's native 3D planes and like CSS3 3D transforms. Hard planes rotating & moving in X Y Z. I'm looking for some advice on how I may achieve a 3D Image Flip effect using GSAP JS, in the Canvas. The "cards" will be Bitmaps with transparent areas (PNGs) I intend to re-create this: http://www.westfieldbrochure.com That's a small presentation I crated using GSAP JS but in that case I used CS3 3D transforms. I would like to try it in Canvas now. But I have no idea how to start. If you guys could give me some advice I would be really grateful. Thanks in advance AB
