Pinned Section with continuous Scrolling Items

[dubCUT]

Hello

I'm totally new to GSAP (and basically JS...)

What i try to achieve is to scroll to the blue section.

Then the blue section should stay pinned when completely visible, while the yellow items scroll on.

Only after the last item scrolled by, it should scroll to the next section.

 

How can i set the start and end to the itemcontainer, while pinning the section?

 

Any help is appreciated, 

thank you

See the Pen mdapKPq by dubcut (@dubcut) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the clear demo. It shows you're really trying.

You did a good job of setting things up. 

However, getting this done right takes a bit of experience with the subtleties of the API.

You'll need to really understand things like pinning, function-based values, dealing with responsive settings etc.

 

I've done something similar in a recent lesson so I was able to quickly make some modifications.

 

 

See the Pen JjwMBmm?editors=0110 by snorkltv (@snorkltv) on CodePen

 

Note: a big part of what you need is to figure out how far the yellow boxes need to move. I did this in the getScrollDistance() function. With invalidateOnRefresh set to true that function will re-run automatically on resize.

 

Hopefully this demo is enough to give you something to experiment with.

 

Be sure to study all the ScrollTrigger properties in the docs as that will help greatly.

 

If you want to do more with ScrollTrigger and GSAP I encourage you to check out my GSAP course bundle, I cover all these things in detail.

 

Good luck on the project!

 

Carl

 

 

 

[Carl]

oh and here is a similar result with a different layout. 

notice the right side gets pinned while the rest of the page naturally scrolls by. 

there is no need to animate the content with a tween.

 

This is the start of a much more elaborate lesson in my ScrollTrigger course, but maybe it helps too

 

See the Pen oNaNgLg?editors=1010 by snorkltv (@snorkltv) on CodePen

[dubCUT]

thank you very much! i'll take some time to understand that, and if i can make it work when having multiple sections with different scroll distances (more or less yellow items ) 

I would like to also thank you for the trick with the grid. it's very handy!

 

[dubCUT]

The next step would be to have several "fullpages" that behave in the same manner.
i found a working solution, but it is obviously not a good practice to duplicate everything.
when looking into the docs under common mistakes i found 'Using one ScrollTrigger or animation for multiple "sections"' which tells to use a loop. 

const boxes = gsap.utils.toArray('.box');
boxes.forEach(box => {
  gsap.to(box, { 
    x: 300,
    scrollTrigger: {
      trigger: box,
      scrub: true
    }
  })
});

but in my example i don't use the box as a trigger AND animation target.
i have two elements for that and can't find a reference on how to do that.

 

See the Pen bGOaxRr by dubcut (@dubcut) on CodePen

 

 

[Rodrigo]

Hi,

 

Just run a loop and a function for the distance:

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

 

Hopefully this helps.

Happy Tweening!

[dubCUT]

Thank very much, you are a hero!

When adding some animation I noticed that start/end gets thrown off for my yellow items when using "// SCROLL PIN AT FULLPAGE" function from before.
Also it can not handle "goto Section" navigation.
So it is disabled in this example to show the animation. Of course the goal is to make them all work together...

I also added a "// SCROLLJUMP TO SECTION" function which does not seem to impact this issue but it is disabled for now.

Regarding the animation issue, i guess i need to rescale/adapt the animation part of my items to the localspace of "getScrollDistance(section)" somehow, but not shure if thats the way to investigate..?

See the Pen dywdGgY by dubcut (@dubcut) on CodePen

Any help is appreciated, thank you

[Carl]

I can't really dig into all your code, nor do I really understand the latest question. However, if you feel that markers are thrown off somehow this is usually a side-effect of animating the trigger. In other words, don't make the trigger (section) the same thing as the target of your tweens.

 

ScrollTrigger needs to measure the y distance of the trigger in order to position the markers, start, and end values. Animating it causes trouble.

 

use a structure like

<section class=trigger">

  <div class="thingToAnimate"></div>

</section>



ScrollTrigger.create({

  trigger:".trigger",

  animation:gsap.to(".thingToAnimate", {y:200});

})

one way to test if this is the issue is to just make your animation change the opacity of the section. If things work well this way that means that animating the y of trigger is the issue.

[dubCUT]

Hello Carl

I'm sorry if i overcomplicated my words and example. (EDIT: i fixed it quite a bit, see EDIT below  )

The thing to animate and the trigger are the same in my example ('.item'). it itself is not animated before. only it's parent ('.container').

it is basically still the same Scroll Pin you helped me a few posts above.

