GSAP 3 page scroll animation

[Dmytro Ivanovich]

You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. You need to make an animation on the site so that when you scroll the page, the picture moves around the site, moving from side to side. Site structure: on the right the picture on the left is tex, the next block on the right is the text on the left picture, so the blocks alternate. enter the description of the image here so that when the user scrolls through the site, the image follows him and smoothly shifts under the text block, as if highlighting the text.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[GreenSock]

Yeah, if I understand your goal correctly it's probably just a matter of animating the x position of the image with various ScrollTriggers. Or if everything is evenly spaced, you could put the back-and-forth x animation into a single timeline that has one ScrollTrigger that starts when the first block hits the top of the viewport, and ends when the bottom one does. 

 

I'd encourage you to give it a shot and then let us know if you get stuck - post a minimal demo with a clear GSAP-related question and we'd be glad to take a peek. 

 

Happy tweening!

[Dmytro Ivanovich]

Hi all! I solved my problem using ScrollTrigger, timeline and MotionPathPlugin. With the help of JavaScript, I calculated the coordinates of the points where the image should have moved so that the animation was adaptive to the width of the browser window. Here is an example code, maybe someone will need it.

let path = [
                //1
                {x: shiftToRight, y: startPoint},
                //2
                {x: shiftToLeft, y: 680},
                //3
                {x: shiftToCenter, y: marqueePoint},
                //4
                {x: shiftToCenter, y: endPoint},
        
            ];

const scaledPath = path.map(({ x, y }) => {
            return {
                x: x,
                y: y 
            }
        });

const aboutSpotScene = gsap.timeline({
            scrollTrigger: {
                trigger:".about",
                start: "top 20%",
                endTrigger: ".our-history",
                scrub: 1.5,
    
            },
        });

        aboutSpotScene.to(".big-spot", {
            motionPath: {
                path: scaledPath,
                align: 'self',
                alignOrigin: [0.5, 0.5],
                // autoRotate: true
            },
            duration: 2,
            immediateRender: true,
            // ease: 'power4'
        })