Jump to content
Search Community

Problem because of clear props.

Jim Tim test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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(...)

 

Link to comment
Share on other sites

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 ? 

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...