Symbol cannot trigger animation when nested within div

Design help Animations & Interactions
1

I’m so lost. I’ll give you cookies if you help me.

I have a link, within a symbol, that when clicked, fades everything out. This works.

I have another link, within a symbol, also within a div, that when clicked, should fade everything out but does not.

problem
problem2486×1216 124 KB

It being nested in a div is definitely part of the problem because when I nest the working symbol within a div, it stops working.

Here’s the published page
(back button on top left successfully fades content out. Work, talk, play links at bottom of page don’t)

Here’s the read-only project!
(hope this helps in diagnosing the problem!)

2

Hey @Preet_Dalal

I was trying to figure out what’s not working for you, but on a published site it all seems to be working…

3

I’m glad it doesn’t look odd, but I’m 100% sure it’s still not working.

The back button is how the behavior should look. The content fades out and then the new content fades in.

The work, talk, play links at the bottom of the page do not work. The content does not fade out even though the new content still fades in.

4

Still not sure what you mean… when I click it, the page fades out and I am taken back to the top of the page… but thats because the links point to the same page… maybe if you want it to go to a different page you should change where the links point to…

5

Hmmm … I tried on multiple browsers as well as my mobile device, and the page does not fade out.

Here’s a video

See how it pauses for a moment, jerkily flashes to the bg color, and then the next content fades in? Does it not do that for you?

(Btw, thanks so much for giving this some of your time and energy. Really appreciate it)