I'm trying to replicate a scrolling effect I saw on Stripe's website. I want to focus on the right side of the layout where an image or animation changes based on the scroll position. Would using a grid layout with a sticky right section help achieve this? I'm looking for advice on implementing this effect. Check out this video example for reference: https://streamable.com/du3lv7.
1 Answer
I recommend checking out Motion for inspiration! They have a cool example of scroll pinning that looks similar to what you're aiming for. You can find it here: https://examples.motion.dev/js/scroll-pinning. Basically, you could use a sticky container on the right inside a grid layout, along with intersection observers to update your animation when each section comes into view.
That method seems a bit shaky on mobile, though.