In the case studies tabs (bottom of the page) I made a simple interaction where you can click on any of the CMS items and an overlay will be displayed. In this overlay there is an exit button which has a “hide” interaction programmed.
However, this exit/hide interaction only works to close the overlays from the 3x3 grid of smaller case studies, not the larger, featured case study.
To see what I’m talking about:
- Go into preview mode
- Click on one of the smaller case studies (i.e. “Dexalot”) to open the overlay
- Click the exit icon and see that it hides the overlay
- Now click on the “Red Bull: BC ONE” case study and then try to exit out to see that it doesn’t work.
I’ve tried changing the target of the exit animation to target the specific canva-overlay element for the featured case study, the parent element of the canva-exit element, I’ve made sure that I’m able to click on the exit icon in DevTools and it confirms that I can.
I cannot figure out why two identical interactions, nested identical structures are behaving differently!