diff --git a/addons/website/static/src/js/content/website_root.js b/addons/website/static/src/js/content/website_root.js
index 336ea822902..29163838f7a 100644
--- a/addons/website/static/src/js/content/website_root.js
+++ b/addons/website/static/src/js/content/website_root.js
@@ -137,27 +137,22 @@ var WebsiteRoot = BodyManager.extend({
      */
     _startAnimations: function (editableMode, $from) {
         var self = this;
+
         editableMode = editableMode || false;
         if ($from === undefined) {
             $from = this.$('#wrapwrap');
         }
+
+        this._stopAnimations($from);
+
         var defs = _.map(sAnimation.registry, function (Animation, animationName) {
             var selector = Animation.prototype.selector || '';
             var $target = $from.find(selector).addBack(selector);
 
             var defs = _.map($target, function (el) {
-                var $snippet = $(el);
-                var animationIndex = _.findIndex(self.animations, function (animation) {
-                    return animation.__name === animationName && $snippet[0] === animation.el;
-                });
-                if (animationIndex >= 0) {
-                    self.animations[animationIndex].destroy();
-                    self.animations.splice(animationIndex, 1);
-                }
                 var animation = new Animation(self, editableMode);
-                animation.__name = animationName;
                 self.animations.push(animation);
-                return animation.attachTo($snippet);
+                return animation.attachTo($(el));
             });
             return $.when.apply($, defs);
         });
@@ -168,12 +163,15 @@ var WebsiteRoot = BodyManager.extend({
      * in edition mode for example.
      *
      * @private
-     * @param {jQuery} [$stopTarget]
-     *        only stop the animations linked to the given element(s)
+     * @param {jQuery} [$from]
+     *        only stop the animations linked to the given element(s) or one of
+     *        its descendants
      */
-    _stopAnimations: function ($stopTarget) {
+    _stopAnimations: function ($from) {
         var removedAnimations = _.map(this.animations, function (animation) {
-            if (!$stopTarget || $stopTarget.filter(animation.el).length) {
+            if (!$from
+             || $from.filter(animation.el).length
+             || $from.find(animation.el).length) {
                 animation.destroy();
                 return animation;
             }
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index a53c402dbb1..5a6d569ae89 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -9,6 +9,26 @@ var options = require('web_editor.snippets.options');
 var _t = core._t;
 var qweb = core.qweb;
 
+options.Class.include({
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Refreshes all animations related to the given element.
+     *
+     * @private
+     * @param {jQuery} [$el=this.$target]
+     */
+    _refreshAnimations: function ($el) {
+        this.trigger_up('animation_start_demand', {
+            editableMode: true,
+            $target: $el || this.$target,
+        });
+    },
+});
+
 options.registry.menu_data = options.Class.extend({
     xmlDependencies: ['/website/static/src/xml/website.editor.xml'],
 
@@ -412,8 +432,10 @@ options.registry.parallax = options.Class.extend({
      * @override
      */
     start: function () {
-        this._refresh_callback = this._refresh.bind(this);
-        this.$target.on('snippet-option-change snippet-option-preview', this._refresh_callback);
+        var self = this;
+        this.$target.on('snippet-option-change snippet-option-preview', function () {
+            self._refreshAnimations();
+        });
         return this._super.apply(this, arguments);
     },
     /**
@@ -425,13 +447,17 @@ options.registry.parallax = options.Class.extend({
             name: 'target',
             data: this.$target.find('> .s_parallax_bg'),
         });
-        this._refresh();
+        // Refresh the parallax animation on focus; at least useful because
+        // there may have been changes in the page that influenced the parallax
+        // rendering (new snippets, ...).
+        // TODO make this automatic.
+        this._refreshAnimations();
     },
     /**
      * @override
      */
     onMove: function () {
-        this._refresh();
+        this._refreshAnimations();
     },
 
     //--------------------------------------------------------------------------
@@ -445,27 +471,13 @@ options.registry.parallax = options.Class.extend({
      */
     scroll: function (previewMode, value) {
         this.$target.attr('data-scroll-background-ratio', value);
-        this._refresh();
+        this._refreshAnimations();
     },
 
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * Notifies the parallax animation that it needs to be reinitialized.
-     *
-     * @private
-     */
-    _refresh: function () {
-        var self = this;
-        _.defer(function () {
-            self.trigger_up('animation_start_demand', {
-                editableMode: true,
-                $target: self.$target,
-            });
-        });
-    },
     /**
      * @override
      */
@@ -667,10 +679,7 @@ options.registry.facebookPage = options.Class.extend({
             $el.attr('data-' + key, value);
             $el.data(key, value);
         });
-        self.trigger_up('animation_start_demand', {
-            editableMode: true,
-            $target: $el,
-        });
+        self._refreshAnimations($el);
     },
 });
 
@@ -729,10 +738,7 @@ options.registry.ul = options.Class.extend({
         this.$target.find('li:has(.o_ul_toggle_self, .o_ul_toggle_next), li:has(>ul,>ol):not(:has(>li))').css('list-style', 'none');
 
         this.$target.find('li:not(:has(>ul))').css('list-style', '');
-        this.trigger_up('animation_start_demand', {
-            editableMode: true,
-            $target: this.$target,
-        });
+        this._refreshAnimations();
     },
 });
 
@@ -1039,10 +1045,7 @@ options.registry.gallery = options.Class.extend({
         // Apply layout animation
         this.$target.off('slide.bs.carousel').off('slid.bs.carousel');
         this.$('li.fa').off('click');
-        this.trigger_up('animation_start_demand', {
-            editableMode: true,
-            $target: this.$target,
-        });
+        this._refreshAnimations();
     },
     /**
      * Allows to change the style of the individual images.