How do I animate elements in the Superwall editor?
Context
When designing paywalls in Superwall, you might want buttons, text, banners, or product cards to move, fade, or pulse. There are a few supported ways to do this, depending on whether you need simple tap feedback, a transition between two states, or a longer decorative animation.
Answer
No. CSS @keyframes blocks are not currently supported in the paywall editor's Custom CSS fields.
The Custom CSS panel in the element properties sidebar only accepts individual CSS properties for the selected element. It is not a full stylesheet editor, so an @keyframes block will not work there.
Use the lightest option that fits the effect:
- Use the tap behavior Animation dropdown for basic press feedback like shrink, grow, or fade.
- Use Effects when an element should smoothly transition between two values, such as fading in after a state variable changes.
- Use Lottie, GIFs, or video for longer decorative animations or detailed motion graphics.
If you paste @keyframes into a Custom CSS field, the animation may be ignored and should not be treated as supported behavior.
Related docs
How is this guide?