Search the Community
Showing results for tags 'gsapv3'.
Found 1 result
-
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.
