Hi there everyone! Glad to be able to post my first topic discussion.
I’m finishing up some interactions on some drop down cards. Everything works great except during the Second Click/Closing Animation. I have an interaction for the closing tap targeting the size of my card wrapper back to a specific height. The weird part is that everything below that element temporarily disappears from the page, and then the interaction starts.
Closing Tap Settings:
Height: 6rem
Duration: 1.3 seconds
Easing: In Out Quad
Delay: 0 seconds
Hi there,
When elements disappear during closing animations, it’s typically caused by overflow settings restricting the visibility of animated content. Parent containers can clip their children when they move outside their boundaries during animations.
To resolve this:
- Locate the immediate parent div block of your animated elements
- Set its overflow property to “visible”
- Find the next parent container up (usually a section or container)
- Set that container’s overflow to “hidden”
This combination allows your animations to display properly while still maintaining overall layout control. The inner container’s “visible” setting ensures animated elements remain visible during movement, while the outer container’s “hidden” setting prevents any unwanted scrollbars or layout issues.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
