https://www.mms.edu.jo/profiles/custom/born_ready_profile/themes/b…/js/animate-testimonial-quote.js?v=3.7.1

1(function ($, _, Drupal, drupalSettings, once) {
2  'use strict';
3  // Drupal behaviours has conflict with scrolltrigger,
4	// and does not work consistently, hence using document ready.
5	$(document).ready(function() {
6
7		const splitTextAnimation = ($original, $duplicate) => {
8			gsap.registerPlugin(ScrollTrigger);
9
10			const clone = $original.text();
11			const eleWidth  = $original.width();
12			$duplicate.text(clone);
13			$duplicate.splitLines({width: eleWidth, tag:'<div class="line">'});
14			const lines = gsap.utils.toArray('.line');
15
16			lines.forEach(line => {
17				gsap.fromTo(line, {
18					clipPath: "polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)"
19				},
20				{
21					scrollTrigger: {
22						trigger: line,
23						scrub: true,
24						start: "0% center",
25						end: "100% center",
26					},
27					clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)"
28				});
29			});
30		}
31
32		// Function to animate testimonial quote using scroltrigger.
33		function animateTestimonialQuote($original, $duplicate) {
34			if ($original.length && $duplicate.length) {
35				const eleWidth = $original.width();
36				// If testimonial is hidden, width will be zero.
37				if (eleWidth) {
38					splitTextAnimation($original, $duplicate);
39
40					// Listen to resize event.
41					ScrollTrigger.addEventListener("refreshInit", function() {
42						setTimeout(function() {splitTextAnimation($original, $duplicate);}, 1000);
43					});
44				}
45			}
46		}
47
48		$('.testimonial-quote-original').each(function() {
49			// Make sure element exists before applying animation.
50			const $original = $(this);
51			const $duplicate =  $(this).next('.testimonial-quote-duplicate');
52			animateTestimonialQuote($original, $duplicate);
53		});
54
55		// Re-initilize testimonial animation when accordion is clicked.
56		$(once('testimonialAccordion', '[data-toggle="collapse"]'))
57			.each(function () {
58				$(this).on('click', function (e) {
59					const thisObj = $(this);
60					setTimeout(function() {
61						const target = $(thisObj).data('target');
62						const selector = target + ' .testimonial-quote-original';
63						const $original = $(selector);
64						const $duplicate =  $(selector).next('.testimonial-quote-duplicate');
65						animateTestimonialQuote($original, $duplicate);
66					}, 500);
67				});
68			});
69
70		// Re-initilize testimonial animation when carousel.
71		$('[data-ride="carousel"]').on('slide.bs.carousel', function () {
72			const target = $(this).find('.active > paragraph').attr('id');
73			const selector = '#' + target + ' .testimonial-quote-original';
74			const $original = $(selector);
75			const $duplicate =  $(selector).next('.testimonial-quote-duplicate');
76			animateTestimonialQuote($original, $duplicate);
77		});
78
79		// When tabs are clicked, Re-initilize testimonial animation.
80		$(once('testimonialTabs', '.paragraph--type--bp-tabs .nav-tabs .nav-item'))
81			.each(function () {
82				$(this).on('click', function (e) {
83					const thisObj = $(this);
84					setTimeout(function() {
85						const target = $(thisObj).find('a').attr('href');
86						const selector = target + ' .testimonial-quote-original';
87						const $original = $(selector);
88						const $duplicate =  $(selector).next('.testimonial-quote-duplicate');
89						animateTestimonialQuote($original, $duplicate);
90					}, 300);
91				});
92			});
93	});
94
95})(window.jQuery, window._, window.Drupal, window.drupalSettings, window.once);