ScrollTo issues - possibly visibility issue or z index?

[newguy123]

Hi

 

Following on from another post I made yesterday, this one takes it a step further. I have a simple image sequence, with 4 titles spread over the sequence.

I have an initial jump button, which jumps to the 1st title. Then I have buttons to the next title etc, with the last title having a button to jump back to the 1st title.

 

However, the buttons DONT ALWAYS WORK. Sometimes they are not clickable, other times it seems to run the wrong ScrollTo code, asif its seeing the other buttons on top of each other or something, I can't figure out what the issue is. I thought of perhaps using autoAlpha, instead of opacity, but that doesnt really seem to make much difference.

 

If you run through the buttons, top to bottom, and keep going, you'll notice sometimes the correct button code is run sometimes on the 1st run, but jumping back to 1st title and then keep going, it seems to run the wrong button code.

 

 

 

See the Pen bGZOqdV by newguy123 (@newguy123) on CodePen

[akapowl]

Hello @newguy123

The most profound way to debug your code is to use the dev-tools of your browser;
e.g. right-click on elements you want to inspect and see what gets selected in certain scenarios when selecting 'inspect element' from the context menu.

In your case, when the scrollTo-tween is fully done, so the scrollTriggered animation is where you want it to be, your buttons will work as expeted;
but when the scrollTo-tween isn't fully finished, or you are generally in a state / at a position in between, this is what will always get selected on click:



I don't have the time to look through all your code in too much detail, but that likely is the case because you seem to solely rely on opacity.

Opacity will only change the element visibly; that doesnt mean that items that sit above it on the z-index won't be clickable though.

So you'll need to change that - a CSS property that can help you there is visibility; you'll need to also handle that for your elements. Luckily for you, GSAP has a property that combines both CSS properties (opacity and visibility) into one in a way it spares you the head-ache to figure out proper logic for that.
 

https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/#autoalpha

So just exchanging opacity with autoAlpha in the tweens of the tl in your forEach loop should already help a lot with that.

I hope that will help. 

Cheers.


 

[newguy123]

If what you're saying is true, then it seems to be more an issue with the label, to which ScrollTo is suppose to go to. Since as I say, if you click a button, then just SLIGHTLY manually scroll further, then the button ALMOST works.

 

Anybody have any ideas?

[newguy123]

In this one, I used autoAlpha, instead of opacity, and it appears to be working now

Weird, as I said in my 1st post, I tried this and it didnt work before...

 

See the Pen OJqdJPZ by newguy123 (@newguy123) on CodePen

[mvaneijgen]

Seems to work perfectly here! I get navigated to each title and at the last one it jumps back to title 1 🤷 

 

Any steps to reproduce the issue?

[newguy123]

4 minutes ago, mvaneijgen said:

Seems to work perfectly here! I get navigated to each title and at the last one it jumps back to title 1 🤷 

 

Any steps to reproduce the issue?

In my 1st post, there's an issue my end in that different code runs to the button I clicked

 

In my next post with the 2nd pen, I changed opacity to autoAlpha instead, and that one seems to work great as expected. Perhaps the 1st time I tried autoAlpha I might have had a typo or something and that is why it didnt work, but as you see, it works now perfectly fine (only in the 2nd pen though)

[mvaneijgen]

I always like the CSS property pointer-events: none; https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events to make sure things that should be clickable are not clickable, but you're the developer, so you have to consider what is the best setup for your project

[akapowl]

29 minutes ago, newguy123 said:

If what you're saying is true [...]

Why would I be lying about what I said or intentionally give you advice that I don't think will help!? 😂
 

29 minutes ago, newguy123 said:

Since as I say, if you click a button, then just SLIGHTLY manually scroll further, then the button ALMOST works

Might just be me, but I think a button either works or it doesn't; not sure what you mean by 'it almost works'.

The reason it sometimes works for you with opacity - and other times doesn't - is probably related to elements with an opacity of 1 having a different stacking-context than elements with any other opacity but 1, e.g. 0 or somthing in between like 0.857694857; that also pretty much correlates with what I explained in the post above; about being on scroll-positions in between.

That is a browser thing - nothing related to GSAP in any other way.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

So when you're right on spot and an element's opacity is at 1 exactly - it will appear above all the other elements that do not have that opacity of 1 and thus it will be perfectly clickable. But if all the elements do not have an opacity of 1, they will all share the same stacking-context, and since the last element sits on top of all other elements z-wise within that stacking context, this element and no other will be clickable in those cases.

