Gsap and glitches in 3d model animation

[creatiepink]

Hi GreenSock!

This is my first post here!

Im experimenting whit creating 3d animals whit Gsap.
At the moment im using transformStyle: "preserve-3d" and rotationY&X to fold div's somewhat like origami.

Everything seems to work fine untill i start to animate or rotate the body the div's and svg's glitch from time to time.
The glitch is that when there is movement a div in front of another no longer hides the object behind it for a second and it seems it needs to recalculate.

My question is: can this be fixed? Also is there a better way to build a 3d object like i did?

If possible i would like to create way more complex models and im afraid if i continue like this the glitches will increase.

 

Ive only started programming 7 months ago so it might be a bit messy. I apologize in advance! 
See link:

 

Thanks in advance, any help is greatly appreciated.

Regards,
Pink

See the Pen jBGJOZ by 1Lohmann (@1Lohmann) on CodePen

[OSUblake]

What you have looks good! While you can do 3d using html/svg, it's really not designed for complex stuff. The glitching you're seeing might be a culling issue, which you can sometimes fix using more shapes.

 

If you want to do more complex 3d stuff, I would recommend using a 3d library like Three.js or Babylon.js. Both work great with GSAP. Three.js is a more general purpose library. Babylon is geared more for animation and games, and I would have to say that it's easier to use.

 

* Not sure why, but I'm getting a not secured warning for that Babylon link in Chrome. It's a Microsoft product, so I'm assuming it's safe.

 

BTW, your demo reminded of some stuff done by

See the Pen public by Yakudoo (@Yakudoo) on CodePen

. They're kind of advanced, but you can see what's possible using a 3d library.

See the Pen YXxmYR?editors=0010 by Yakudoo (@Yakudoo) on CodePen

.

[Jonathan]

Hello creatiepink, and Welcome to the GreenSock Forum!

 

That is a lot of code to go through

 

One thing i notice based on what you wrote above:

• You said this:
  The glitch is that when there is movement a div in front of another no longer hides the object behind it for a second and it seems it needs to recalculate.

This is happening because you have no z-index set on any of your absolutely positioned elements. As a rule of thumb anytime you use position offsets like absolute or fixed, that you should set z-index so you tell the browser what the stacking context is. Then once you mix transforms in the mix that will also change the stacking context.

 

Once you add the appropriate z-index for those troubling front to back and vice versa elements, then your issue should be resolved.

 

CSS Stacking Context: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

 

Also adding translateZ,  in the mix will help to move your elements in the proper 3d space to adjust stacking of depth (GSAP equivalent is z property). But keep in mind to not nest multiple elements with z-index which can cause stacking issues especially when or if you nest transforms.

 

[creatiepink]

Thank you OSUblake & Jonathan for the feedback.
Karim maaloul's work is simply amazing. Im compelled to learn three js now!

 

He also made a tutorial. This plus a basic youtube tutorial on three js already helped me grasp the basics.
Link:
https://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/

I hope to show you guys some proper 3d animations in the future.

Thanks again!
Pink