Chinmay Tiwari

Thank you @kanguyen-vn,Totaly appreciate your approach,but this is the camera position not a html or css element which we can do that change. gsap.to(camera.position, {x:2.96, y:-1.33, z:-6.9,duration: 10, ease: "power4.inOut"}) I want to wait until the above animation takes place.

until the first animation is finish after the loading , I want to stop scrolling and stop other animation in the timeline. gsap.to(camera.position, {x:2.96, y:-1.33, z:-6.9,duration: 10, ease: "power4.inOut"}) How I can do that? Implementation of some parts of the code is given below. const setupAnimation = () => { ScrollTrigger.matchMedia({ "(prefers-reduced-motion: no-preference)": desktopAnimation }) // gsap.to(LoadingMaterial.uniforms.uAlpha, {duration: 1,value: 0, ease: "power1.inOut"}) gsap.to('.page', { opacity: 1, delay: 7, duration: 1, ease: "power1.inOut" }) gsap.to(canvas, { opacity: 1, delay: 1, duration: 1, ease: "power1.inOut" }) ////////////////////////////////////////////////////////////////////////////////////////// gsap.to(camera.position, {x:2.96, y:-1.33, z:-6.9,duration: 10, ease: "power4.inOut"}) ////////////////////////////////////////////////////////////////////////////////////////// gsap.to('.scroll', { opacity: 1, delay: 7, duration: 1, ease: "power1.inOut" }) gsap.to('.loading', { opacity: 0, delay: 0, duration: 2.5, ease: "power2.inOut", display: "none" }) gsap.to(spaceShuttle.scene.position, { x:50,y:-0.277,z:10,ease:"power1.inOut",delay: 20, duration: 4});//52 gsap.to(spaceShuttle.scene.rotation, { x:-0.631, y:3.673, z:-0.107, delay:20, duration:9 , ease:"power1.inOut"}); gsap.to(spaceShuttle.scene.scale ,{x:7 , y:7, z:7, delay: 20 , duration: 1 , ease:"power1.inOut"}); // gsap.to(spaceShuttle.scene.rotation, { x: -0.75, y: 3.614, z:-0.06,delay:12, duration:10}); window.scroll(0, 0) } const desktopAnimation = () => { let section = 0 const tl = gsap.timeline({ default: { duration: 1, ease: "power2.inOut" }, scrollTrigger: { trigger: ".page", start: "top top", end: "bottom bottom", // pin: true, scrub: 1, markers: true, } }) ////////////////////////////////////2 Page/////////////////////////////////// tl.to(camera.position, { y: 28.97, x: -2.63, z: -8.95 }, section) // tl.to( Saturn.scene.position , {x:397.44,y:204,z:299 , ease: "power4.inOut", duration: 0.5} , section)\ // tl.to( Mars.scene.position, {}) tl.to(Rocket.scene.position, { y: 30.04 }, section) tl.to(Rocket.scene.rotation, { y: -3.142, ease: "SlowMo.ease.config(0.7,0.7, false)" }, section) tl.to(InternationalSpacestation.scene.position, { x: 13, ease: "power2.out" }, section) tl.to(InternationalSpacestation.scene.rotation, { y: -0.3 }, section) tl.to(Mars.scene.position, { x: 267.94, y: 90, y: 90, ease: "power1.inOut" }, section) tl.to(juipter.scene.position, { x: -113, y: 90, z: 438, ease: "power1.inOut" }, section) tl.to(Saturn.scene.position, { x: 193.1, ease: "power1.inOut" }, section) tl.to(directionalight.position, { x: -10, y: 0.02, z: -10, delay: 0.4, ease: "power1.inOut" }) //////////////////////////////////////// 3 Page///////////////////////////// section++ tl.to(Rocket.scene.rotation, { x: 1.5, duration: 0.2, ease: "power2.inOut" }, section) tl.to(Rocket.scene.rotation, { y: -4.225, delay: 0.1, ease: "power1.inOut" }, section) tl.to(Mars.scene.scale, { x: 65, y: 65, z: 65, ease: "power1.inOut" }, section) tl.to(juipter.scene.scale, { x: 45, y: 45, z: 45, ease: "power3.inOut" }, section) tl.to(camera.position, { x: 0, y: 44.88, z: 5.79, ease: "power2.inOut" }, section) tl.to(camera.rotation, { x: 0 }, section) tl.to(juipter.scene.position, { x: -281.8, y: 44.88, z: 322.42, ease: "power3.inOut" }, section) tl.to(Mars.scene.position, { z: 47, x: 63.63, y: 44.88, duration: 0.4, ease: "power1.inOut" }, section) tl.to(Rocket.scene.position, { z: 26.718, y: 43.15, x: -20.70, delay: 0, ease: "power2.inOut" }, section) tl.to(Saturn.scene.scale, { x: 25, y: 25, z: 25, duration: 0.5, ease: "power1.inOut" }, section) tl.to(Saturn.scene.position, { x: 193.1, y: 44.88, z: 322.42, ease: "power1.inOut" }, section) tl.to(Saturn.scene.rotation, { x: -0.43, y: 0.25, z: 0.11, ease: "power1.inOut" }, section) tl.to(particles.position, { z: 0, ease: "power1.inOut" }, section) tl.to(InternationalSpacestation.scene.position, { y: 5.693 }, section) tl.to(directionalight.position, { x: 4.55, y: 0.02, z: -10, delay: 0.4, ease: "power1.inOut" }) // tl.to( InternationalSpacestation.rotation, {}) ////////////////////////////////////// 4 Page /////////////////////////////// section++ tl.to(camera.position, { z: 38, ease: "power1.inOut" }, section) tl.to(Rocket.scene.position, { x: 25.9, z: 66, ease: "power1.inOut" }, section) tl.to(Rocket.scene.rotation, { y: -2.134, ease: "power1.inOut" }, section) tl.to(juipter.scene.position, { x: -237, z: 148, ease: "power1.inOut" }, section) tl.to(Saturn.scene.position, { x: 159, z: 240.7, ease: "power1.inOut" }, section) tl.to(particles.position, { z: 25, ease: "power1.inOut" }, section) tl.to(directionalight.position, { x: -10, y: 0.02, z: -10, delay: 0.5, ease: "power1.inOut" }) //////////////////////////////////// 5 Page ///////////////////////////////// section++ tl.to(Rocket.scene.position, { x: -30, y: 44.88, z: 66.98, ease: "power2.inOut" }, section) tl.to(juipter.scene.position, { z: 36.39, ease: "power1.inOut" }, section) tl.to(Saturn.scene.position, { x: 123.82, y: 52.67, z: 120.90, ease: "power1.inOut" }, section) tl.to(Rocket.scene.rotation, { y: -4.225, ease: "power1.inOut" }, section) tl.to(particles.position, { z: 30, ease: "power1.inOut" }, section) tl.to(Mars.scene.position, { z: 10, ease: "power1.inOut" }, section) }

@OSUblake You saved my life, literally I have spent around 2 hours fixing it and failed. And you did it in a few seconds. God and Gsap Bless you.

I am facing "Invalid Property x set to 3.57 Missing plugin? gsap.registerPlugin()" and "Invalid property section set to 0 Missing plugin? gsap.registerPlugin()" in the console. I came much further in the project but now I am facing this issue. Please Help!! import {gsap} from "gsap" import {ScrollTrigger} from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) const setupAnimation = ( ) =>{ camera.position.x = 25.7; ScrollTrigger.matchMedia( {"(prefers-reduced-motion: no-preference)":desktopAnimation}) } const desktopAnimation = ()=>{ let section = 0 const tl = new gsap.timeline({ default : { duration: 1, ease: "power2.inOut" }, scrollTrigger: { trigger: ".page", start : "top top", end: "bottom bottom", scrub: 0.1, markers: true } }) console.log("ScrollTrigger", ScrollTrigger) tl.to( camera.position.x,{ x: 3.57, section }) }