This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Leon Kosters
Posted Oct 05 - Read on Facebook

Hello people,

I have a question about an animation. I've added states and events to open and close search & filter space. The open (search icon) and close buttons are on the same place. When I open the Search & filter space, the search button disappears by changing opacity. But it's still in front of the close button. I've made the close button 'clickable' by adding 'visible: false' to the search button state, what works. You can click on close. But now the animation of the Search button has a big delay, because visible is getting back to true what takes a while.

My question: Does someone has a better solution? Maybe placeBehind adding to the state? But how?

Framer file:


Benjamin Den Boer

Hiya Leon Kosters, ah, I see. You can use a couple of properties here: visible, ignoreEvents or indeed play with hierarchy. All valid approaches — but the delay is caused by adding it to the state directly, since it waits until the state is finished switching. To fix the longer delay of the search icon, I'd try this, which makes the switch faster:

openSearch.onClick ->
____openSearch.visible = false

closeSearch.onClick ->
____openSearch.visible = true

Leon Kosters

Aah, ofcourse.. thanks Benjamin Den Boer, it's working! :D

Read the entire post on Facebook