ScrollTrigger Horizontal Scroll

[pedromeneses97]

Hello!
I've started recently using gsap and got really interest in the ScrollTrigger plugin. I'm trying to achieve something like this:
https://clorova.com/works
A horizontal scroll that has no overflow and does not shift layout, i do not care about the parallax effect. I need a heading and description always fixed on top of the slider. It only stays if i position absolute/fixed but i do not want to have to media querie from 2000px to a mobile.

How can i achieve this? Thanks.

See the Pen oNpYyQN by pedromeneses97 (@pedromeneses97) on CodePen

[OSUblake]

Welcome to the forums @pedromeneses97

 

You just need to pin the section that wraps your text and the container, instead of pinning the container.

[pedromeneses97]

15 hours ago, OSUblake said:

Welcome to the forums @pedromeneses97

 

You just need to pin the section that wraps your text and the container, instead of pinning the container.

Thank you, it was the answer i needed!

[pedromeneses97]

16 hours ago, OSUblake said:

Welcome to the forums @pedromeneses97

 

You just need to pin the section that wraps your text and the container, instead of pinning the container.

I have 8 elements on the horizontal scroll that are 500px each and have a margin right of 40px.

The pinned section has a margin-left of 120 and a padding of 80.
The last element on the horizontal scroll is cutted in half , is there a way to fix it? 
I fixed it creating a invisible element of 200px (margin + padding) and it worked but it's not a good fix

 

gsap.registerPlugin(ScrollTrigger)

 

let container = document.getElementById("container");

let section = document.getElementById("ContainerInformacao");

 

gsap.to(container, {

x: () => -(section.scrollWidth - document.documentElement.clientWidth),

ease: "none",

scrollTrigger: {

trigger: section,

pin: true,

scrub: 1,

 

// end: () => "+=" + container.scrollWidth ,

invalidateOnRefresh: true,

end: () => `+=${container.offsetWidth}` // will be updated

}

})

 

[Cassie]

Heya!

could you pop a minimal demo in here so we can take a look and tweak the code? Thanks!

[pedromeneses97]

10 minutes ago, Cassie said:

Heya!

could you pop a minimal demo in here so we can take a look and tweak the code? Thanks!

Hello @Cassie ! 
Minimal demo link: 
Thank you

[OSUblake]

4 hours ago, pedromeneses97 said:

The pinned section has a margin-left of 120 and a padding of 80.

 

Just add that to your calculation 😉
 

x: () => -(section.scrollWidth + 200 - document.documentElement.clientWidth),