[Pinned Section with continuous Scrolling Items]

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.

[Pinned Section with continuous Scrolling Items]

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

[Pinned Section with continuous Scrolling Items]

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

[Pinned Section with continuous Scrolling Items]

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.

 

[Pinned Section with continuous Scrolling Items]

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)

?

[Pinned Section with continuous Scrolling Items]

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

[Pinned Section with continuous Scrolling Items]

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

 

 

[Pinned Section with continuous Scrolling Items]

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!

 

[Pinned Section with continuous Scrolling Items]

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