How do I animate elements in the Superwall editor?

Context

When designing paywalls in Superwall, you might want to add animations to elements to make them more engaging. While CSS keyframe animations are not currently supported, there are alternative methods available for adding animations to your paywall elements.

Answer

There are currently two ways to add animations to elements in the Superwall editor:

1. Using Lottie animations

   • For example the "Delayed X" element uses Lottie animation

2. Using the Effects section

   • Can be used to animate value changes

   • Requires triggering through user actions (such as button presses)

   • Works in conjunction with Dynamic Values