Jim Tim Posted February 3, 2022 Share Posted February 3, 2022 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 More sharing options...
OSUblake Posted February 3, 2022 Share Posted February 3, 2022 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 More sharing options...
Jim Tim Posted February 3, 2022 Author Share Posted February 3, 2022 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 More sharing options...
OSUblake Posted February 3, 2022 Share Posted February 3, 2022 No, it should still work the same. I was just making sure you didn't overlook that a timeline had those methods. 😁 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now