Problem because of clear props.

[Jim Tim]

Hello team , i'm trying to achieve e 3d cube rotation using gsap v3 tween methods,
in this demo i'm  rotating  a cube by applying 3d css properties to the element.

t1.current =  gsap.timeline({paused : true});
t1.current.add(gsap.to(["#scene01","#scene02"],{
  						transformPerspective: 450 ,
  						transformStyle: "preserve-3d",
  						backfaceVisibility: "hidden",
  						transformOrigin: `50% 50% -${450 / 2}`,
  						duration:0.000001
					}),0)
    
 t1.current.add(gsap.to("#scene01",{ rotationY: -90,opacity :0.5, duration: 0.8 }),0);

 t1.current.add(gsap.fromTo("#scene02",{rotationY:90},{
   						rotationY: 0,
   						duration: 0.8,
   						onComplete: () => gsap.set("#scene02", {clearProps: "transformPerspective,transformOrigin"})
 					}),0);
 t1.current.play()

by the end of  "#scene02"  i clear the  transformPerspective,transformOrigin props using clearProps,
if i try to seek to the time 0.2  "#scene02" looses its 3d perspective and showing a 2d rotation,
clearing the props is crucial to business  logic. Anyway i'm clearing the 3d css properties for scene-2 only in the onComplete callBack, 
by the duration of 0.2 ,  scene02 should still has its 3d css properties right.
if not what is the solution for it.

See the Pen podymMV by AniBhuvan (@AniBhuvan) on CodePen.

[OSUblake]

39 minutes ago, Jim Tim said:

Anyway i'm clearing the 3d css properties for scene-2 only in the onComplete callBack, 
by the duration of 0.2 ,  scene02 should still has its 3d css properties right.

 

No, the timeline doesn't know that you cleared the props. To get them back, you would need to go back in the timeline to when they were set, so you could do something like this.

t1.current.seek(0).seek(0.2)

 

Also, is there any reason you are using .add instead of the timeline methods like this?

t1.current.set(...)
  .to(...)
  .fromTo(...)

 

[Jim Tim]

1 minute ago, OSUblake said:

Also, is there any reason you are using .add instead of the timeline methods like this?

Yes actually i'm having  timeline as a root and tween methods in sub nodes and then pass the tween methods to the root ,
will it be a problem ? 

[OSUblake]

No, it should still work the same. I was just making sure you didn't overlook that a timeline had those methods. ?