Then @Rodrigo helped me to implement a loop to make the pin work for multiple sections. (it's the first part of the script)

If i try to animate my yellow box ('.item') the start/end markers do not stick to the box where i expect them.

See the Pen dywdGgY by dubcut (@dubcut) on CodePen

 

EDIT: i found out that if i set 

end: "+=2050"

it works for the first section (having 5 items), but others have more items and therefore need a higher value. 

i'm pretty shure this has to be set as getScrollDistance(section). The height of the current section.

i guess i cannot set it like that:

end: +=getScrollDistance(section)

?

[mvaneijgen]

Hi @dubCUT, this was what @Carl tried to explain, and you have this in your tween and ScrollTrigger, which is a no go when using ScrollTrigger.  The thing you antimate and the trigger of the ScrollTrigger can't be de same. 

 

 gsap.to(item, { // These cant be the same
    ...
    scrollTrigger: {
      trigger: item, // These cant be the same
      ...      
    }

The order in which ScrollTriggers get created is also importend, so you might want to look in to refreshPriority.  Hope it helps and happy tweening! 

 

Quote

number - it's VERY unlikely that you'd need to define a refreshPriority as long as you create your ScrollTriggers in the order they'd happen on the page (top-to-bottom or left-to-right)...which we strongly recommend doing. Otherwise, use refreshPriority to influence the order in which ScrollTriggers get refreshed to ensure that the pinning distance gets added to the start/end values of subsequent ScrollTriggers further down the page (that's why order matters). See the sort() method for details. A ScrollTrigger with refreshPriority: 1 will get refreshed earlier than one with refreshPriority: 0 (the default). You're welcome to use negative numbers too, and you can assign the same number to multiple ScrollTriggers.

 

[dubCUT]

hmm, that's confusing. when watching tutorials i saw plenty of people doing that. it is usually the first example to demonstrate scrollTrigger and animate something while use itself as a trigger.

 

[Rodrigo]

Hi,

 

Using a combination of ScrollTrigger and the ScrollTo Plugin to scroll to a specific location, especially when you have pinned sections with ScrollTrigger is not as trivial as using the height of the elements, their offsetTop or other properties. Is always better to use ScrollTrigger in order to get the specific scroll distance using the start/end points. I checked your code for that quickly and it doesn't look like the best approach IMHO

 

In this demo for example:

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

 

The calculations are being made in line 195 in order to get the correct scroll position of each section. Granted this uses ScrollSmoother's scrollTo method, but using the ScrollTo plugin shouldn't be too different.

 

The other issue here, as @Carl mentions, is the fact that you are animating the container of the yellow boxes on the Y axis and you are creating ScrollTrigger animations for the yellow boxes. So ScrollTrigger calculates the start and end values for those, when the parent of the yellow boxes hasn't moved yet, then you move that on the Y axis, so all the calculations are useless because the actual positions of the yellow boxes has shifted.

 

Here is a super simple example (It should look better in a different tab):

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

 

Hopefully this helps.

Happy Tweening!

[dubCUT]

Thanks to Everyone for your patience and kind help!
I took your latest example and added a loop to make it work on multiple sections.
looks clean to me, but what do i know...

 

See the Pen oNJEyJw by dubcut (@dubcut) on CodePen

[dubCUT]

I hope this is my last question in this post.

Everything works quite good so far. sections get pinned and the boxes scroll by.

if you click a box it opens a black overlay.

onLeave: AND onLeaveBack: the overlay goes away.

 

But, and here is the question: it would be much preferable to prevent scrolling to the next or previous section when the overlay is open.

Is that even possible? 

 

See the Pen abPYoBb by dubcut (@dubcut) on CodePen

[mvaneijgen]

Sure thing. This has nothing to do with GSAP, but you can give the body an overflow: hidden; when you click the panel (don't forget to remove it when you click away again) 

 

// Disable scrolling by locking the 'overflow' property of the body
document.body.style.overflow = 'hidden';
// To re-enable scrolling:
document.body.style.overflow = 'auto';

Hope it helps and happy tweening! 

 

See the Pen LYMdEmK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[dubCUT]

Thanks for that suggestion mvaneijgen

But the tricky thing is that scrolling for the boxes should still be possible.

It should just not scroll past the current section. that's why i guessed it may be GSAP related.

[Rodrigo]

Hi,

 

This is actually a bit beyond being GSAP related. That is not an issue or an implementation problem, but a unique and custom requirement, and without being judgmental (even it could sound like that) a bit weird and that it doesn't make much sense. You want the overlay to be present until you leave the particular section where the boxes are, but at the same time you want to prevent the user from scrolling to the previous or next section, so only scroll within that particular section.

 

What you could do is use the onLeave and onLeaveBack events in order to force the scroll position to either the start or end point of that section's ScrollTrigger, if the overlay element is open of course.

https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll()

 

But if I was you I'd leave the functionality you already have since blocking the scroll in a way that is not entirely intuitive sounds like terrible UX IMHO. If I can see the scroll bar, means that I should be able to scroll up and down, but if I'm not able to do that then I'd get confused and probably wouldn't use that site anymore, so my advice is to thread carefully in this subject.

 

Hopefully this helps.

Happy Tweening!