Move SVG Circle on Scroll

[RBari]

Hi everyone.

 

Problem: As the user scrolls from the second to third panel, I want the black circle to move vertically from the second panel to the third panel. 

 

Attempt: I know I should pin the circle using but I'm not sure how. 

 

If anyone could help, that would be great. The Codepen's below 👇

See the Pen NWpwKLX?editors=1100 by Refath (@Refath) on CodePen

[GreenSock]

Pinning is for regular HTML elements, not SVG. That's a very different beast. But you could just animate it down to simulate pinning.

 

Here's my quick mockup, but you'd have to set the overflow to visible on the parent SVG container so that it stays visible after that panel moves up:

See the Pen JjWObKx?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Hopefully this gets you on the right path. These forums aren't really for custom consulting as much as questions about the GSAP tools, API, etc. but we're happy to go above and beyond when we can. I just wanted to make sure I set expectations properly - we've been getting a lot of questions lately that are along the lines of "here are my requirements...please show me how to do it" and that can be quite time consuming for us

 

Anyway, happy tweening!

[RBari]

Hi @GreenSock This really helps. Only problem is, I don't understand what's going on. I'm guessing this 👇 does the magic business:

gsap.to(".eduSpend", {
    y: () => window.innerHeight,
    ease: "none",
    scrollTrigger: {
        start: () => window.innerHeight,
        end: () => "+=" + window.innerHeight,
        invalidateOnRefresh: true,
        scrub: true
    }
});

We start at the window's height and end one window-height later. But how do I tell GSAP when to stop moving the circle? 

[GreenSock]

1 hour ago, RBari said:

We start at the window's height and end one window-height later. But how do I tell GSAP when to stop moving the circle? 

Yep, we start the movement when the window has scrolled an entire one viewport height (because it's on the 2nd panel). And then we end one viewport height later. And notice the "y" of the tween is a function-based value that's one viewport height as well. Since scrub is set to true, that just means that it locks that tween to the scrollbar position (treating it like a scrubber), thus as you scroll down, the animation is in lock-step with your movement. That's what makes it appear "pinned" but it's actually just changing the "y" transform of the circle to create that illusion. 

 

If you wanted it to stay "pinned" longer, you'd have to adjust both the "end" value and the "y" value accordingly. 

 

The invalidateOnRefresh: true just forces it to re-grab that "y" value whenever the screen resizes so that it's all perfectly responsive. Otherwise, it would get the "y" on initial load but the if the user resized the window much bigger, the "y" movement would stay what it originally was (the viewport height on initial load).