Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
davidtovt

How can I make the same result with one div?

Recommended Posts

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

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?

  • Like 2
Link to comment
Share on other sites

@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

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

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

Link to comment
Share on other sites

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?

 

  • Like 2
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×