How can I create a scrolling effect with sticky content?

0
9
Asked By CuriousCoder42 On

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

Answered By ScrollGuru99 On

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.

TechSavvyChris -

That method seems a bit shaky on mobile, though.

Related Questions

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.