[To stop other animation and scrolling until some specific animation is going on.]

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.

 

 

[To stop other animation and scrolling until some specific animation is going on.]

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)

}

[Scroll Trigger: Invalid Property x set to 3.57 Missing plugin? gsap.registerPlugin()]

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

[Scroll Trigger: Invalid Property x set to 3.57 Missing plugin? gsap.registerPlugin()]

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

    })

}