Repurposing full-screen horizontal scroll for container

[LML87 0 Likes (Newbie)]

Total brain mush newbie here!

 

The included CodePen demos a really awesome full-page example, and I've been trying (and failing) to repurpose it as a contained element that sits in the middle of a page surrounded by other elements, but it's feeling like the logic is beyond me.

 

Any tweak I attempt, the navigation timeline just treats the entire page as the focus, rather than the container I house it in and try to focus on.

 

I'm not a dev, just a "I'll look at parts that make sense, Google a lot, and break stuff until it does what I want" level of coder - hoping someone more legit would know how this is achieved?

 

Thanks

See the Pen d9557b8a3d864e6be3d37b1b1eb0d6df by michellebarker (@michellebarker) on CodePen

[Cassie 5,403 Likes (Superhero)]

Hiya!

 

So firstly this demo is by Michelle Barker, if you're using it on a website it would be polite to pop her a message to check she's ok with that first.

Assuming she is - a little more info would help us assess whether we can help. Could you explain which parts of it you want to keep, functionality-wise and how it would be surrounded by other elements? Are you wanting to scroll down to this section and pin it? Would the nav be part of that? Or would the nav be at the top?

 

Maybe you can explain this a little more?

Quote

 the navigation timeline just treats the entire page as the focus,  rather than the container I house it in and try to focus on.

How are you focusing on it? Where does this container sit?

Do you maybe have a fork where you've attempted it that we can take a look at?

 

Just a little pre-warning that these forums are mainly for gsap-specific questions and trying to wrangle demos into new situations is a little out of scope, holding off on that judgement until I understand a little more what you're after.