davidtovt Posted October 22, 2021 Share Posted October 22, 2021 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 Link to comment Share on other sites More sharing options...
akapowl Posted October 22, 2021 Share Posted October 22, 2021 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? 2 Link to comment Share on other sites More sharing options...
davidtovt Posted October 24, 2021 Author Share Posted October 24, 2021 @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? Link to comment Share on other sites More sharing options...
akapowl Posted October 24, 2021 Share Posted October 24, 2021 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 3 Link to comment Share on other sites More sharing options...
davidtovt Posted October 25, 2021 Author Share Posted October 25, 2021 Thank you very much! 1 Link to comment Share on other sites More sharing options...
davidtovt Posted October 26, 2021 Author Share Posted October 26, 2021 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) { Link to comment Share on other sites More sharing options...
akapowl Posted October 26, 2021 Share Posted October 26, 2021 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? 2 Link to comment Share on other sites More sharing options...
davidtovt Posted October 26, 2021 Author Share Posted October 26, 2021 I mean, there was a bug in my code and not in GSAP. I think everything is good now. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now