Jump to content
Search Community

horizontal scroll not full height

Will.I.Am test
Moderator Tag

Recommended Posts

I want to have a horizontal scroll in the middle of the page (green section)  without it taking up the whole height of the page.

 

I am trying to figure out if there is a way to just stop the vertical scroll as user scrolls, and do an animation on scroll for items in the green section ... horizontally .. when it gets to the end, continue down the rest of the existing page.

 

I was looking at this codepen (

See the Pen NWpGeZX by ekfuhrmann (@ekfuhrmann) on CodePen

) , but it requires the section 3 to be full height... I want to be able to stay in the middle of the page visible there (section 2 and 4) if 3 is only 400px high or something

 

Is this possible?

See the Pen yLKpRjz by Will-I-Am-CodePen (@Will-I-Am-CodePen) on CodePen

Link to comment
Share on other sites

Conceptually it should be possible. You could either go for three separate ScrollTriggers, or the container animation.

There should be no need for full height - it just depends on how you set up your page and set your start and end points accordingly.
It is a bit tricky sometimes to wrap ones' head around the concept, and also there are often many ways to achieve  what you want, some more efficient then others. 

As @Carl mentioned in an other thread setting up the document and CSS-Structure often is half of the work. 
I'd suggest you build a  simplified Version of your page (including) the horizontal part and test it out.
 

 

  • Like 2
Link to comment
Share on other sites

per my codepen i setup at 

 

I have the basics setup, im just trying to figure out how do i trigger the green section when the center hits the center of the viewport, to scroll the elements inside the green section horizontally.

 

I am not sure I understand the "go for three separate ScrollTriggers"

 

I updated my codepen to show you that what I tried, the boxes above keep scrolling, and the ones below do not come into view now till the horizontal is done (well currently its only +=500 more.

Link to comment
Share on other sites

@Cassie

ok, much further then I have ever been... LOL

 

Questions, you have a container element around the 2,3,4 sections, is there a reason for that, could it just be around section 3?

 

Another question, I am assuming I can make the width dynamic based on the section3 container width instead of just +=3000

 

and lastly, I see your codepen does pretty much exactly what I was trying to describe, would you be able to give me some hints to where the actual content is? I see it scrolling to the left, but a big blank space, even if i make the 2nd SECTION background red or something.

 

appreciate the help, much appreciated

Link to comment
Share on other sites

Quote

Questions, you have a container element around the 2,3,4 sections, is there a reason for that, could it just be around section 3?

Nope - add a container wherever you like, as long as it's the height or higher than the Browser's viewport.

 

Quote

Another question, I am assuming I can make the width dynamic based on the section3 container width instead of just +=3000

Sure - you can use whatever end position you like.
 

end: ()=> `+=${element.innerWidth}px`,

 

Quote

and lastly, I see your codepen does pretty much exactly what I was trying to describe, would you be able to give me some hints to where the actual content is? I see it scrolling to the left, but a big blank space, even if i make the 2nd SECTION background red or something.

 

You just hadn't styled it to allow for that section to scroll really. You had a container with overflow hidden on which I was just animating to give you an idea of how to do the pinning. If you want to scroll through the items in that container you'll need to animate the inner elements, or an inner containing element instead of the div with overflow hidden on. Like this.

See the Pen bGvazZg by GreenSock (@GreenSock) on CodePen

 

Hope this helps!

  • Like 1
Link to comment
Share on other sites

@Cassie

 

I think i am at a good point with your help, but can you explain the xpercent part vs end ? am I missing something, there is some kind of correlation between these right? 

 

so i guess the question is... Im assuming the xpercent is the percent width of the elements to scroll horizontally ... and am wondering, if there is aformula to generate that -300 (assuming 300 cause 4 slides, minus the first one = 3, multiply by 100) .. but what happens if they are not all the same width i guess is what I asking

Link to comment
Share on other sites

Heya!

 

So - the end number is just how far you scroll down before the animation's completed.

xPercent moves by a percentage of the elements width, but depending on how your HTML and CSS is set up, that width may vary. You have overflow hidden set so that width was just the width of the screen in this case.

Here's an example using scrollWidth instead to move it all the way to the end. Functional values are great, you can just grab whatever measurements you need. :) 

See the Pen bGvazZg?editors=1111 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

There's not really a 'proper' way. There's just different ways depending on your HTML setup and your styling.
 

The demo I linked to above will work for your use case though. That's moving one long section it's whole width along the x axis, minus the width of the screen.

Another option would be...

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

Link to comment
Share on other sites

@Cassie

 

I am stuck, i changed my stuff to look like your code 

See the Pen bGvazZg by GreenSock (@GreenSock) on CodePen

 

but  i cant for the life of me figure out how to trigger a function when the elements get past the halfway mark for each one... everytime one of them scrolls past 50%of the page I wanted to change some text just above it, in another element just outside the scroll... i am pulling my hair out... LOL

Link to comment
Share on other sites

@Cassie

 

So I tried looking at what you provided... and still struggling, I tried to add a OnUpdate to the scrolltrigger , and then dtermine which element is 51% in the viewport, but it constantly tells me they are all inviewport :(

Link to comment
Share on other sites

Sure, can you show me what you've tried and explain what you've read/watched or understood of the content I suggested?

that'll help me understand how to help you and better explain this in our docs/articles to people in the future! Thanks

Link to comment
Share on other sites

Ok so you're not using containerAnimation like I suggested. Let's step back to the right technique.

 

The example in the page I linked to shows that you need to apply ease: "none"
You currently have a default ease applied so the animation is slowing down 'easing out' towards the end.

// keep a reference of the horizontal 'fake scrolling' animation so we can pass it around
let scrollTween = gsap.to(".container", {
  xPercent: -100 * (sections.length - 1),
  ease: "none", // <-- IMPORTANT!
  scrollTrigger: {
    trigger: ".container",
    start: "top top",
    end: "+=3000",
    pin: true,
    scrub: 0.5
  }
});


Also from the page I linked to - This demo shows how to animate elements within a container animated horizontally.

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen



That demo shows how to use callBacks to fire a function when a certain element hits a certain position in a horizontally scrolling section which is what you're after.

Does this help?

  • Like 1
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...