How to move camera using Gsap and onScroll triggers?

Questions
, , ,
1

So initially my camera is at z-coord 30.
Aim is to move it closer to a particular object. And then again switch to another object on further scroll.
For the first-section (refer the code below), it works as it brings camera to z-coord 10.
But further when the second-section starts, it again resets the camera's z coord from 30 and then animate it.
How can I continue the existing camera position?

Code executed after the models have rendered.

 gsap.to(camera.current.position, {
                ease: 'power1.in',
                scrollTrigger: {
                    trigger: ".sec-1",
                    start: 'top top',
                    end: 'bottom bottom',
                    markers: true,
                    scrub: true,
                    toggleActions: "restart pause resume pause",
                },
                y: 0,
                z: 10,
            });
            gsap.to(camera.current.position, {
                ease: 'power1.in',
                scrollTrigger: {
                    trigger: ".sec-2",
                    start: 'top top',
                    end: 'bottom bottom',
                    markers: true,
                    scrub: true,
                    toggleActions: "restart pause resume pause",
                },
                z: 10 + 5
            });

Any help would be appreciated.

Thanks!!

1 Like
2

Call your second gsap.to() inside onComplete of first gsap.to().