https://jovaki.com/wp-content/themes/agron/elements/assets/js/animated.js?ver=1.0.0

1( function( $ ) {
2
3    function textAnimated($scope) {
4        let elements = $scope.find('.text-animated');
5        if(!elements.length) return;    
6        const applyEffects = (el) => {
7            let text = $(el).find('> .pxl-title-text, > .pxl-subtitle-text, > p, > .pxl-post-title');
8            let splitType = $(el).attr('data-split-text');
9            let elClass = $(el).attr('class');
10            let attrs = {
11                type: splitType?? 'lines',
12                linesClass: 'line',
13                wordsClass: 'word',
14                charsClass: 'char',
15                tag       : 'div',
16            };
17            if (splitType === 'words') {
18                attrs = { ...attrs, type: 'words' };
19            } else if (splitType === 'chars') {
20                attrs = { ...attrs, type: 'words, chars', wordsClass: 'word'};
21            }
22
23            if (el.splitTextInstance) {
24                el.splitTextInstance.revert();
25            }
26            let splitText;
27            if (!$(el).hasClass('text-splitted')) {
28                splitText = new SplitText(text[0], attrs);
29                $(el).addClass('text-splitted');
30                el.splitTextInstance = splitText;
31            } else {
32                splitText = el.splitTextInstance;
33            }
34            
35
36            let animateTarget = [];
37            let stagger = 0.02;
38            if (splitType === 'chars') {
39                animateTarget = splitText.chars;
40            } else if (splitType === 'words') {
41                animateTarget = splitText.words;
42                stagger = stagger * 2;
43            } else {
44                animateTarget = splitText.lines;
45                stagger = stagger * 4;
46            }
47
48
49            let gsapParams = {
50                x: 0,
51                y: 0,
52                opacity: 1,
53                rotation: 0,
54                rotateX : 0,
55                duration: 0.5,
56                delay: 0,
57                scale: 1,
58                stagger: stagger,
59                force3D: true,
60                scrollTrigger: {
61                    trigger: el,
62                    start: "top 90%", 
63                    end  : "top 45%",
64                    toggleActions: `play none none none`,
65                    scrub: false,
66                    // stagger: stagger,
67                    // markers: true
68                },
69            }
70            if(elClass.includes('text-fade-in')) {
71                gsapParams.opacity = 0;
72                if(elClass.includes('text-fade-in-right')) 
73                    gsapParams.x = 30;
74                else if(elClass.includes('text-fade-in-left'))
75                    gsapParams.x = -30;
76                else if(elClass.includes('text-fade-in-up'))
77                    gsapParams.y = 30;
78                else if(elClass.includes('text-fade-in-down'))
79                    gsapParams.y = -30;
80            }else if(elClass.includes('text-explosion')) {
81                gsapParams.x = () => gsap.utils.random(-1000, 1000)
82                gsapParams.y = () => gsap.utils.random(-1000, 1000)
83                gsapParams.rotation = () => gsap.utils.random(-90, 90)
84                gsapParams.scale = () => gsap.utils.random(0.5, 1.5)
85                gsapParams.opacity = 0
86            }else if(elClass.includes('text-zigzag-zoom')) {
87                animateTarget.forEach((target, i) => {
88                    gsap.from(target, {
89                        scale: (i % 2 === 0) ? 0 : 2,
90                        opacity: 0,
91                        duration: 0.75,
92                        stagger: 0,
93                        scrollTrigger: {
94                            trigger: el,
95                            start: "top 95%", 
96                            end: "top 60%",
97                            toggleActions: `play none none none`,
98                            scrub: false,
99                            markers: true,
100                        }
101                    });
102                });
103                return; 
104            }else if(elClass.includes('text-flip-x')) {
105                gsap.set(el, {perspective: '50px'})
106                gsapParams.rotateX = 90;
107                gsapParams.opacity = 0;
108            }else if(elClass.includes('text-flip-y')) {
109                gsap.set(el, {perspective: '50px'})
110                gsapParams.rotateY = 90;
111                gsapParams.opacity = 0;
112            }else if(elClass.includes('text-zoom-in')) {
113                gsapParams.scale = 0;
114            }
115            if(elClass.includes('text-reveal')) {
116                gsapParams.scrollTrigger.scrub = true;
117            }            
118            $(el).css('visibility', 'visible');
119            gsap.from(animateTarget, gsapParams);
120        };
121
122        elements.each(function (i, el) {
123            applyEffects(el);
124        });
125        
126        let resizeTimeout;
127        $(window).on('resize', function () {
128            clearTimeout(resizeTimeout);
129            resizeTimeout = setTimeout(function () {
130                elements.each(function (i, el) {
131                    if (el.splitTextInstance) {
132                        el.splitTextInstance.revert();
133                        el.splitTextInstance = null;
134                    }
135                    $(el).removeClass('text-splitted');
136                    applyEffects(el); 
137                });
138            }, 300);
139        });
140    }
141
142    $( window ).on( 'elementor/frontend/init', function() {
143        elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_heading.default`, function( $scope ) {
144            textAnimated($scope);
145        });
146        elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_text_editor.default`, function( $scope ) {
147            textAnimated($scope);
148        });
149    });

150
151})( jQuery );