Anybody now how to recreate this effect from Outpost?

Design help Animations & Interactions
1

Hi Guys

Does anybody know how to recreate this parralax effect from the Outpost team on the header image on scroll? I’m using while scrolling in view but it doesn’t look as nice or as smooth as theirs, any ideas would be much appreciated.

https://preview.webflow.com/preview/10-new-burlington-street?utm_medium=preview_link&utm_source=designer&utm_content=10-new-burlington-street&preview=dbd20211d38637aef359ea1b30d703a0&mode=preview

2

I can’t seem to get the background image to scroll that little bit less to make it more obvious

3

you shouldn’t use interaction on the whole page - this way you will never have any control of the movement as page height is dynamic depending on window size and what content you will put on the page later. Add it for hero section only for example.

As for why it is so smooth on your example is because they used one or another scroll smoothing library. And don’t bother trying to make it work in webflow - interactions don’t play nice with it, I tried them all.

4

Hi @dram, Thanks for taking the time to reply… great to know about the interaction on the element vs the page.

I appreciate the smooth scrolling is some sort of luxy.js which I have used before but it has little quirks like it doesn’t like position fixed etc!

Thanks

5

For me it made all my “while scrolling in view” interactions super-jerky. Alas