Hi there, I’ve been tinkering with this issue for quite a while now and haven’t come up with a solution and wondered if anyone here would have the magic answer.
Basically I have a page with a chart that only appears when you enter the dark section and disappears when you exit the dark section of the page. I’ve done this using interactions. To add a little more complexity, when you get to the blue section the chart should dim to 10% opacity and when you exit the blue section it comes back to 100% opacity.
I’m having an issue when on first use, this interaction glitches. For example, if you go to my demo link and quickly scroll to the first blue area, the chart dims to 0% opacity but then flashes back to 100% opacity. After this, if you scroll in and out of the blue zone it dims perfectly, it’s only on the first go that it seems to glitch.
The name of the interaction that isn’t working properly is ‘knockout diagram’ and ‘knock-in diagram’. However, when I remove the interaction that controls the visibility of the diagram within the dark area this works fine, so I think the interaction named ‘show diagram’ and ‘hide diagram’ is conflicting with it in some way?
Here is my public share link that you can test edits: LINK
Here’s my live link to see it in action: LINK