From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 13 Jun 2024 13:34:54 +0000 (+0200)
Subject: wip #6961 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=75aae24ce04839d3a43d8f0e6c2af1399c680916;p=fluidbook-html5.git

wip #6961 @1.5
---

diff --git a/js/libs/fluidbook/fluidbook.links.animations.js b/js/libs/fluidbook/fluidbook.links.animations.js
new file mode 100644
index 00000000..758f5546
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.links.animations.js
@@ -0,0 +1,412 @@
+function FluidbookLinksAnimations(fluidbook) {
+    if (fluidbook === undefined) {
+        fluidbook = false;
+    }
+    this.fluidbook = fluidbook;
+}
+
+FluidbookLinksAnimations.prototype = {
+
+    executeAnimations(element, animations, properties, autostart, delay) {
+        let $this = this;
+        var defaults = ['ease', 'duration', 'delay'];
+        var firstDefaults = {};
+
+        if (animations === undefined || animations === null || animations.length === 0) {
+            return;
+        }
+
+        if (animations[0]["autostart"] === undefined) {
+            animations[0]["autostart"] = true;
+        }
+
+        if (animations[0]['autostart'] == '0' || animations[0]['autostart'] == 'false') {
+            animations[0]['autostart'] = false;
+        }
+
+        if (autostart && !animations[0]['autostart']) {
+            return;
+        }
+
+        $.each(defaults, function (k, v) {
+            if (animations[0][v] !== undefined) {
+                firstDefaults[v] = animations[0][v];
+            }
+        });
+
+        var override = {};
+        if (delay !== undefined) {
+            override.delay = delay;
+        }
+
+        $.each(animations, function (k, animation) {
+            $this.executeAnimation(element, $.extend({}, firstDefaults, animation, override));
+        });
+    },
+
+    executeAnimation: function (link, animation) {
+        $(link).data('animation-started', true);
+
+        link = $(link);
+        var linkElement = $(link).get(0);
+        var animatedElement = linkElement;
+        if (animation.type === undefined || animation.type === '') {
+            animation.type = 'none';
+        }
+        var defaultParams = {};
+        var globalDefault = {
+            x: 0, y: 0, yoyo: 0, repeatdelay: 0, repeat: 0, transformorigin: '50% 50%', preventflickering: 0
+        };
+
+        var w = parseFloat(link.css('width'));
+        var cx = w / 2;
+        var h = parseFloat(link.css('height'));
+        var cy = h / 2;
+        var from = {};
+        var to = {};
+        var tweenFunctions = {};
+        var duration = 0.5;
+        var usegsap = true;
+
+        animation = $.extend({}, globalDefault, defaultParams, animation);
+
+        if (animation.duration !== undefined) {
+            duration = parseFloat(animation.duration);
+        }
+
+        to.yoyo = animation.yoyo === true || animation.yoyo === 1 || animation.yoyo === '1' || animation.yoyo === 'true';
+        to.repeat = parseInt(animation.repeat);
+        to.repeatDelay = parseFloat(animation.repeatdelay);
+
+        var css = {};
+        if (animation.filter) {
+            css.filter = animation.filter;
+        }
+        if (animation.align) {
+            css.textAlign = animation.align;
+        }
+        if (animation.scale && ['scale', 'scalefrom', 'zoomin', 'zoomout'].indexOf(animation.type) === -1) {
+            if (animation.preventflickering) {
+                css.backgroundSize = '100% 100%';
+                css.backgroundPosition = animation.transformorigin;
+            } else {
+                css.transform = 'scale(' + animation.scale + ')';
+                css.transformOrigin = animation.transformorigin;
+            }
+        }
+
+        if (animation.letterspacing) {
+            css.letterspacing = parseFloat(animation.letterspacing);
+        }
+
+        animation.ease = this.fixEase(animation.ease);
+        if (animation.rotate !== undefined) {
+            animation.rotation = animation.rotate;
+        }
+        if (animation.rotation !== undefined) {
+            from.rotation = animation.rotation;
+        }
+        to.ease = animation.ease;
+
+        if (animation.delay !== undefined) {
+            to.delay = parseFloat(animation.delay);
+        }
+
+        if (animation.type === 'blurfrom') {
+            animation.type = "blur";
+            animation.from = 1;
+        }
+
+        if (animation.type === 'blur') {
+            let b = 'blur(' + animation.blur + 'px)';
+            let zero = 'blur(0px)';
+            if (css.filter === undefined) {
+                css.filter = '';
+            }
+
+            if (animation.from) {
+                css.filter += ' ' + b;
+                to.filter = zero;
+            } else {
+                css.filter = ' ' + b;
+                to.filter = b;
+            }
+        } else if (animation.type === 'scalefrom') {
+            to.display = 'block';
+            to.visibility = 'visible';
+
+            from.scale = animation.scale;
+            to.scale = 1;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'scale') {
+            to.display = 'block';
+            to.visibility = 'visible';
+
+            from.scale = 1;
+            to.scale = animation.scale;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'rotate') {
+            to.display = 'block';
+            to.visibility = 'visible';
+            from.rotation = 0;
+            to.rotation = animation.rotation;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'rotatefrom') {
+            to.display = 'block';
+            to.visibility = 'visible';
+            to.rotation = 0;
+            from.rotation = animation.rotation;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+        } else if (animation.type === 'translatefrom') {
+            from.display = 'none';
+            to.display = 'block';
+            to.visibility = 'visible';
+
+            from.x = animation.x;
+            from.y = animation.y;
+
+            to.x = 0;
+            to.y = 0;
+        } else if (animation.type === 'translate') {
+            from.display = 'none';
+            to.display = 'block';
+            to.visibility = 'visible';
+            from.x = 0;
+            from.y = 0;
+            to.x = animation.x;
+            to.y = animation.y;
+
+        } else if (animation.type === 'zoomin' || animation.type === 'zoomout') {
+            to.display = 'block';
+            to.visibility = 'visible';
+            animatedElement = $(linkElement).find('img,div.img');
+            from.scale = animation.type === 'zoomin' ? 1 : animation.scale;
+            to.scale = animation.type === 'zoomout' ? 1 : animation.scale;
+            from.transformOrigin = to.transformOrigin = animation.transformorigin;
+            if (animation.preventflickering == 1) {
+                from.backgroundSize = from.scale * 100 + '% ' + from.scale * 100 + '%';
+                to.backgroundSize = to.scale * 100 + '% ' + to.scale * 100 + '%';
+                from.backgroundPosition = animation.transformorigin;
+                to.transformOrigin = from.transformOrigin = '50% 50%';
+                to.scale = from.scale = 1;
+            }
+        } else if (animation.type === 'fadein') {
+            from.display = 'none';
+            to.display = 'block';
+            to.visibility = 'visible';
+            from.opacity = 0;
+            to.opacity = 1;
+        } else if (animation.type === 'fadeout') {
+            from.opacity = 1;
+            to.opacity = 0;
+        } else if (animation.type === "unmask" || animation.type === 'reveal') {
+            if (animation.type === 'reveal') {
+                from.display = 'none';
+                to.display = 'block';
+                to.visibility = 'visible';
+            }
+
+            var top = 0;
+            var right = w;
+            var bottom = h;
+            var left = 0;
+
+            var rectinit = 'rect(0px,' + w + 'px,' + h + 'px,0px)';
+            if ((animation.direction === 'left' && animation.type === 'unmask') || (animation.direction === 'right' && animation.type === 'reveal')) {
+                right = 0;
+            } else if ((animation.direction === 'right' && animation.type === 'unmask') || (animation.direction === 'left' && animation.type === 'reveal')) {
+                left = w;
+            } else if ((animation.direction === 'up' && animation.type === 'unmask') || (animation.direction === 'down' && animation.type === 'reveal')) {
+                bottom = 0;
+            } else if ((animation.direction === 'down' && animation.type === 'unmask') || (animation.direction === 'up' && animation.type === 'reveal')) {
+                top = h;
+            }
+            var rect = 'rect(' + top + 'px,' + right + 'px,' + bottom + 'px,' + left + 'px)';
+
+            if (animation.type === 'unmask') {
+                to.clip = rect;
+                from.clip = rectinit;
+            } else if (animation.type === 'reveal') {
+                to.clip = rectinit;
+                from.clip = rect;
+            }
+        } else if (animation.type === 'pie') {
+            defaultParams = {
+                startangle: '0', direction: 'clockwise', size: 'outside', innerradius: '0', hideonstart: '0'
+            };
+            animation = $.extend({}, globalDefault, defaultParams, animation);
+            animation.startangle = parseFloat(animation.startangle);
+            animation.innerradius = parseFloat(animation.innerradius);
+            if (animation.direction === 'clockwise') {
+                from.angle = animation.startangle + 720;
+            } else {
+                from.angle = animation.startangle;
+            }
+            linkElement.angle = from.angle;
+
+            var radius;
+            if (animation.size === 'outside') {
+                // Calcul hypotenuse
+                radius = Math.sqrt((cx * cx) + (cy * cy));
+            } else {
+                radius = Math.min(w, h) / 2;
+            }
+            var sector = function (paper, cx, cy, r, pct, startAngle, endAngle, params) {
+                if (animation.direction === 'clockwise') {
+                    var sa = startAngle;
+                    startAngle = endAngle;
+                    endAngle = sa;
+                }
+                // init radian
+                var rad = Math.PI / 180;
+                // first circle (bigger)
+                var x1 = cx + r * Math.cos(-startAngle * rad), x2 = cx + r * Math.cos(-endAngle * rad),
+                    y1 = cy + r * Math.sin(-startAngle * rad), y2 = cy + r * Math.sin(-endAngle * rad);
+
+                // second circle / donut section
+                var r1 = r * pct;
+                var x3 = cx + r1 * Math.cos(-endAngle * rad), y3 = cy + r1 * Math.sin(-endAngle * rad),
+                    x4 = cx + r1 * Math.cos(-startAngle * rad), y4 = cy + r1 * Math.sin(-startAngle * rad);
+
+                var long = +(endAngle - startAngle > 180);
+                return paper.path(["M", x4, y4, "L", x1, y1, "A", r, r, 0, long, 0, x2, y2, "L", x3, y3, "A", r1, r1, 0, long, 1, x4, y4, "z"]).attr(params);
+            }
+            var paper = new Raphael(link.attr('id'), w, h);
+            var bgc = link.attr('data-color');
+            to.angle = animation.startangle + 360;
+            if (animation.hideonstart == '1') {
+                to.onStart = function () {
+                    link.css('background-color', "transparent");
+                };
+            }
+            to.onUpdate = function () {
+                paper.clear();
+                if (Math.abs(linkElement.angle - from.angle) < 2) {
+                    return;
+                }
+                if (animation.backgroundcolor !== null && animation.backgroundcolor !== undefined) {
+                    let circle = paper.circle(cx, cy, radius - 2);
+                    circle.attr("fill", animation.backgroundcolor);
+                }
+                sector(paper, cx, cy, radius, animation.innerradius, linkElement.angle, to.angle, {
+                    fill: bgc, stroke: 'none'
+                });
+                link.css('background-color', "transparent");
+            };
+        } else if (animation.type === 'number') {
+            usegsap = false;
+            defaultParams = {
+                startvalue: '0',
+                decimalseparator: '.',
+                decimaldigitnumber: '0',
+                separator: ' ',
+                letterspacing: '0',
+                prefix: '',
+                suffix: '',
+            };
+            animation = $.extend({}, globalDefault, defaultParams, animation);
+            animation.startvalue = parseFloat(animation.startvalue.replace(/,/, '.'));
+            animation.decimaldigitnumber = parseInt(animation.decimaldigitnumber);
+            animation.letterspacing = parseFloat(animation.letterspacing);
+
+            var ease = gsap.parseEase(to.ease);
+            var options = {
+                duration: duration,
+                useEasing: true,
+                useGrouping: true,
+                separator: animation.separator,
+                decimalPlaces: animation.decimaldigitnumber,
+                decimal: animation.decimalseparator,
+                prefix: animation.prefix,
+                suffix: animation.suffix,
+                startVal: animation.startvalue,
+                easingFn: function (t, b, c, d) {
+                    return b + ease(Math.min(1, Math.max(0, t / d))) * c;
+                }
+            };
+
+            css['opacity'] = 0;
+
+            let value;
+            if ($(link).data('anim-numeric-value') === null || $(link).data('anim-numeric-value') === undefined) {
+                value = parseFloat(link.text().replace(/,/, '.'));
+                $(link).data('anim-numeric-value', value);
+            } else {
+                value = $(link).data('anim-numeric-value');
+            }
+            link.text('');
+            var countup = new CountUp(link.attr('id'), value, options);
+            setTimeout(function () {
+                link.css('opacity', 1);
+                countup.start();
+            }, to.delay * 1000);
+        } else if (animation.type === 'draggable') {
+            this.fluidbook.hasDraggableOnPage(true);
+            $(link).css('pointer-events', 'auto');
+            var $this = this;
+            var draggable = new Draggable(link, {
+                inertia: true, type: 'x', onDragStart: function () {
+                    $this.fluidbook.touch.draggingFromOutside = true;
+                }, onRelease: function () {
+                    var d = this;
+                    setTimeout(function () {
+                        $this.fluidbook.touch.draggingFromOutside = false;
+                    }, 250);
+
+                    if (animation.drop === 'clickhide') {
+                        $('#links .link a').each(function () {
+                            if (d.hitTest(this)) {
+                                var e = this;
+                                setTimeout(function () {
+                                    $(e).click();
+                                }, 500);
+
+                                gsap.to($(link), {duration: 0.5, autoAlpha: 0});
+                                return true;
+                            }
+                        });
+                    }
+
+                }
+            });
+        } else {
+            usegsap = false;
+        }
+
+        link.css(css);
+        if (from.display !== undefined && from.display !== 'none') {
+            link.show();
+        }
+        if (from.display !== undefined && from.display === 'none') {
+            link.hide();
+        }
+        if (usegsap) {
+            to.duration = duration;
+            let anim = gsap.fromTo(animatedElement, from, to);
+
+            let anims = [];
+            if ($(link).data('gsap') !== undefined) {
+                anims = $(link).data('gsap');
+            }
+            anims.push(anim);
+            $(link).data('gsap', anims);
+        }
+
+        if (this.fluidbook !== null) {
+            this.fluidbook.networkControl.pause((to.delay + duration + 0.5) * 1000);
+        }
+    },
+
+    fixEase: function (ease) {
+        if (ease === undefined) {
+            ease = "power1.out";
+        }
+        ease = ease.toLowerCase();
+        if (ease.indexOf('linear') === 0 || ease.indexOf('power0') === 0) {
+            ease = 'none';
+        }
+        ease = ease.replace('.ease', '.');
+        ease = ease.replace('inout', 'inOut');
+        return ease;
+    },
+}
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 1de76474..3af9114b 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -24,6 +24,7 @@ function FluidbookLinks(fluidbook) {
 
     }
     this.lowdef = false;
