Scrolltrigger horizontal scroll jumps from first panel to second panel with position "end: 'bottom bottom" set.

[MarkD617 5 Likes (Newbie)]

Hi again ALL!

 

First of thank you for all the help with my GSAP learning / issues. The responses and support are TOP NOTCH. I have managed to get all my scrolltrigger animations and timelines working as expected! :).

 

There is one thing I cannot figure out (last question I promise ;)). When I am trying to utilize a horizontal scroll if I set the end: 'bottom bottom" which is where I would like it to end my panels jump to the last slide. I think I understand why because there is not enough "time" to scroll through. If end: is not passed a value the slides work great however there is a white space gap at bottom on the first slide and as you scroll the content beneath "rises" up until the last slide is met.

 

How do you just pin at the section, scroll through the slides without whitespace and then continue with the rest of the page???

See the Pen MWmmpEw by mDDDD (@mDDDD) on CodePen

[Cassie 5,411 Likes (Superhero)]

Hey there Mark!

Your 'end' trigger was set to when the bottom of that section hit the bottom of the viewport - this was actually occurring before your start trigger (when the top of the section hit the top of the viewport)

I've changed your end values to +=4000px which gives you a lot more time for scrolling. ☺️

See the Pen 4b79d15bd32e1e360b067bed980fd13c by cassie-codes (@cassie-codes) on CodePen

[MarkD617 5 Likes (Newbie)]

Hi! @Cassie thanks you for response!

I see what you did and I do understand that, thank you. The problem is that white space underneath the slides when you set the end to a value as you did  "end: '+=4000'.  Referencing the codepen my goal is to have the "spacer" beneath the slides remain directly underneath the slides and the slides scroll as the do when you set that end value. How do you remove the whitespace below during the scrolling?

[akapowl 5,225 Likes (Superhero)]

Hey Mark,

 

First off, I'd strongly recommend setting a trigger-element there because otherwise you might not get results you'd expect.

 

If you don't want the pinSpacing to show, you could either wrap your content in a div and pin that wrapping div, or alternatively you could also pin the body. Note that any later triggers on elements within that pinned container (either a set-up wrapper or the body) will not be able to take the pin-spacing into account then (since they will be inside of that pin-spacer)  - which is why you will probably have to use the pinnedContainer property for later ScrollTriggers on elements inside.

 

See the Pen a33173d44185f5dfd6d2e767fa476404 by akapowl (@akapowl) on CodePen

[MarkD617 5 Likes (Newbie)]

@akapowl AWESOME! that's exactly what I was after!