Does that make sense to you?


 

[newguy123]

2 minutes ago, mvaneijgen said:

I always like the CSS property pointer-events: none; https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events to make sure things that should be clickable are not clickable, but you're the developer, so you have to consider what is the best setup for your project

I was dabbling with that also, but in my case what seem to make the difference was the autoAlpha

Do you have a second to briefly explain how you would have used the pointer-event:none instead, seeing that all titles with buttons get their property set in a loop in 1 go, same with the tween?

[newguy123]

5 minutes ago, akapowl said:

Why would I be lying about what I said or intentionally give you advice that I don't think will help!? 😂
 

Might just be me, but I think a button either works or it doesn't; not sure what you mean by 'it almost works'.

The reason it sometimes works for you with opacity - and other times doesn't - is probably related to elements with an opacity of 1 having a different stacking-context than elements with any other opacity but 1, e.g. 0 or somthing in between like 0.857694857; that also pretty much correlates with what I explained in the post above; about being on scroll-positions in between.

That is a browser thing - nothing related to GSAP in any other way.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

So when you're right on spot and an element's opacity is at 1 exactly - it will appear above all the other elements that do not have that opacity of 1 and thus it will be perfectly clickable. But if all the elements do not have an opacity of 1, they will all share the same stacking-context, and since the last element sits on top of all other elements z-wise within that stacking context, this element and no other will be clickable in those cases.

Does that make sense to you?


 

I was confused for a sec, since as I say I did try autoAlpha before I posted, but when I tried again, after reading your post, it 'magically' started working. Perhaps 1st time around I had a typo.

 

Yes your explanation of opacity makes perfect sense, thank you. That's why autoAlpha is such a blessing in this case it seems as I dont have to worry about other elements having opacity 1 or near 1 etc.

[mvaneijgen]

Keep in mind that all this is CSS and has nothing to do with GSAP. A firm understanding of CSS is really important when starting to make more and more complex animations.

 

Maybe in this case visibility: hidden; is better because the browser handles the element differently. https://developer.mozilla.org/en-US/docs/Web/CSS/visibility this is what autoAlpha sets under the hood (in tandem with opacity)

 

You'll have to view the web page as a 3D object and all your buttons are a stack of paper and if you click on the front most one even if it is not visible you still click on the object on front. Also highly advise to test this in multiple browsers because I have the feeling some browser might handle this differently and if that is the case you might also have to set the z-index to 'physically' move it to the back if you don't want people to click on it, otherwise the button you click on is blocking the once behind it. This you can all debug, by logging the element that is being clicked on and see if that correspond with what you think is being clicked. 

[newguy123]

14 minutes ago, mvaneijgen said:

Keep in mind that all this is CSS and has nothing to do with GSAP. A firm understanding of CSS is really important when starting to make more and more complex animations.

 

Maybe in this case visibility: hidden; is better because the browser handles the element differently. https://developer.mozilla.org/en-US/docs/Web/CSS/visibility this is what autoAlpha sets under the hood (in tandem with opacity)

 

You'll have to view the web page as a 3D object and all your buttons are a stack of paper and if you click on the front most one even if it is not visible you still click on the object on front. Also highly advise to test this in multiple browsers because I have the feeling some browser might handle this differently and if that is the case you might also have to set the z-index to 'physically' move it to the back if you don't want people to click on it, otherwise the button you click on is blocking the once behind it. This you can all debug, by logging the element that is being clicked on and see if that correspond with what you think is being clicked. 

To that effect, in addition to autoAlpha, I think I will then in that case set the starting z-index to -1, and the 1st to tween z-index to 9999 to make sure that title and button is on the top, then on the fade out tween, I'll set the z-index back to -1,  and also MOVE the entire thing y: -500, just to make sure only the 'CORRECT' button is both visible and also clickable.

 

 

Does that sound like a good plan?

[mvaneijgen]

If it works! It works! 

[newguy123]

As mentioned further up, this works fine, in codepen at least and I get no issues in console.

 

IF HOWEVER, I duplicate the entire thing, ie copy the code from codepen to my local dev envirment, it also works, however, GSAP is throwing an error in the console:

Any ideas?

 

EDIT: Sorry nevermind, it was a function from a previous step I left in and forgot to delete

All good now!