Jump to content
Search Community

Horizontal Scroll without ScrollMagic

Black Ducas test
Moderator Tag

Recommended Posts

Hi, as suggested in another topic by @ZachSaucier, I'm trying to create an horizontal scroll without ScrollMagic.

 

I want to reproduce this effect:

 

See the Pen qBdewXg by netgloo (@netgloo) on CodePen

 

Here is my progress

 

See the Pen QWbeRjm by netgloo (@netgloo) on CodePen

 

but I've various problems:

- scrolling stops before the horizontal element end

- after the horizontal element gets fixed position, when I scroll up it remains fixed, cause I don't understand how to catch this case to remove the fixed

- in general, I'm not sure I'm following the correct approach. Any advices are welcome!

 

Any ideas?  Thanks

 

See the Pen qBdewXg by gooogooo (@gooogooo) on CodePen

Link to comment
Share on other sites

58 minutes ago, Black Ducas said:

- scrolling stops before the horizontal element end

Your calculations are wrong.

 

58 minutes ago, Black Ducas said:

- after the horizontal element gets fixed position, when I scroll up it remains fixed, cause I don't understand how to catch this case to remove the fixed

I recommend using .set()s in the timeline. Keeps it more clean because it can progress backwards more easily.

 

58 minutes ago, Black Ducas said:

- in general, I'm not sure I'm following the correct approach. Any advices are welcome!

Yep, your approach is good.

 

Fixing your calculations, you get this:

See the Pen pojzoxy?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note that I added a spacer element to handle the offset of the image when it goes from static to fixed.

 

Also note that I didn't add resize support.

  • Like 3
Link to comment
Share on other sites

 

Hi @ZachSaucier

awesome, masterful! That was not so easy for me. I'm studying it and optimizing it, will share my progress.

Just a thing: why you multiply for 2, here gsap.set('.spacer', {height: width * 2}), is it maybe related to the fact that horizontal scroll seems to scroll at half of the speed of the vertical scroll? Isn't better if horizontal scroll at the same speed? 🤔

Link to comment
Share on other sites

2 minutes ago, Black Ducas said:

Just a thing: why you multiply for 2, here gsap.set('.spacer', {height: width * 2}), is it maybe related to the fact that horizontal scroll seems to scroll at half of the speed of the vertical scroll? Isn't better if horizontal scroll at the same speed? 🤔

It just depends on the effect that you want. You can subtract a width from them both if you'd like:

const finishDistance = startY - innerHeight;

gsap.set('.spacer', {height: width});

 

  • Like 2
Link to comment
Share on other sites

19 hours ago, ZachSaucier said:

It just depends on the effect that you want. You can subtract a width from them both if you'd like:


const finishDistance = startY - innerHeight;

gsap.set('.spacer', {height: width});

 

Ok, just trying to understand with some difficulties. The .container element is actually set at 5000px by default via CSS but it will contain dynamic content so the width is not know. I tried setting it for example at 8000px but when the horizontal element ends, the spacer is still visible for a while. Nevertheless it has the correct height set via JS...

 

---

 

Trying to understand, I made this codepen with another approach, maybe more simple to follow:

 

See the Pen QWjWKYp by gooogooo (@gooogooo) on CodePen

 

based on the attached scheme, but I don't get where I'm wrong

 

 

horizontal_scroll.jpg

Link to comment
Share on other sites

5 hours ago, Black Ducas said:

I tried setting it for example at 8000px but when the horizontal element ends, the spacer is still visible for a while.

Sorry, I had the wrong value that just happened to work because the space before container was the same as the width. My logic is fixed now.

Link to comment
Share on other sites

31 minutes ago, ZachSaucier said:

Sorry, I had the wrong value that just happened to work because the space before container was the same as the width. My logic is fixed now.

Yeah, now it works, I'm going to study the new code.

 

There's still a particular useful case where something goes crazy: that's when you don't have any element before and after the horizontal scroll, that is remove the 2 divs .other. Now if you scroll a bit, then back to the start and scroll again you'll see the container doesn't remain fixed, I suppose. We maybe need to reset or something the timeline? You know what causes that?

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...