Hey community
I am trying to create an overlay interaction that works a bit like in this example (I mean the opening & closing animation when you click on one of the moving letters):
https://tobiasahlin.com/moving-letters/
I want to achieve this by using a CMS collection list so I can use title, text, image etc. for the teaser and the overlay.
I came to the point where the overlay opens perfectly when I click on the teaser. So far so good.
The problem now is that I want the “back”-button in the overlay to trigger the closing animation.
Since I selected the “Author Wrapper” as the trigger for the opening animation so that all children of it are affected, the trigger (Author Wrapper) fills the whole window when the overlay opens. So when the overlay is opened and I click anywhere in the overlay, the “Author Wrapper” gets triggered and the opening animation starts again.
So to prevent this I created an animation for the 2nd click on “Author Wrapper” that closes the overlay. (Thats the current state of the page)
It works fine but now I can not click on the social media icons in the overlay without triggering the closing animation of the overlay.
So there are two things I need your help to fix the problem:
- How do I get the trigger of “Author Wrapper” to deactivate when the overlay opens so that when I click anywhere in the overlay the trigger of “Author Wrapper” doesn’t start the opening animation again?
- How can I get the “Author Close Button” to close the overlay when I have to set the animations on “Only children with this class”?
Sorry for the long question 
If you need more information, feel free to ask 
Published Site: https://navigationen-animationen.webflow.io/
Project share link: https://preview.webflow.com/preview/navigationen-animationen?utm_medium=preview_link&utm_source=dashboard&utm_content=navigationen-animationen&preview=e034a6e5436b9121ac42573fe3dd7f84&mode=preview