diff --git a/assets/js/src/public.jsx b/assets/js/src/public.jsx
index 3fc8d15c5c..0ce603a87b 100644
--- a/assets/js/src/public.jsx
+++ b/assets/js/src/public.jsx
@@ -85,6 +85,10 @@ jQuery(($) => {
     const form = formDiv.find('form');
     const position = form.data('position');
     formDiv.addClass(`mailpoet_form_position_${position}`);
+    const animation = form.data('animation');
+    if (animation !== '') {
+      formDiv.addClass(`mailpoet_form_animation_${animation}`);
+    }
     const background = form.data('background-color');
     formDiv.css('background-color', background || 'white');
     let delay = form.data('delay');
diff --git a/lib/Form/DisplayFormInWPContent.php b/lib/Form/DisplayFormInWPContent.php
index a4d667e82a..3b4238229b 100644
--- a/lib/Form/DisplayFormInWPContent.php
+++ b/lib/Form/DisplayFormInWPContent.php
@@ -155,6 +155,7 @@ class DisplayFormInWPContent {
 
     $templateData['delay'] = $formSettings['form_placement'][$displayType]['delay'] ?? 0;
     $templateData['position'] = $formSettings['form_placement'][$displayType]['position'] ?? '';
+    $templateData['animation'] = $formSettings['form_placement'][$displayType]['animation'] ?? '';
     $templateData['backgroundColor'] = $formSettings['backgroundColor'] ?? '';
     $templateData['fontFamily'] = $formSettings['font_family'] ?? '';
     $templateData['enableExitIntent'] = false;
diff --git a/views/form/front_end_form.html b/views/form/front_end_form.html
index 11222b6922..249ec26b40 100644
--- a/views/form/front_end_form.html
+++ b/views/form/front_end_form.html
@@ -34,6 +34,7 @@
       novalidate
       data-delay="<%= delay %>"
       data-position="<%= position %>"
+      data-animation="<%= animation %>"
       data-exit-intent-enabled="<%= enableExitIntent %>"
       data-background-color="<%= backgroundColor %>"
       data-font-family="<%= fontFamily %>"