Sticky horiztonal scrolling text

Design help Animations & Interactions
1

Hey there.

I’ve a client i’m building a website for who wants some headers as horizontal scrolling text - he’s sent me this as the main example.

https://www.lacoste.com/us/lacoste-heritage.html

You’ll notice the scroll is disabled until the text has fully reached a certain point ( eg. all the text has appeared into the viewport )

This is what i’m trying to achieve across all the breakpoints but not entirely sure how.

I’ve got it as a scroll into view interaction currently but that doesn’t seem to be the right approach.

Any ideas or tips would be hugely helpful.

Here is my public share link: LINK
(how to access public share link)

2

Sounds like the right approach. Note that the page level scrolling interactions and the element-level scrolling interactions have different capabilities.

Here I think you want the element-level interaction, and you want to set the interaction so that it starts and ends at the right point relative to the element’s scrolling position.

I expect the basis for the section would be;

DIV - section, relative position
  DIV - content, absolute position

And you’d be shifting the position of your content with the scroll-bound frame.

3

Thanks so much @memetican. I’ll give it a shot

4

Hi @memetican - Are you able to give me a little more assistance here? I’m struggling to figure out quite how to implement it. It’s scrolling but often the text is cutting off… It seems like there are loads of tutorials for images that take up 100% vh and vw but nothing for text where there isn’t really a set width.

I think I know what it needs to do… i’m just not figuring it out in my mind to make it happen.

5

You’ll almost certainly need a set width, otherwise the interaction won’t know how far to shift that element horizontally as you scroll vertically.

I’d recommend you use Made in Webflow, etc first, but if you do need help building this, DM me and I can give you my details.

6

Thanks @memetican - Yes I think you’re right about the width… i was hoping to avoid that as it’s text based but seems the best way. I’ll just have to make sure to add some extra to try and accommodate all the responsive ways.

I think i’ve got it sorted… but if not i’ll be in touch.

Thank you

Alex