[Bouncing pinned and snapped section]

Hello!

 

I made these pinned and snapped sections, but doesn't work correctly. Sometimes it gets stuck when I scroll fastly or it bounces or stops between two section.

I don't understand why, but on Codepen it's a little better than opening it in an HTML file.

 

How can I fix my code?

See the Pen wvqXjwe by davidtovt (@davidtovt) on CodePen

[How can I make the same result with one div?]

I mean, there was a bug in my code and not in GSAP. I think everything is good now.

[How can I make the same result with one div?]

I found another bug. The offset of first section is always 0 and it not works correctly if we have content before the parallax sections, so we have to add the starting position to the sections.

 

const contentContainer = document.querySelector('.content-container');

 

if (currScroll > contentContainer.offsetTop + marker.offsetTop) {

[How can I make the same result with one div?]

Thank you very much!

[How can I make the same result with one div?]

@akapowl It's good for me, just I thought there is a better solution. I found an error, if I scroll down the page than refresh the page I get the following error:
Uncaught ReferenceError: Cannot access 'contentMarkers' before initialization

 

You can check here: https://cdpn.io/davidtovt/debug/dyzOOPw/bYMdypQgzZRr

 

Do you know how to fix this?

[How can I make the same result with one div?]

Hi!

 

I just want to use the 'right-content' div and insert the 'boxToShow' divs inside the 'contentMarker' divs. Can anyone help me?

See the Pen dyzOOPw by davidtovt (@davidtovt) on CodePen