Problem with webflow interactions

Design help Animations & Interactions
1

Hi everyone

I’m building a custom cookie banner in Webflow using native interactions. The setup is mostly working, but I’m stuck with a strange animation problem:

What I want to achieve:

  • On first page load, the cookie banner appears at the bottom
  • When the user clicks “Accept” or “Decline”:
    • The banner should slide out to the left
    • A small cookie icon should slide in from the left (and stay sticky bottom-left)
  • When the user clicks the cookie icon:
    • The icon should slide back out
    • The banner should slide back in from the left

What works:

  • Initial state is set in the “BannerToIcon” interaction (Move X = 0% for banner, Move X = -200% for icon)
  • The transition from banner → icon works fine
  • The cookie icon appears, and clicking on it runs the second interaction (“IconToBanner”)

What doesn’t work:

  • The banner won’t move back into view in the “IconToBanner” animation
  • The icon slides out correctly
  • But the banner just stays hidden (display: none or stuck offscreen)
  • Even though I’m animating the same properties (Move X) on the banner

:magnifying_glass_tilted_left: What I’ve tried:

  • Double-checked that only “BannerToIcon” defines the initial state
  • Verified z-index and positioning (position: fixed, z-index: different for both)
  • Made sure I’m affecting the selected element and not a class

Is it possible that Webflow animations are conflicting because two interactions touch the same element? Or am I missing something obvious about re-showing a moved and hidden element?

Would love any ideas, or if someone has solved something similar! :folded_hands:

Thanks!

My Preview Link:

2

Hi there,

To ensure your banner animations work correctly, there are two key areas to focus on:

The banner wrapper must have Overflow: hidden applied in the Style panel under Size settings. When setting up animations in the Interactions panel, apply them to the popup wrapper rather than the banner element itself.

For smooth animations, use opacity, transform, or visibility properties instead of display: none in your Hide/show actions. This allows the element to properly animate when transitioning back into view.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

I got it to work by deleting and rebuilding the second animation. I think the reason was because i wanted to shortcut by duplicating the first timed animation, renaming and after that changing it.

the duplicate/copy process somehow messed it up for the transform move effect.

thanks :)

1 Like