How can I make the same result with one div?

[davidtovt]

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

[akapowl]

Welcome to the forums @davidtovt

 

I don't think it would be easily possible from a logical point of view to have everything inside one div, as the whole logic of how this works relies on one container being pinned while the content of the other one is scrolling freely. 

 

Is there any particular reason you want or need everything to be within one div?

[davidtovt]

@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?

[akapowl]

Sure, just create your ScrollTrigger after you populate that variable with the array of elements.

 

https://cdpn.io/akapowl/debug/8026a1320ecfce0af36ed4e4e53eccdb

 

See the Pen 8026a1320ecfce0af36ed4e4e53eccdb by akapowl (@akapowl) on CodePen

[davidtovt]

Thank you very much!

[davidtovt]

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) {

[akapowl]

16 minutes ago, davidtovt said:

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.

 

I wouldn't exactly call it a bug - it's just how the logic is made up. 

 

The markers in your example are elements with a width of 200vh and a bottom-border, so the first marker will always have an offsetTop of 0, as offsetTop always gives you the offset to the top of the parentElement - and as its top is at the top of that arent container, its offsetTop is 0.

 

It looks to me, like the person you forked your example from made some changes to the HTML structure without accomodating for those in the JS. (I may as well be wrong there though, as I'm too short on time right now, to take a deeper dive into the code).

 

 

This here is the original example where the logic very likely derived from...

 

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

 

...and here it is with some content added above the section to show that it will still trigger things in the same places.

 

See the Pen 4ef16c82c1ec679585d14f26438ef631 by akapowl (@akapowl) on CodePen

 

 

 

This is just to clarify that this isn't a bug with ScrollTrigger or GSAP.

 

Those demos in the demo-section are merely just examples for ways you could possibly do things and not really intended to be seen as 100% in every scenario bulletproof solutions - as almost always with ScrollTriggered animations; when you make changes to the basic structure/styling of things, you will have to accomodate for them in the logic for how to trigger things.

 

But it looks, like you got that right already for your usecase, or are you still experiencing some issues?

 

[davidtovt]

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