update 25-03-2023

demo-mevabe-2/js/slickanimation.js

@@ -0,0 +1,229 @@
+/*
+ slick-animation.js
+ Version: 0.3.3 Beta
+ Author: Marvin Hübner
+ Docs: https://github.com/marvinhuebner/slick-animation
+ Repo: https://github.com/marvinhuebner/slick-animation
+ */
+
+(function ($) {
+    $.fn.slickAnimation = function () {
+        var currentSlickSlider = $(this);
+
+        var slickItems = currentSlickSlider.find('.slick-list .slick-track > div');
+        var firstSlickItem = currentSlickSlider.find('[data-slick-index="0"]');
+
+        var animatedClass = 'animated';
+        var visible = {opacity: '1'};
+        var hidden = {opacity: '0'};
+
+        /**
+         * function for setting animationIn and animationOut class
+         * @param obj
+         * @param type
+         * @param animationIn
+         * @param animatedClass
+         * @param visibility
+         */
+
+        function slickSetAnimationDefault(obj, type, animationIn, animatedClass, visibility) {
+            visibility = typeof visibility !== 'undefined' ? visibility : false;
+
+            slickRemoveAnimation(obj, 'delay');
+            slickRemoveAnimation(obj, 'duration');
+
+            if (type['opacity'] == 1) {
+                obj.addClass(animationIn);
+                obj.addClass(animatedClass);
+            } else {
+                obj.removeClass(animationIn);
+                obj.removeClass(animatedClass);
+            }
+
+            if (visibility) obj.css(type);
+        }
+
+        /**
+         * get timeout when delay, duration, delay and duration is set
+         * @param delayIn
+         * @param durationIn
+         * @returns {number}
+         */
+
+        function getTimeout(delayIn, durationIn) {
+            if (delayIn) {
+                return delayIn * 1000 + 1000;
+
+            } else if (durationIn) {
+                return durationIn * 1000;
+
+            } else if ((delayIn) || (durationIn)) {
+                return (delayIn * 1000) + (durationIn * 1000);
+            }
+            return 1000;
+        }
+
+        /**
+         * add css animations for delay and duration
+         * @param obj
+         * @param animation
+         * @param value
+         */
+        function slickAddAnimation(obj, animation, value) {
+            var delayInAttr = [
+                'animation-' + animation,
+                '-webkit-animation-' + animation,
+                '-moz-animation-' + animation,
+                '-o-animation-' + animation,
+                '-ms-animation-' + animation
+            ];
+            var delayInAttributes = {};
+            delayInAttr.forEach(function (entry) {
+
+                delayInAttributes[entry] = value + 's';
+            });
+            obj.css(delayInAttributes);
+        }
+
+        /**
+         * remove css animations for delay and duration
+         * @param obj
+         * @param animation
+         */
+        function slickRemoveAnimation(obj, animation) {
+            var delayInAttr = [
+                'animation-' + animation,
+                '-webkit-animation-' + animation,
+                '-moz-animation-' + animation,
+                '-o-animation-' + animation,
+                '-ms-animation-' + animation
+            ];
+            var delayInAttributes = {};
+            delayInAttr.forEach(function (entry) {
+
+                delayInAttributes[entry] = '';
+            });
+            obj.css(delayInAttributes);
+        }
+
+        slickItems.each(function () {
+            var slickItem = $(this);
+
+            slickItem.find('[data-animation-in]').each(function () {
+                var self = $(this);
+
+                self.css(hidden);
+
+                var animationIn = self.attr('data-animation-in');
+                var animationOut = self.attr('data-animation-out');
+                var delayIn = self.attr('data-delay-in');
+                var durationIn = self.attr('data-duration-in');
+                var delayOut = self.attr('data-delay-out');
+                var durationOut = self.attr('data-duration-out');
+
+                if (animationOut) {
+                    if (firstSlickItem.length > 0) {
+                        if (slickItem.hasClass('slick-current')) {
+
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+                            }
+
+                            setTimeout(function () {
+                                slickSetAnimationDefault(self, hidden, animationIn, animatedClass);
+                                slickSetAnimationDefault(self, visible, animationOut, animatedClass);
+                                if (delayOut) {
+                                    slickAddAnimation(self, 'delay', delayOut);
+                                }
+                                if (durationOut) {
+                                    slickAddAnimation(self, 'duration', durationOut);
+                                }
+                                setTimeout(function() {
+                                    slickRemoveAnimation(self, 'delay');
+                                    slickRemoveAnimation(self, 'duration');
+                                }, getTimeout(delayOut, durationOut));
+
+                            }, getTimeout(delayIn, durationIn));
+                        }
+                    }
+
+                    currentSlickSlider.on('afterChange', function (event, slick, currentSlider) {
+                        if (slickItem.hasClass('slick-current')) {
+
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+                            }
+
+                            setTimeout(function () {
+                                slickSetAnimationDefault(self, hidden, animationIn, animatedClass);
+                                slickSetAnimationDefault(self, visible, animationOut, animatedClass);
+
+                                if (delayOut) {
+                                    slickAddAnimation(self, 'delay', delayOut);
+                                }
+                                if (durationOut) {
+                                    slickAddAnimation(self, 'duration', durationOut);
+                                }
+                                setTimeout(function() {
+                                    slickRemoveAnimation(self, 'delay');
+                                    slickRemoveAnimation(self, 'duration');
+                                }, getTimeout(delayOut, durationOut));
+
+                            }, getTimeout(delayIn, durationIn));
+                        }
+                    });
+
+                    currentSlickSlider.on('beforeChange', function (event, slick, currentSlider) {
+                        slickSetAnimationDefault(self, hidden, animationOut, animatedClass, true);
+
+                    });
+                } else {
+
+                    if (firstSlickItem.length > 0) {
+                        if (slickItem.hasClass('slick-current')) {
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+
+                            }
+                        }
+                    }
+
+                    currentSlickSlider.on('afterChange', function (event, slick, currentSlider) {
+                        if (slickItem.hasClass('slick-current')) {
+                            slickSetAnimationDefault(self, visible, animationIn, animatedClass, true);
+
+                            if (delayIn) {
+                                slickAddAnimation(self, 'delay', delayIn);
+                            }
+                            if (durationIn) {
+                                slickAddAnimation(self, 'duration', durationIn);
+                            }
+                        }
+                    });
+
+
+                    currentSlickSlider.on('beforeChange', function (event, slick, currentSlider) {
+                        slickSetAnimationDefault(self, hidden, animationIn, animatedClass, true);
+                    });
+                }
+
+            });
+        });
+        return this;
+    }
+})(jQuery);