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

[Chinmay Tiwari]

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)

}

[kanguyen-vn]

Without a CodePen, it is very hard to experiment with your code to see what should be done to improve it; I would attach a CodePen to any of my questions on this forum to help people help you more easily.

 

That said, I think you can maybe use a class that indicates loading and gives every other section BUT the landing page a display value of none. Then you can add an onComplete to your first animation that toggles the display back to block for the other sections. I learned this from Petr Tichy (@Ihatetomatoes); linking his response to a similar question here 🙂.

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

 

 

[kanguyen-vn]

Hey, that is precisely the reason why you probably should reproduce your project in a CodePen (and maybe elaborate on the context your question a bit more). You provided only part of the code with no imports that dealed with extra context that you didn't explain beforehand (e.g., the camera position). Until you do so, unless somebody else is already really well-acquainted with what you're implementing, I'm afraid people won't be able to help you much. I personally am at a total loss as to what you're trying to accomplish with the code.

 

Not meaning to be harsh at all, but that's just part of the GSAP forum etiquette 🙂, I hope you understand.

[Rodrigo]

Hi,

 

@kanguyen-vn is right, without a demo is really hard for us to help with much.

 

Maybe you're looking like this example:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!