Jump to content
Search Community

Horizontal scroll sections

Dennyno test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi guys,
I've seen many tutorials and demos but still got issue while trying to make my codepen working.
I may need to make my section horizontal scroll from right with scrub, but.... it simply stays there.
I dont know if it's better to make the container to scroll, or it's inner columns. (guess the second)
Btw none of'em works on my example.
What am I missing?
Thanks for any help.

See the Pen zYdpqwM by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

  • Solution

Hello @Dennyno

 

1 hour ago, Dennyno said:

Btw none of'em works on my example.

 

You forgot to load ScrollTrigger in the first place.

 

Then, when loaded and you take a look at the markers (e.g. in full-window mode) you will notice that they already passed their start and end so you will have to adjust those (start and end) and also how you target the elements.

 

Right now you are doing a document.querySelector to populate your variable, but that will only get the first element with that class in the document flow. For targetting all of them, use document.querySelectorAll

 

Also one of your block-columns is missing a 'b' in the class-name in your mark-up.

 

If you correct those things mentioned above, you will already see it working way better.

 

See the Pen 1c292d62b61cb7629513a88d36ebf6f6 by akapowl (@akapowl) on CodePen

 

 

 

  • Like 1
Link to comment
Share on other sites

My fault @akapowl !
Thanks for clarifying!
I handled this way, which seems to work too:

 

async function horizontal_snap(){
	let hor_scroll = document.querySelector(".main-what-we-do-home");

gsap.fromTo(hor_scroll, {x:0},
			{
  x: -300,
  scrollTrigger: {
    trigger: ".main-what-we-do-home",
	 anticipatepin: 1,
    pin: true,
	stagger: .5,
    scrub: 1,
    start: "center center+=70",
    end: "bottom center+=500",
	markers: false,
	invalidateOnRefresh: true,
  }
});

}
horizontal_snap();

or is it wrong?

Link to comment
Share on other sites

As far as I can tell the only thing you changed is that now you are selecting and tweening on the container?

 

Usually it is best to avoid tweening positioning of the elements that are set as your trigger as that can cause problems, but as you are only tweening on the x-axis there and the start and end are dependent on the vertical positioning, I don't think that should be a problem for now - but I'm also not saying that it couldn't become a problem later on, depending on where you are going with this

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...