+    this.animations = new FluidbookLinksAnimations(fluidbook);
     this.init();
 }
 
@@ -163,7 +164,6 @@ FluidbookLinks.prototype = {
             $this.resize();
         });
 
-
         $(document).on(this.fluidbook.input.clickEvent, 'a, [data-pseudolink-href]', function () {
             if ($(this).is('#wopen')) {
                 return true;
@@ -791,407 +791,7 @@ FluidbookLinks.prototype = {
             autostart = false;
         }
         var animations = $(link).data('animations');
-        var $this = this;
-
-        var defaults = ['ease', 'duration', 'delay'];
-        var firstDefaults = {};
-
-        if (animations === undefined || animations === null || animations.length === 0) {
-            return;
-        }
-        if (animations[0]["autostart"] === undefined) {
-            animations[0]["autostart"] = true;
-        }
-        if (animations[0]['autostart'] == '0' || animations[0]['autostart'] == 'false') {
-            animations[0]['autostart'] = false;
-        }
-
-
-        if (autostart && !animations[0]['autostart']) {
-            return;
-        }
-
-        $.each(defaults, function (k, v) {
-            if (animations[0][v] !== undefined) {
-                firstDefaults[v] = animations[0][v];
-            }
-        });
-
-        var override = {};
-        if (delay !== undefined) {
-            override.delay = delay;
-        }
-
-        $.each(animations, function (k, animation) {
-            $this.executeAnimation(link, $.extend({}, firstDefaults, animation, override));
-        });
-    },
-
-    executeAnimation: function (link, animation) {
-        $(link).data('animation-started', true);
-
-        link = $(link);
-        var linkElement = $(link).get(0);
-        var animatedElement = linkElement;
-        if (animation.type === undefined || animation.type === '') {
-            animation.type = 'none';
-        }
-        var defaultParams = {};
-        var globalDefault = {
-            x: 0, y: 0, yoyo: 0, repeatdelay: 0, repeat: 0, transformorigin: '50% 50%', preventflickering: 0
-        };
-
-        if ($(linkElement).hasClass('textLink')) {
-            globalDefault.transformorigin = '0 100%';
-        }
-        var w = parseFloat(link.css('width'));
-        var cx = w / 2;
-        var h = parseFloat(link.css('height'));
-        var cy = h / 2;
-        var from = {};
-        var to = {};
-        var tweenFunctions = {};
-        var duration = 0.5;
-        var usegsap = true;
-
-        animation = $.extend({}, globalDefault, defaultParams, animation);
-
-        if (animation.duration !== undefined) {
-            duration = parseFloat(animation.duration);
-        }
-
-        to.yoyo = animation.yoyo === true || animation.yoyo === 1 || animation.yoyo === '1' || animation.yoyo === 'true';
-        to.repeat = parseInt(animation.repeat);
-        to.repeatDelay = parseFloat(animation.repeatdelay);
-
-        var css = {};
-        if (animation.filter) {
-            css.filter = animation.filter;
-        }
-        if (animation.align) {
-            css.textAlign = animation.align;
-        }
-        if (animation.scale && ['scale', 'scalefrom', 'zoomin', 'zoomout'].indexOf(animation.type) === -1) {
-            if (animation.preventflickering) {
-                css.backgroundSize = '100% 100%';
-                css.backgroundPosition = animation.transformorigin;
-            } else {
-                css.transform = 'scale(' + animation.scale + ')';
-                css.transformOrigin = animation.transformorigin;
-            }
-        }
-
-        if (animation.letterspacing) {
-            css.letterspacing = parseFloat(animation.letterspacing);
-        }
-
-        animation.ease = this.fixEase(animation.ease);
-        if (animation.rotate !== undefined) {
-            animation.rotation = animation.rotate;
-        }
-        if (animation.rotation !== undefined) {
-            from.rotation = animation.rotation;
-        }
-        to.ease = animation.ease;
-
-        if (animation.delay !== undefined) {
-            to.delay = parseFloat(animation.delay);
-        }
-
-        if (animation.type === 'blurfrom') {
-            animation.type = "blur";
-            animation.from = 1;
-        }
-
-        if (animation.type === 'blur') {
-            let b = 'blur(' + animation.blur + 'px)';
-            let zero = 'blur(0px)';
-            if (css.filter === undefined) {
-                css.filter = '';
-            }
-
-            if (animation.from) {
-                css.filter += ' ' + b;
-                to.filter = zero;
-            } else {
-                css.filter = ' ' + b;
-                to.filter = b;
-            }
-        } else if (animation.type === 'scalefrom') {
-            to.display = 'block';
-            to.visibility = 'visible';
-
-            from.scale = animation.scale;
-            to.scale = 1;
-            from.transformOrigin = to.transformOrigin = animation.transformorigin;
-        } else if (animation.type === 'scale') {
-            to.display = 'block';
-            to.visibility = 'visible';
-
-            from.scale = 1;
-            to.scale = animation.scale;
-            from.transformOrigin = to.transformOrigin = animation.transformorigin;
-        } else if (animation.type === 'rotate') {
-            to.display = 'block';
-            to.visibility = 'visible';
-            from.rotation = 0;
-            to.rotation = animation.rotation;
-            from.transformOrigin = to.transformOrigin = animation.transformorigin;
-        } else if (animation.type === 'rotatefrom') {
-            to.display = 'block';
-            to.visibility = 'visible';
-            to.rotation = 0;
-            from.rotation = animation.rotation;
-            from.transformOrigin = to.transformOrigin = animation.transformorigin;
-        } else if (animation.type === 'translatefrom') {
-            from.display = 'none';
-            to.display = 'block';
-            to.visibility = 'visible';
-
-            from.x = animation.x;
-            from.y = animation.y;
-
-            to.x = 0;
-            to.y = 0;
-        } else if (animation.type === 'translate') {
-            from.display = 'none';
-            to.display = 'block';
-            to.visibility = 'visible';
-            from.x = 0;
-            from.y = 0;
-            to.x = animation.x;
-            to.y = animation.y;
-
-        } else if (animation.type === 'zoomin' || animation.type === 'zoomout') {
-            to.display = 'block';
-            to.visibility = 'visible';
-            animatedElement = $(linkElement).find('img,div.img');
-            from.scale = animation.type === 'zoomin' ? 1 : animation.scale;
-            to.scale = animation.type === 'zoomout' ? 1 : animation.scale;
-            from.transformOrigin = to.transformOrigin = animation.transformorigin;
-            if (animation.preventflickering == 1) {
-                from.backgroundSize = from.scale * 100 + '% ' + from.scale * 100 + '%';
-                to.backgroundSize = to.scale * 100 + '% ' + to.scale * 100 + '%';
-                from.backgroundPosition = animation.transformorigin;
-                to.transformOrigin = from.transformOrigin = '50% 50%';
-                to.scale = from.scale = 1;
-            }
-        } else if (animation.type === 'fadein') {
-            from.display = 'none';
-            to.display = 'block';
-            to.visibility = 'visible';
-            from.opacity = 0;
-            to.opacity = 1;
-        } else if (animation.type === 'fadeout') {
-            from.opacity = 1;
-            to.opacity = 0;
-        } else if (animation.type === "unmask" || animation.type === 'reveal') {
-            if (animation.type === 'reveal') {
-                from.display = 'none';
-                to.display = 'block';
-                to.visibility = 'visible';
-            }
-
-            var top = 0;
-            var right = w;
-            var bottom = h;
-            var left = 0;
-
-            var rectinit = 'rect(0px,' + w + 'px,' + h + 'px,0px)';
-            if ((animation.direction === 'left' && animation.type === 'unmask') || (animation.direction === 'right' && animation.type === 'reveal')) {
-                right = 0;
-            } else if ((animation.direction === 'right' && animation.type === 'unmask') || (animation.direction === 'left' && animation.type === 'reveal')) {
-                left = w;
-            } else if ((animation.direction === 'up' && animation.type === 'unmask') || (animation.direction === 'down' && animation.type === 'reveal')) {
-                bottom = 0;
-            } else if ((animation.direction === 'down' && animation.type === 'unmask') || (animation.direction === 'up' && animation.type === 'reveal')) {
-                top = h;
-            }
-            var rect = 'rect(' + top + 'px,' + right + 'px,' + bottom + 'px,' + left + 'px)';
-
-            if (animation.type === 'unmask') {
-                to.clip = rect;
-                from.clip = rectinit;
-            } else if (animation.type === 'reveal') {
-                to.clip = rectinit;
-                from.clip = rect;
-            }
-        } else if (animation.type === 'pie') {
-            defaultParams = {
-                startangle: '0', direction: 'clockwise', size: 'outside', innerradius: '0', hideonstart: '0'
-            };
-            animation = $.extend({}, globalDefault, defaultParams, animation);
-            animation.startangle = parseFloat(animation.startangle);
-            animation.innerradius = parseFloat(animation.innerradius);
-            if (animation.direction === 'clockwise') {
-                from.angle = animation.startangle + 720;
-            } else {
-                from.angle = animation.startangle;
-            }
-            linkElement.angle = from.angle;
-
-            var radius;
-            if (animation.size === 'outside') {
-                // Calcul hypotenuse
-                radius = Math.sqrt((cx * cx) + (cy * cy));
-            } else {
-                radius = Math.min(w, h) / 2;
-            }
-            var sector = function (paper, cx, cy, r, pct, startAngle, endAngle, params) {
-                if (animation.direction === 'clockwise') {
-                    var sa = startAngle;
-                    startAngle = endAngle;
-                    endAngle = sa;
-                }
-                // init radian
-                var rad = Math.PI / 180;
-                // first circle (bigger)
-                var x1 = cx + r * Math.cos(-startAngle * rad), x2 = cx + r * Math.cos(-endAngle * rad),
-                    y1 = cy + r * Math.sin(-startAngle * rad), y2 = cy + r * Math.sin(-endAngle * rad);
-
-                // second circle / donut section
-                var r1 = r * pct;
-                var x3 = cx + r1 * Math.cos(-endAngle * rad), y3 = cy + r1 * Math.sin(-endAngle * rad),
-                    x4 = cx + r1 * Math.cos(-startAngle * rad), y4 = cy + r1 * Math.sin(-startAngle * rad);
-
-                var long = +(endAngle - startAngle > 180);
-                return paper.path(["M", x4, y4, "L", x1, y1, "A", r, r, 0, long, 0, x2, y2, "L", x3, y3, "A", r1, r1, 0, long, 1, x4, y4, "z"]).attr(params);
-            }
-            var paper = new Raphael(link.attr('id'), w, h);
-            var bgc = link.attr('data-color');
-            to.angle = animation.startangle + 360;
-            if (animation.hideonstart == '1') {
-                to.onStart = function () {
-                    link.css('background-color', "transparent");
-                };
-            }
-            to.onUpdate = function () {
-                paper.clear();
-                if (Math.abs(linkElement.angle - from.angle) < 2) {
-                    return;
-                }
-                if (animation.backgroundcolor !== null && animation.backgroundcolor !== undefined) {
-                    let circle = paper.circle(cx, cy, radius - 2);
-                    circle.attr("fill", animation.backgroundcolor);
-                }
-                sector(paper, cx, cy, radius, animation.innerradius, linkElement.angle, to.angle, {
-                    fill: bgc, stroke: 'none'
-                });
-                link.css('background-color', "transparent");
-            };
-        } else if (animation.type === 'number') {
-            usegsap = false;
-            defaultParams = {
-                startvalue: '0',
-                decimalseparator: '.',
-                decimaldigitnumber: '0',
-                separator: ' ',
-                letterspacing: '0',
-                prefix: '',
-                suffix: '',
-            };
-            animation = $.extend({}, globalDefault, defaultParams, animation);
-            animation.startvalue = parseFloat(animation.startvalue.replace(/,/, '.'));
-            animation.decimaldigitnumber = parseInt(animation.decimaldigitnumber);
-            animation.letterspacing = parseFloat(animation.letterspacing);
-
-            var ease = gsap.parseEase(to.ease);
-            var options = {
-                duration: duration,
-                useEasing: true,
-                useGrouping: true,
-                separator: animation.separator,
-                decimalPlaces: animation.decimaldigitnumber,
-                decimal: animation.decimalseparator,
-                prefix: animation.prefix,
-                suffix: animation.suffix,
-                startVal: animation.startvalue,
-                easingFn: function (t, b, c, d) {
-                    return b + ease(Math.min(1, Math.max(0, t / d))) * c;
-                }
-            };
-
-            css['opacity'] = 0;
-
-            let value;
-            if ($(link).data('anim-numeric-value') === null || $(link).data('anim-numeric-value') === undefined) {
-                value = parseFloat(link.text().replace(/,/, '.'));
-                $(link).data('anim-numeric-value', value);
-            } else {
-                value = $(link).data('anim-numeric-value');
-            }
-            link.text('');
-            var countup = new CountUp(link.attr('id'), value, options);
-            setTimeout(function () {
-                link.css('opacity', 1);
-                countup.start();
-            }, to.delay * 1000);
-        } else if (animation.type === 'draggable') {
-            this.fluidbook.hasDraggableOnPage(true);
-            $(link).css('pointer-events', 'auto');
-            var $this = this;
-            var draggable = new Draggable(link, {
-                inertia: true, type: 'x', onDragStart: function () {
-                    $this.fluidbook.touch.draggingFromOutside = true;
-                }, onRelease: function () {
-                    var d = this;
-                    setTimeout(function () {
-                        $this.fluidbook.touch.draggingFromOutside = false;
-                    }, 250);
-
-                    if (animation.drop === 'clickhide') {
-                        $('#links .link a').each(function () {
-                            if (d.hitTest(this)) {
-                                var e = this;
-                                setTimeout(function () {
-                                    $(e).click();
-                                }, 500);
-
-                                gsap.to($(link), {duration: 0.5, autoAlpha: 0});
-                                return true;
-                            }
-                        });
-                    }
-
-                }
-            });
-        } else {
-            usegsap = false;
-        }
-
-        link.css(css);
-        if (from.display !== undefined && from.display !== 'none') {
-            link.show();
-        }
-        if (from.display !== undefined && from.display === 'none') {
-            link.hide();
-        }
-        if (usegsap) {
-            to.duration = duration;
-            let anim = gsap.fromTo(animatedElement, from, to);
-
-            let anims = [];
-            if ($(link).data('gsap') !== undefined) {
-                anims = $(link).data('gsap');
-            }
-            anims.push(anim);
-            $(link).data('gsap', anims);
-        }
-
-        this.fluidbook.networkControl.pause((to.delay + duration + 0.5) * 1000);
-    },
-
-    fixEase: function (ease) {
-        if (ease === undefined) {
-            ease = "power1.out";
-        }
-        ease = ease.toLowerCase();
-        if (ease.indexOf('linear') === 0 || ease.indexOf('power0') === 0) {
-            ease = 'none';
-        }
-        ease = ease.replace('.ease', '.');
-        ease = ease.replace('inout', 'inOut');
-        return ease;
+        this.animations.executeAnimations(link, animations, autostart, delay);
     },
 
     getLinkDataById: function (uid) {