https://tessernaut.com/assets/js/main.js

1/***************************************************
2==================== JS INDEX ======================
3****************************************************
401. PreLoader Js
502. Mobile Menu Js
603. Common Js
704. Menu Controls JS
805. Offcanvas Js
906. Search Js
1007. cartmini Js
1108. filter
1209. Body overlay Js
1310. Sticky Header Js
1411. Theme Settings Js
1512. Nice Select Js
1613. Smooth Scroll Js
1714. Slider Activation Area Start
1815. Masonary Js
1916. Wow Js
2017. Counter Js
2118. InHover Active Js
2219. Line Animation Js
2320. Video Play Js
2421. Password Toggle Js
25****************************************************/
26
27
28(function ($) {
29	"use strict";
30
31	var windowOn = $(window);
32
33	(function () {
34		function id(v) { return document.getElementById(v); }
35		function loadbar() {
36			var ovrl = id("loading"),
37				prog = id("tp-loading-line"),
38				number = id("tp-loading-number"),
39				img = document.images,
40				c = 0,
41				tot = img.length;
42			if (tot == 0) return doneLoading();
43
44			function imgLoaded() {
45				c += 1;
46				var perc = ((100 / tot * c) << 0) + "%";
47				prog.style.width = perc;
48				number.innerHTML = perc;
49
50				if (c === tot) return doneLoading();
51			}
52			function doneLoading() {
53
54				setTimeout(function () {
55					$("#loading").fadeOut(500);
56				}, 100);
57			}
58			for (var i = 0; i < tot; i++) {
59				var tImg = new Image();
60				tImg.onload = imgLoaded;
61				tImg.onerror = imgLoaded;
62				tImg.src = img[i].src;
63			}
64		}
65		document.addEventListener('DOMContentLoaded', loadbar, false);
66	}());
67
68
69
70	////////////////////////////////////////////////////
71	// 03. Wow Js
72	new WOW().init();
73
74
75	////////////////////////////////////////////////////
76	// 02. sticky header
77	function tp_pinned_header() {
78		var lastScrollTop = 0;
79
80		windowOn.on('scroll', function () {
81			var currentScrollTop = $(this).scrollTop();
82
83			if (currentScrollTop > lastScrollTop) {
84				$('.tp-int-menu').removeClass('tp-header-pinned');
85			} else if ($(this).scrollTop() <= 500) {
86				$('.tp-int-menu').removeClass('tp-header-pinned');
87			} else {
88				// Scrolling up, remove the class
89				$('.tp-int-menu').addClass('tp-header-pinned');
90			}
91			lastScrollTop = currentScrollTop;
92		});
93	}
94	tp_pinned_header();
95
96
97	//////////////////////////////////////////////////
98	// 03. Common Js
99
100	$("[data-background").each(function () {
101		$(this).css("background-image", "url( " + $(this).attr("data-background") + "  )");
102	});
103
104	$("[data-width]").each(function () {
105		$(this).css("width", $(this).attr("data-width"));
106	});
107
108	$("[data-bg-color]").each(function () {
109		$(this).css("background-color", $(this).attr("data-bg-color"));
110	});
111
112	$("[data-text-color]").each(function () {
113		$(this).css("color", $(this).attr("data-text-color"));
114	});
115
116	$(".has-img").each(function () {
117		var imgSrc = $(this).attr("data-menu-img");
118		var img = `<img class="mega-menu-img" src="${imgSrc}" alt="img">`;
119		$(this).append(img);
120
121	});
122
123
124	$('.wp-menu nav > ul > li').slice(-4).addClass('menu-last');
125
126
127	$('.tp-hamburger-toggle').on('click', function () {
128		$('.tp-header-side-menu').slideToggle('tp-header-side-menu');
129	});
130
131
132
133	if ($('.tp-main-menu-content').length && $('.tp-main-menu-mobile').length) {
134		let navContent = document.querySelector(".tp-main-menu-content").innerHTML;
135		let mobileNavContainer = document.querySelector(".tp-main-menu-mobile nav");
136		mobileNavContainer.innerHTML = navContent;
137
138		let arrow = $(".tp-main-menu-mobile .has-dropdown > a");
139
140		arrow.each(function () {
141
142			let self = $(this);
143			let arrowBtn = document.createElement("BUTTON");
144			arrowBtn.classList.add("dropdown-toggle-btn");
145			arrowBtn.innerHTML = `<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
146			<path d="M14 1V27" stroke="currentcolor" stroke-opacity="0.95" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
147			<path d="M1 14H27" stroke="currentcolor" stroke-opacity="0.95" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
148			</svg>`;
149
150			self.append(function () {
151				return arrowBtn;
152			});
153
154			self.find("button").on("click", function (e) {
155				e.preventDefault();
156				let self = $(this);
157				self.toggleClass("dropdown-opened");
158				self.parent().toggleClass("expanded");
159				self.parent().parent().addClass("dropdown-opened").siblings().removeClass("dropdown-opened");
160				self.parent().parent().children(".tp-submenu").slideToggle();
161			});
162
163		});
164	}
165
166	////////////////////////////////////////////////////
167	// 09. Offcanvas Js
168
169	// style 2
170	$(".tp-offcanvas-open-btn").on("click", function () {
171		$(".tp-offcanvas-area").addClass("opened");
172
173		setTimeout(() => {
174			$('.tp-text-hover-effect-word').addClass('animated-text');
175		}, 900);
176	});
177
178	$(".tp-offcanvas-close-btn").on("click", function () {
179
180		setTimeout(() => {
181			$('.tp-text-hover-effect-word').removeClass('animated-text');
182		}, 1200);
183
184		$(".tp-offcanvas-area").removeClass("opened");
185
186	});
187
188
189
190
191	// style 1
192	$(".tp-offcanvas-open-btn-2").on("click", function () {
193		$(".tp-offcanvas-area-2").addClass("opened");
194		$(".body-overlay").addClass("opened");
195	});
196
197
198	$(".tp-offcanvas-close-btn-2").on("click", function () {
199		$(".tp-offcanvas-area-2").removeClass("opened");
200		$(".body-overlay").removeClass("opened");
201	});
202
203	////////////////////////////////////////////////////
204	// 09. Body overlay Js
205	$(".body-overlay").on("click", function () {
206		$(".offcanvas__area").removeClass("offcanvas-opened");
207		$(".tp-search-area").removeClass("opened");
208		$(".cartmini__area").removeClass("cartmini-opened");
209		$(".tp-offcanvas-area-2").removeClass("opened");
210		$(".body-overlay").removeClass("opened");
211	});
212
213
214	////////////////////////////////////////////////////
215	// 10. Sticky Header Js
216	windowOn.on('scroll', function () {
217		var scroll = $(window).scrollTop();
218		if (scroll < 100) {
219			$("#header-sticky").removeClass("header-sticky");
220		} else {
221			$("#header-sticky").addClass("header-sticky");
222		}
223	});
224
225
226	$('.tp-hero-2__accordion-item').on("mouseenter", function () {
227		$(this).addClass('active').siblings().removeClass('active');
228	});
229
230	$('.tp-hero-2__accordion-item').on("mouseleave", function () {
231		$('.tp-hero-2__accordion-item').removeClass('active').addClass('active');
232	});
233
234
235	$('.menu-hover-active nav ul li').on("mouseenter", function () {
236		$(this).addClass('active').siblings().removeClass('active');
237	});
238
239	$('.menu-hover-active nav ul li').on("mouseleave", function () {
240		$(this).removeClass('active').addClass('active');
241	});
242
243
244	$('.tp-services-accordion-item').on("click", function () {
245		$(this).addClass('active').siblings().removeClass('active');
246	});
247
248
249	$('a, button, .themepure-theme-toggle').on("mouseenter", function () {
250		$('#awesome-cursor-circle').addClass('hide');
251	});
252
253	$('a, button, .themepure-theme-toggle').on("mouseleave", function () {
254		$('#awesome-cursor-circle').removeClass('hide');
255	});
256
257
258
259	$('.menu-hover-active > nav > ul > li').addClass('active');
260
261	$('.menu-hover-active').on("mouseleave", function () {
262		$('.menu-hover-active > nav > ul > li').addClass('active');
263	});
264
265	// $('.menu-hover-active > nav > ul > li').addClass('active');
266
267
268	////////////////////////////////////////////////////
269	// 12. Nice Select Js
270	$('select').niceSelect();
271
272	////////////////////////////////////////////////////
273	// 13. Smooth Scroll Js
274	function smoothSctoll() {
275		$('.smooth a').on('click', function (event) {
276			var target = $(this.getAttribute('href'));
277			if (target.length) {
278				event.preventDefault();
279				$('html, body').stop().animate({
280					scrollTop: target.offset().top - 120
281				}, 1500);
282			}
283		});
284	}
285	smoothSctoll();
286
287	function back_to_top() {
288		var btn = $('#back_to_top');
289		var btn_wrapper = $('.back-to-top-wrapper');
290
291		windowOn.scroll(function () {
292			if (windowOn.scrollTop() > 300) {
293				btn_wrapper.addClass('back-to-top-btn-show');
294			} else {
295				btn_wrapper.removeClass('back-to-top-btn-show');
296			}
297		});
298
299		btn.on('click', function (e) {
300			e.preventDefault();
301			$('html, body').animate({ scrollTop: 0 }, '300');
302		});
303	}
304	back_to_top();
305
306	var tp_rtl = localStorage.getItem('tp_dir');
307	let rtl_setting = tp_rtl == 'rtl' ? true : false;

308
309
310	var swipers = new Swiper(".swiper", {
311		effect: "coverflow",
312		grabCursor: true,
313		centeredSlides: true,
314		coverflowEffect: {
315			rotate: 0,
316			stretch: 0,
317			depth: 100,
318			modifier: 3,
319			slideShadows: true
320		},
321		loop: true,
322		pagination: {
323			el: ".swiper-pagination",
324			clickable: true
325		},
326		breakpoints: {
327			640: {
328				slidesPerView: 1
329			},
330			768: {
331				slidesPerView: 2
332			},
333			1024: {
334				slidesPerView: 3
335			},
336			1560: {
337				slidesPerView: 3
338			}
339		}
340	});
341
342
343
344	////////////////////////////////////////////////////
345	// 14. Slider Activation Area Start
346	$('.tp-slider-active-4').slick({
347		infinite: true,
348		slidesToShow: 1,
349		slidesToScroll: 1,
350		arrows: true,
351		fade: true,
352		centerMode: true,
353		prevArrow: `<button type="button" class="tp-slider-3-button-prev"><svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
354		   <path d="M1.00073 6.99989L15 6.99989" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
355		   <path d="M6.64648 1.5L1.00011 6.99954L6.64648 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`,
356		nextArrow: `<button type="button" class="tp-slider-3-button-next"><svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
357		<path d="M14.9993 6.99989L1 6.99989" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
358		<path d="M9.35352 1.5L14.9999 6.99954L9.35352 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
359		</svg></button>`,
360		asNavFor: '.tp-slider-nav-active',
361		appendArrows: $('.tp-slider-arrow-4'),
362
363	});
364
365	// home electronics
366	var slider = new Swiper('.tp-active', {
367		slidesPerView: 3,
368		spaceBetween: 20,
369		loop: true,
370		autoplay: {
371			delay: 4000,
372		},
373		rtl: rtl_setting,
374		// Navigation arrows
375		navigation: {
376			nextEl: ".tp-blog-main-slider-button-next",
377			prevEl: ".tp-blog-main-slider-button-prev",
378		},
379		pagination: {
380			el: ".tp-blog-main-slider-dot",
381			clickable: true,
382			renderBullet: function (index, className) {
383				return '<span class="' + className + '">' + '<button>' + (index + 1) + '</button>' + "</span>";
384			},
385		},
386		breakpoints: {
387			'1200': {
388				slidesPerView: 3,
389			},
390			'992': {
391				slidesPerView: 2,
392			},
393			'768': {
394				slidesPerView: 2,
395			},
396			'576': {
397				slidesPerView: 1,
398			},
399			'0': {
400				slidesPerView: 1,
401			},
402		},
403	});
404
405	// home electronics
406	var slider = new Swiper('.tp-brand-slider-active', {
407		slidesPerView: 5,
408		spaceBetween: 64,
409		loop: true,
410		autoplay: {
411			delay: 4000,
412		},
413		// rtl: rtl_setting,
414		// Navigation arrows
415		navigation: {
416			nextEl: ".tp-brand-slider-button-next",
417			prevEl: ".tp-brand-slider-button-prev",
418		},
419		pagination: {
420			el: ".tp-brand-slider-dot",
421			clickable: true,
422			renderBullet: function (index, className) {
423				return '<span class="' + className + '">' + '<button>' + (index + 1) + '</button>' + "</span>";
424			},
425		},
426		breakpoints: {
427			'1400': {
428				slidesPerView: 5,
429			},
430			'1200': {
431				slidesPerView: 4,
432			},
433			'992': {
434				slidesPerView: 4,
435			},
436			'768': {
437				slidesPerView: 2,
438			},
439			'576': {
440				slidesPerView: 3,
441			},
442			'0': {
443				slidesPerView: 2,
444			},
445		},
446	});
447
448	var postboxSlider = new Swiper('.tp-postbox-slider', {
449		slidesPerView: 1,
450		spaceBetween: 0,
451		loop: true,
452		rtl: rtl_setting,
453		autoplay: {
454			delay: 3000,
455		},
456		// Navigation arrows
457		navigation: {
458			nextEl: ".tp-postbox-slider-button-next",
459			prevEl: ".tp-postbox-slider-button-prev",
460		},
461		breakpoints: {
462			'1200': {
463				slidesPerView: 1,
464			},
465			'992': {
466				slidesPerView: 1,
467			},
468			'768': {
469				slidesPerView: 1,
470			},
471			'576': {
472				slidesPerView: 1,
473			},
474			'0': {
475				slidesPerView: 1,
476			},
477		},
478	});
479
480
481
482	var bloglist = new Swiper('.blog-list__slider-active', {
483		speed: 800,
484		slidesPerView: 1,
485		spaceBetween: 0,
486		loop: false,
487		effect: 'fade',
488		loop: true,
489		// Navigation arrows
490		navigation: {
491			nextEl: ".blog-list__arrow-next",
492			prevEl: ".blog-list__arrow-prev",
493		},
494		// scrollbar
495		scrollbar: {
496			el: ".blog-list__scrollbar",
497			clickable: true,
498		},
499		breakpoints: {
500			'1200': {
501				slidesPerView: 1,
502			},
503			'992': {
504				slidesPerView: 1,
505			},
506			'768': {
507				slidesPerView: 1,
508			},
509			'576': {
510				slidesPerView: 1,
511			},
512			'0': {
513				slidesPerView: 1,
514			},
515		},
516	});
517
518
519	var testimonial2 = new Swiper('.tp-testimonial-2__slider-active', {
520		slidesPerView: 1,
521		spaceBetween: 0,
522		loop: true,
523		speed: 1200,
524		rtl: rtl_setting,
525		autoplay: {
526			delay: 3000,
527		},
528		// Navigation arrows
529		navigation: {
530			prevEl: ".tp-testimonial-2__slider-next",
531			nextEl: ".tp-testimonial-2__slider-prev",
532		},
533		breakpoints: {
534			'1200': {
535				slidesPerView: 1,
536			},
537			'992': {
538				slidesPerView: 1,
539			},
540			'768': {
541				slidesPerView: 1,
542			},
543			'576': {
544				slidesPerView: 1,
545			},
546			'0': {
547				slidesPerView: 1,
548			},
549		},
550	});
551
552
553	var testimonialNav = new Swiper(".tp-testimonial-nav", {
554		spaceBetween: 4,
555		slidesPerView: 3,
556		loop: true,
557		freeMode: true,
558		watchSlidesProgress: true,
559		allowTouchMove: false,
560		breakpoints: {
561			'992': {
562				slidesPerView: 3,
563			},
564			'768': {
565				slidesPerView: 2,
566			},
567			'576': {
568				slidesPerView: 1,
569			},
570			'0': {
571				slidesPerView: 1,
572			},
573		},
574	});
575
576	var testimonialMain = new Swiper(".tp-testimonial-slider-active", {
577		slidesPerView: 1,
578		spaceBetween: 0,
579		speed: 1500,
580		loop: true,
581		thumbs: {
582			swiper: testimonialNav,
583		},
584	});
585
586	var testimonialNav = new Swiper(".tp-testimonial-nav-2", {
587		spaceBetween: 4,
588		slidesPerView: 3,
589		freeMode: true,
590		watchSlidesProgress: true,
591		breakpoints: {
592			'992': {
593				slidesPerView: 3,
594			},
595			'768': {
596				slidesPerView: 2,
597			},
598			'576': {
599				slidesPerView: 1,
600			},
601			'0': {
602				slidesPerView: 1,
603			},
604		},
605	});
606
607	var testimonialMain = new Swiper(".tp-testimonial-slider-active-2", {
608		spaceBetween: 10,
609		navigation: {
610			nextEl: ".swiper-button-next",
611			prevEl: ".swiper-button-prev",
612		},
613		thumbs: {
614			swiper: testimonialNav,
615		},
616	});
617
618
619	// 09. Home-1-Slider js
620	$('.tp-marquee-slider-active').slick({
621		speed: 7000,
622		autoplay: true,
623		autoplaySpeed: 0,
624		centerMode: true,
625		cssEase: 'linear',
626		slidesToShow: 1,
627		slidesToScroll: 1,
628		variableWidth: true,
629		infinite: true,
630		initialSlide: 1,

631		arrows: false,
632		buttons: false,
633		focusOnSelect: true,
634		pauseOnHover: true,
635		responsive: [
636			{
637				breakpoint: 1200,
638				settings: {
639				}
640			},
641			{
642				breakpoint: 992,
643				settings: {
644				}
645			},
646			{
647				breakpoint: 768,
648				settings: {
649					slidesToShow: 1,
650				}
651			},
652			{
653				breakpoint: 480,
654				settings: {
655					slidesToShow: 1,
656				}
657			}
658		]
659	});
660
661
662	// 09. Home-1-Slider js
663	$('.porfolio-inner__slider-active').slick({
664		speed: 2000,
665		autoplay: true,
666		autoplaySpeed: 0,
667		centerMode: true,
668		cssEase: 'linear',
669		slidesToShow: 3,
670		slidesToScroll: 1,
671		variableWidth: true,
672		infinite: true,
673		initialSlide: 1,
674		arrows: false,
675		buttons: false,
676		focusOnSelect: true,
677		pauseOnHover: true,
678		responsive: [
679			{
680				breakpoint: 1200,
681				settings: {
682				}
683			},
684			{
685				breakpoint: 992,
686				settings: {
687				}
688			},
689			{
690				breakpoint: 768,
691				settings: {
692					slidesToShow: 1,
693				}
694			},
695			{
696				breakpoint: 480,
697				settings: {
698					slidesToShow: 1,
699				}
700			}
701		]
702	});
703
704	////brand-slider
705	var postbox = new Swiper('.postbox__thumb-slider-active', {
706		slidesPerView: 1,
707		loop: true,
708		autoplay: true,
709		effect: 'fade',
710		breakpoints: {
711			'1400': {
712				slidesPerView: 1,
713			},
714			'1200': {
715				slidesPerView: 1,
716			},
717			'992': {
718				slidesPerView: 1,
719			},
720			'768': {
721				slidesPerView: 1,
722			},
723			'576': {
724				slidesPerView: 1,
725			},
726			'0': {
727				slidesPerView: 1,
728			},
729		},
730		// Navigation arrows
731		navigation: {
732			nextEl: '.postbox-arrow-next',
733			prevEl: '.postbox-arrow-prev',
734		},
735		a11y: false,
736	});
737
738
739
740	// 09. Home-1-Slider js
741	$('.sv-inner__slider-active-1').slick({
742		speed: 8000,
743		autoplay: true,
744		autoplaySpeed: 0,
745		cssEase: 'linear',
746		slidesPerRow: 2,
747		slidesToShow: 2,
748		arrows: false,

749		buttons: false,
750		vertical: true,
751		verticalSwiping: true,
752		responsive: [
753			{
754				breakpoint: 1200,
755				settings: {
756				}
757			},
758			{
759				breakpoint: 992,
760				settings: {
761				}
762			},
763			{
764				breakpoint: 768,
765				settings: {
766					slidesToShow: 1,
767				}
768			},
769			{
770				breakpoint: 480,
771				settings: {
772					slidesToShow: 1,
773				}
774			}
775		]
776	});
777
778	// 09. Home-1-Slider js
779	$('.sv-inner__slider-active-2').slick({
780		speed: 8000,
781		autoplay: true,
782		autoplaySpeed: 0,
783		cssEase: 'linear',
784		slidesPerRow: 2,
785		slidesToShow: 2,
786		arrows: false,
787		buttons: false,
788		vertical: true,
789		verticalSwiping: true,
790		centerPadding: '120px',
791		responsive: [
792			{
793				breakpoint: 1200,
794				settings: {
795				}
796			},
797			{
798				breakpoint: 992,
799				settings: {
800				}
801			},
802			{
803				breakpoint: 768,
804				settings: {
805					slidesToShow: 1,
806				}
807			},
808			{
809				breakpoint: 480,
810				settings: {
811					slidesToShow: 1,
812				}
813			}
814		]
815	});
816
817
818	////////////////////////////////////////////////////
819	// 15. Masonary Js
820	$('.grid').imagesLoaded(function () {
821		// init Isotope
822		var $grid = $('.grid').isotope({
823			itemSelector: '.grid-item',
824			percentPosition: true,
825			masonry: {
826				// use outer width of grid-sizer for columnWidth
827				columnWidth: '.grid-item',
828			}
829		});
830
831		// filter items on button click
832		$('.masonary-menu').on('click', 'button', function () {
833			var filterValue = $(this).attr('data-filter');
834			$grid.isotope({ filter: filterValue });
835		});
836
837		//for menu active class
838		$('.masonary-menu button').on('click', function (event) {
839			$(this).siblings('.active').removeClass('active');
840			$(this).addClass('active');
841			event.preventDefault();
842		});
843
844	});
845
846	/* magnificPopup img view */
847	$('.popup-image').magnificPopup({
848		type: 'image',
849		gallery: {
850			enabled: true
851		}
852	});
853
854	/* magnificPopup video view */
855	$(".popup-video").magnificPopup({
856		type: "iframe",
857	});
858
859
860	////////////////////////////////////////////////////
861	// 17. Counter Js
862	new PureCounter();
863	new PureCounter({
864		filesizing: true,
865		selector: ".filesizecount",
866		pulse: 2,
867	});
868
869	////////////////////////////////////////////////////
870	// 18. InHover Active Js
871	$('.hover__active').on('mouseenter', function () {
872		$(this).addClass('active').parent().siblings().find('.hover__active').removeClass('active');
873	});
874
875	$('.activebsba').on("click", function () {
876		$('#services-item-thumb').removeClass().addClass($(this).attr('rel'));
877		$(this).addClass('active').siblings().removeClass('active');
878	});
879
880
881
882	// skills tab
883	if ($('#lineMarker').length > 0) {
884
885		function tp_tab_line_2() {
886			var marker = document.querySelector('#lineMarker');
887			var item = document.querySelectorAll('.tp-marker-tab button');
888			var itemActive = document.querySelector('.tp-marker-tab .nav-link.active');
889
890			function indicator(e) {
891				marker.style.left = e.offsetLeft + "px";
892				marker.style.width = e.offsetWidth + "px";
893			}
894
895
896			item.forEach(link => {
897				link.addEventListener('click', (e) => {
898					indicator(e.target);
899				});
900			});
901
902			var activeNav = $('.nav-link.active');
903			var activewidth = $(activeNav).width();
904			var activePadLeft = parseFloat($(activeNav).css('padding-left'));
905			var activePadRight = parseFloat($(activeNav).css('padding-right'));
906			var totalWidth = activewidth + activePadLeft + activePadRight;
907
908			var precedingAnchorWidth = anchorWidthCounter();
909
910
911			$(marker).css('display', 'block');
912
913			$(marker).css('width', totalWidth);
914
915			function anchorWidthCounter() {
916				var anchorWidths = 0;
917				var a;
918				var aWidth;
919				var aPadLeft;
920				var aPadRight;
921				var aTotalWidth;
922				$('.tp-marker-tab button').each(function (index, elem) {
923					var activeTest = $(elem).hasClass('active');
924					marker.style.left = elem.offsetLeft + "px";
925					if (activeTest) {
926						// Break out of the each function.
927						return false;
928					}
929
930					a = $(elem).find('button');
931					aWidth = a.width();
932					aPadLeft = parseFloat(a.css('padding-left'));
933					aPadRight = parseFloat(a.css('padding-right'));
934					aTotalWidth = aWidth + aPadLeft + aPadRight;
935
936					anchorWidths = anchorWidths + aTotalWidth;
937
938				});
939
940				return anchorWidths;
941			}
942		}
943		tp_tab_line_2();
944	}
945
946
947	if ($('#blog-btn-bg').length > 0) {
948		function tp_tab_line_3() {
949			var marker = document.querySelector('#blog-btn-bg');
950			var item = document.querySelectorAll('.blog-btn-tab button');
951			var itemActive = document.querySelector('.blog-btn-tab .nav-links.active');
952
953			function indicator(e) {
954				marker.style.left = e.offsetLeft + "px";
955				marker.style.width = e.offsetWidth + "px";
956			}
957
958
959			item.forEach(link => {
960				link.addEventListener('click', (e) => {
961					indicator(e.target);
962				});
963			});
964
965			var activeNav = $('.blog-btn-tab .nav-links.active');
966			var activewidth = $(activeNav).width();
967			var activePadLeft = parseFloat($(activeNav).css('padding-left'));
968			var activePadRight = parseFloat($(activeNav).css('padding-right'));
969			var totalWidth = activewidth + activePadLeft + activePadRight;
970
971			var precedingAnchorWidth = anchorWidthCounter();
972
973
974			$(marker).css('display', 'block');
975
976			$(marker).css('width', totalWidth);
977
978			function anchorWidthCounter() {

979				var anchorWidths = 0;
980				var a;
981				var aWidth;
982				var aPadLeft;
983				var aPadRight;
984				var aTotalWidth;
985				$('.blog-btn-tab button').each(function (index, elem) {
986					ScrollTrigger.refresh();
987					var activeTest = $(elem).hasClass('active');
988					marker.style.left = elem.offsetLeft + "px";
989					if (activeTest) {
990						// Break out of the each function.
991						return false;
992					}
993
994					a = $(elem).find('button');
995					aWidth = a.width();
996					aPadLeft = parseFloat(a.css('padding-left'));
997					aPadRight = parseFloat(a.css('padding-right'));
998					aTotalWidth = aWidth + aPadLeft + aPadRight;
999
1000					anchorWidths = anchorWidths + aTotalWidth;
1001
1002				});
1003
1004				return anchorWidths;
1005			}
1006		}
1007		tp_tab_line_3();
1008	}
1009
1010	////////////////////////////////////////////////////
1011	// 20. Video Play Js
1012	var play = false;
1013	$('.tp-video-toggle-btn').on('click', function () {
1014		if (play === false) {
1015
1016			$('.tp-slider-video').addClass('full-width');
1017			$(this).addClass('hide');
1018			play = true;
1019
1020			$('.tp-slider-video').find('video').each(function () {
1021				$(this).get(0).play();
1022			});
1023		} else {
1024			$('.tp-slider-video').removeClass('full-width');
1025			$(this).removeClass('hide');
1026			play = false;
1027			$('.tp-slider-video').find('video').each(function () {
1028				$(this).get(0).pause();
1029			});
1030		}
1031
1032	});
1033
1034	////////////////////////////////////////////////////
1035	// 21. Password Toggle Js
1036	if ($('#password-show-toggle').length > 0) {
1037		var btn = document.getElementById('password-show-toggle');
1038
1039		btn.addEventListener('click', function (e) {
1040
1041			var inputType = document.getElementById('tp_password');
1042			var openEye = document.getElementById('open-eye');
1043			var closeEye = document.getElementById('close-eye');
1044
1045			if (inputType.type === "password") {
1046				inputType.type = "text";
1047				openEye.style.display = 'block';
1048				closeEye.style.display = 'none';
1049			} else {
1050				inputType.type = "password";
1051				openEye.style.display = 'none';
1052				closeEye.style.display = 'block';
1053			}
1054		});
1055	}
1056
1057	if ($('.tp-header-height').length > 0) {
1058		var headerHeight = document.querySelector(".tp-header-height");
1059		var setHeaderHeight = headerHeight.offsetHeight;
1060
1061		$(".tp-header-height").each(function () {
1062			$(this).css({
1063				'height': setHeaderHeight + 'px'
1064			});
1065		});
1066	}
1067
1068	var breakpoint = window.matchMedia('( max-width: 1300px )');
1069
1070	if ($('.tp-hero-2__slider-active').length > 0) {
1071		if (!breakpoint.matches === true) {
1072			var tp_main = new Swiper(".tp-hero-2__slider-active", {
1073				loop: true,
1074				allowTouchMove: false,
1075				slidesPerView: 1,
1076				spaceBetween: 0,
1077				mousewheel: true,
1078				effect: "fade",
1079				creativeEffect: {
1080					prev: {
1081						shadow: true,
1082						translate: [0, 0, 0],
1083						rotate: [0, 0, 0],
1084					},
1085					next: {
1086						shadow: true,
1087						translate: [0, 0, 0],
1088						rotate: [0, 0, 0],
1089					},
1090				},
1091				pagination: {
1092					el: ".swiper-pagination",
1093					clickable: true,
1094				}
1095			});
1096		} else {
1097			var tp_main = new Swiper(".tp-hero-2__slider-active");
1098			tp_main.destroy(true, true);
1099		}
1100	}
1101
1102	if ($("#tp-3d-slide-wrapper").length > 0) {
1103		var Slider = (function () {
1104			var initSlider = function () {
1105				var dir = $("html").attr("dir");
1106				var swipeHandler = new Hammer(document.getElementById("tp-3d-slide-wrapper"));
1107				swipeHandler.on('swipeleft', function (e) {
1108					if (dir == "rtl")
1109						$(".tp-3d-slide-arrow-left").trigger("click");
1110					else
1111						$(".tp-3d-slide-arrow-right").trigger("click");
1112				});
1113
1114				swipeHandler.on('swiperight', function (e) {
1115					if (dir == "rtl")
1116						$(".tp-3d-slide-arrow-right").trigger("click");
1117					else
1118						$(".arrow-left").trigger("click");
1119				});
1120
1121				$(".tp-3d-slide-arrow-right , .tp-3d-slide-arrow-left").click(function (event) {
1122					var nextActiveSlide = $(".tp-3d-slide.active").next();
1123
1124					if ($(this).hasClass("tp-3d-slide-arrow-left"))
1125						nextActiveSlide = $(".tp-3d-slide.active").prev();
1126
1127					if (nextActiveSlide.length > 0) {
1128						var nextActiveIndex = nextActiveSlide.index();
1129						$(".dots span").removeClass("active");
1130						$($(".dots").children()[nextActiveIndex]).addClass("active");
1131
1132						updateSlides(nextActiveSlide);
1133					}
1134				});
1135
1136				$(".dots span").click(function (event) {
1137					var slideIndex = $(this).index();
1138					var nextActiveSlide = $($(".slider").children()[slideIndex]);
1139					$(".dots span").removeClass("active");
1140					$(this).addClass("active");
1141
1142					updateSlides(nextActiveSlide);
1143				});
1144
1145				var updateSlides = function (nextActiveSlide) {
1146					var nextActiveSlideIndex = $(nextActiveSlide).index();
1147
1148					$(".tp-3d-slide").removeClass("prev-1");
1149					$(".tp-3d-slide").removeClass("next-1");
1150					$(".tp-3d-slide").removeClass("active");
1151					$(".tp-3d-slide").removeClass("prev-2");
1152					$(".tp-3d-slide").removeClass("next-2");
1153
1154					nextActiveSlide.addClass("active");
1155
1156					nextActiveSlide.prev().addClass("prev-1");
1157					nextActiveSlide.prev().prev().addClass("prev-2");
1158					nextActiveSlide.addClass("active");
1159					nextActiveSlide.next().addClass("next-1");
1160					nextActiveSlide.next().next().addClass("next-2");
1161				}
1162
1163				var updateToNextSlide = function (nextActiveSlide) {
1164
1165				}
1166			}
1167			return {
1168				init: function () {
1169					initSlider();
1170				}
1171			}
1172		})();
1173
1174		Slider.init();
1175
1176	}
1177
1178
1179
1180	var inputFields = $('.postbox__comment-input input, .postbox__comment-input textarea');
1181
1182	inputFields.each(function (e) {
1183		var $this = $(this);
1184
1185		if ($this.val().length === 0) {
1186			$this.closest('.postbox__comment-input').find('.floating-label, .floating-label-2').removeClass('floating-label-floated');
1187
1188		} else {
1189			$this.closest('.postbox__comment-input').find('.floating-label, .floating-label-2').addClass('floating-label-floated');
1190		}
1191	})
1192
1193	$('.postbox__comment-input input, .postbox__comment-input textarea').on('focus', function () {
1194		var $this = $(this);
1195		$this.closest('.postbox__comment-input').find('.floating-label, .floating-label-2').addClass('floating-label-floated');
1196	});
1197
1198	$('.postbox__comment-input input, .postbox__comment-input textarea').on('focusout', function () {
1199		var $this = $(this);
1200
1201		if ($this.val().length === 0) {
1202			$this.closest('.postbox__comment-input').find('.floating-label, .floating-label-2').removeClass('floating-label-floated');
1203		}
1204	});
1205
1206	var contactBudgetBtns = $('.contact-budget-btn');
1207
1208	contactBudgetBtns.each(function (e) {
1209		var $this = $(this);
1210
1211		$this.on('click', function () {
1212			$this.addClass('active').siblings().removeClass('active');
1213		});
1214	})
1215
1216	var contactCategoryBtns = $('.contact-category-btn');
1217
1218	contactCategoryBtns.each(function (e) {
1219		var $this = $(this);
1220
1221		$this.on('click', function () {
1222			$this.toggleClass('active');
1223		});
1224	})
1225
1226
1227
1228	gsap.registerPlugin(ScrollTrigger, ScrollSmoother, TweenMax, ScrollToPlugin);
1229	
1230	gsap.config({
1231		nullTargetWarn: false,
1232	});
1233
1234	let smoother = ScrollSmoother.create({
1235		smooth: 2,
1236		effects: true,
1237		smoothTouch: 0.1,
1238		normalizeScroll: false,
1239		ignoreMobileResize: true,
1240	});
1241
1242
1243	// button hover animation
1244	$('.tp-hover-btn').on('mouseenter', function (e) {
1245		var x = e.pageX - $(this).offset().left;
1246		var y = e.pageY - $(this).offset().top;
1247

1248		$(this).find('.tp-btn-circle-dot').css({
1249			top: y,
1250			left: x
1251		});
1252	});
1253
1254	$('.tp-hover-btn').on('mouseout', function (e) {
1255		var x = e.pageX - $(this).offset().left;
1256		var y = e.pageY - $(this).offset().top;
1257
1258		$(this).find('.tp-btn-circle-dot').css({
1259			top: y,
1260			left: x
1261		});
1262	});
1263
1264
1265	var hoverBtns = gsap.utils.toArray(".tp-hover-btn-wrapper");
1266
1267	const hoverBtnItem = gsap.utils.toArray(".tp-hover-btn-item");
1268	hoverBtns.forEach((btn, i) => {
1269		$(btn).mousemove(function (e) {
1270			callParallax(e);
1271		});
1272		function callParallax(e) {
1273			parallaxIt(e, hoverBtnItem[i], 80);
1274		}
1275
1276		function parallaxIt(e, target, movement) {
1277			var $this = $(btn);
1278			var relX = e.pageX - $this.offset().left;
1279			var relY = e.pageY - $this.offset().top;
1280
1281			gsap.to(target, 0.5, {
1282				x: ((relX - $this.width() / 2) / $this.width()) * movement,
1283				y: ((relY - $this.height() / 2) / $this.height()) * movement,
1284				ease: Power2.easeOut,
1285			});
1286		}
1287		$(btn).mouseleave(function (e) {
1288			gsap.to(hoverBtnItem[i], 0.5, {
1289				x: 0,
1290				y: 0,
1291				ease: Power2.easeOut,
1292			});
1293		});
1294	});
1295
1296	// button hover end
1297
1298
1299	// hover reveal start
1300	const hoverItem = document.querySelectorAll(".tp-hover-reveal-item");
1301	function moveImage(e, hoverItem, index) {
1302		const item = hoverItem.getBoundingClientRect();
1303		const x = e.clientX - item.x;
1304		const y = e.clientY - item.y;
1305		if (hoverItem.children[index]) {
1306			hoverItem.children[index].style.transform = `translate(${x}px, ${y}px)`;
1307		}
1308	}
1309	hoverItem.forEach((item, i) => {
1310		item.addEventListener("mousemove", (e) => {
1311			setInterval(moveImage(e, item, 1), 50);
1312		});
1313	});
1314	// hover reveal end
1315
1316
1317	// hover reveal start
1318	const hoverText = document.querySelectorAll(".tp-hover-reveal-text");
1319	function moveText(e, hoverText) {
1320		const item = hoverText.getBoundingClientRect();
1321		const x = e.clientX - item.x;
1322		const y = e.clientY - item.y;
1323		if (hoverText.children[0].children[2]) {
1324			hoverText.children[0].children[2].style.transform = `translate(${x}px, ${y}px)`;
1325		}
1326	}
1327
1328	hoverText.forEach((item, i) => {
1329		item.addEventListener("mousemove", (e) => {
1330			setInterval(moveText(e, item), 100);
1331		});
1332	});
1333	// hover reveal end
1334
1335	// home 1 animation started
1336
1337	/* hero animation here */
1338	gsap.set('.tp-hero-bottom-texts', {
1339		x: window.innerWidth / 10
1340	});
1341
1342	gsap.timeline({
1343		scrollTrigger: {
1344			trigger: '.tp-hero-bottom-text-animation',
1345			start: '30% 10%',
1346			end: 'bottom -10%',
1347			scrub: true,
1348			invalidateOnRefresh: true
1349		}
1350	})
1351		.to('.tp-hero-bottom-texts', {
1352			x: () => -window.innerWidth / 10
1353		});
1354
1355
1356	/* services animation start */
1357	gsap.set('.tp-services-bg-text', {
1358		x: window.innerWidth / 4
1359	});
1360
1361	gsap.timeline({
1362		scrollTrigger: {
1363			trigger: '.tp-services-bg-text-animation',
1364			start: '0% 0%',
1365			end: 'bottom -10%',
1366			scrub: true,
1367			invalidateOnRefresh: true
1368		}
1369	})
1370		.to('.tp-services-bg-text', {
1371			x: () => -window.innerWidth / 10
1372		});
1373
1374	/* portfolio animation start */
1375	gsap.set('.tp-portfolio-bg-text', {
1376		x: '25%'
1377	});
1378
1379	gsap.timeline({
1380		scrollTrigger: {
1381			trigger: '.tp-portfolio-bg-text-animation',
1382			start: '-500 0%',
1383			end: 'bottom -10%',
1384			scrub: true,
1385			invalidateOnRefresh: true
1386		}
1387	})
1388		.to('.tp-portfolio-bg-text', {
1389			x: '-80%'
1390		});
1391
1392	gsap.timeline({
1393		scrollTrigger: {
1394			trigger: '.portfolio-list-scroll-text-animation',
1395			start: '-500 0%',
1396			end: 'bottom -10%',
1397			scrub: true,
1398			invalidateOnRefresh: true
1399		}
1400	})
1401		.to('.portfolio-list-scroll-text', {
1402			x: '-80%'
1403		});
1404
1405
1406		
1407	function mediaSize() {
1408
1409		if ($(window).width() > 1199) {
1410			console.log('hi')
1411			if ($('#pagepiling').length > 0) {
1412				
1413				$('#pagepiling').pagepiling({
1414					menu: '#onePageMenu',
1415					anchors: ['cases', 'about', 'services', 'projects', 'skills', 'testimonial', 'contact'],
1416					navigation: {
1417						'position': 'right',
1418						'tooltips': ['Cases', 'About', 'Services', 'Projects', 'Testimonial', 'Contact']
1419					},
1420					afterRender: function () {
1421						$('#pp-nav').addClass('custom');
1422						pageScrollIndecator();
1423					},
1424					onLeave: function () {
1425						pageScrollIndecator();
1426					},
1427					afterLoad: function (anchorLink, index) {
1428						if (index > 1) {
1429							$('#pp-nav').removeClass('custom');
1430						} else {
1431							$('#pp-nav').addClass('custom');
1432						}
1433
1434					}
1435				});
1436
1437				function pageScrollIndecator() {
1438					var allSection = $('#pagepiling .section');
1439					var sectionCount = parseInt(allSection.length);
1440
1441					var activeSection = $('#pagepiling').children('.section.active');
1442					var activeCount = allSection.index(activeSection);
1443
1444					var activeIndex = parseInt(activeCount) + 1;
1445					var scale = (activeIndex / sectionCount).toFixed(3);
1446
1447					$('.pagescroll-indication span').css({
1448						'transform': 'scaleY(' + scale + ')'
1449					});
1450				}
1451
1452			}
1453
1454		};
1455
1456		if (window.matchMedia('(min-width: 768px)').matches) {
1457			const panels = document.querySelectorAll('.col-custom')

1458			panels.forEach(panel => {
1459				panel.addEventListener('mouseenter', () => {
1460					removeActiveClasses()
1461					panel.classList.add('active')
1462				})
1463			})
1464
1465			function removeActiveClasses() {
1466				panels.forEach(panel => {
1467					panel.classList.remove('active')
1468				})
1469			}
1470		} else {
1471			$(".col-custom ").addClass("active");
1472		}
1473	}
1474	mediaSize();
1475	window.addEventListener('resize', mediaSize, false);
1476
1477
1478	// button effect
1479	var mouse = { x: 0, y: 0 };
1480	var pos = { x: 0, y: 0 };
1481	var ratio = 0.65;
1482	var active = false;
1483
1484	var allParalax = document.querySelectorAll('.parallax-wrap');
1485
1486	allParalax.forEach(function (e) {
1487		e.addEventListener("mousemove", mouseMoveBtn);
1488	})
1489
1490	function mouseMoveBtn(e) {
1491		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1492		mouse.x = e.pageX;
1493		mouse.y = e.pageY - scrollTop;
1494
1495	}
1496	gsap.ticker.add(updatePosition);
1497
1498	$(".parallax-wrap").mouseenter(function (e) {
1499		gsap.to(this, { duration: 0.3, scale: 2 });
1500		gsap.to($(this).children(), { duration: 0.3, scale: 0.5 });
1501		active = true;
1502	});
1503
1504	$(".parallax-wrap").mouseleave(function (e) {
1505		gsap.to(this, { duration: 0.3, scale: 1 });
1506		gsap.to($(this).children(), { duration: 0.3, scale: 1, x: 0, y: 0 });
1507		active = false;
1508	});
1509
1510	function updatePosition() {
1511		pos.x += (mouse.x - pos.x) * ratio;
1512		pos.y += (mouse.y - pos.y) * ratio;
1513
1514	}
1515
1516
1517	$(".parallax-wrap").mousemove(function (e) {
1518		parallaxCursorBtn(e, this, 2);
1519		callParallaxBtn(e, this);
1520	});
1521
1522	function callParallaxBtn(e, parent) {
1523		parallaxItBtn(e, parent, parent.querySelector(".parallax-element"), 20);
1524	}
1525
1526	function parallaxItBtn(e, parent, target, movement) {
1527		var boundingRect = parent.getBoundingClientRect();
1528		var relX = e.pageX - boundingRect.left;
1529		var relY = e.pageY - boundingRect.top;
1530		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1531
1532		gsap.to(target, {
1533			duration: 0.3,
1534			x: (relX - boundingRect.width / 2) / boundingRect.width * movement,
1535			y: (relY - boundingRect.height / 2 - scrollTop) / boundingRect.height * movement,
1536			ease: Power2.easeOut
1537		});
1538	}
1539
1540	function parallaxCursorBtn(e, parent, movement) {
1541		var rect = parent.getBoundingClientRect();
1542		var relX = e.pageX - rect.left;
1543		var relY = e.pageY - rect.top;
1544		var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1545		pos.x = rect.left + rect.width / 2 + (relX - rect.width / 2) / movement;
1546		pos.y = rect.top + rect.height / 2 + (relY - rect.height / 2 - scrollTop) / movement;
1547	}
1548
1549
1550	var moveSection = $(".tp-mouse-move-section");
1551	var moveSectionElements = $(".tp-mouse-move-element");
1552
1553	if (moveSection && moveSectionElements) {
1554		moveSection.on("mousemove", function (e) {
1555			var x = e.clientX
1556			var y = e.clientY
1557			let viewportWidth = window.innerWidth;
1558			let viewportHeight = window.innerHeight;
1559			let center = viewportWidth / 2
1560			let centerHeight = innerHeight / 2
1561
1562			if (x > center) {
1563				gsap.to(moveSectionElements, {
1564					x: 20,
1565					duration: 2,
1566					ease: "power4.out"
1567				})
1568			}
1569			else {
1570				gsap.to(moveSectionElements, {
1571					x: -20,
1572					scale: 1.1,
1573					duration: 2,
1574					ease: "power4.out"
1575				})
1576			}
1577			if (y > centerHeight) {
1578				gsap.to(moveSectionElements, {
1579					y: 5,
1580					duration: 2,
1581					ease: "power4.out"
1582				})
1583			}
1584			else {
1585				gsap.to(moveSectionElements, {
1586					y: -5,
1587					duration: 2,
1588					ease: "power4.out"
1589				})
1590			}
1591		});
1592	}
1593
1594
1595	// footer btn move
1596
1597	var footerBtnSection = $('.tp-mouse-move-btn-section');
1598	var footerBtn = $('.tp-mouse-move-btn');
1599
1600	footerBtnSection.on("mousemove", function (e) {
1601
1602		var x = e.clientX
1603		var y = e.clientY
1604		let viewportWidth = window.innerWidth;
1605		let viewportHeight = window.innerHeight;
1606		let center = viewportWidth / 2
1607		let centerHeight = innerHeight / 2
1608
1609		if (x > center) {
1610			gsap.to(footerBtn, {
1611				x: 100,
1612				duration: 2,
1613				ease: "power4.out"
1614			})
1615		}
1616		else {
1617			gsap.to(footerBtn, {
1618				x: -100,
1619				duration: 2,
1620				ease: "power4.out"
1621			})
1622		}
1623		if (y > centerHeight) {
1624			gsap.to(footerBtn, {
1625				y: 100,
1626				duration: 2,
1627				ease: "power4.out"
1628			})
1629		}
1630		else {
1631			gsap.to(footerBtn, {
1632				y: -100,
1633				duration: 2,
1634				ease: "power4.out"
1635			})
1636		}
1637
1638	})
1639

1640	// cursor
1641	if (!$('body').hasClass("hide-magic-cursor")) {
1642		var mouse = {
1643			x: 0,
1644			y: 0
1645		};
1646		var pos = {
1647			x: 0,
1648			y: 0
1649		};
1650		var ratio = 0.65;
1651
1652		var magicCursor = document.getElementById("awesome-cursor-circle");
1653
1654		gsap.set(magicCursor, { xPercent: -50, yPercent: -50, scale: 0.5, borderWidth: '4px' });
1655
1656		document.addEventListener("mousemove", mousemoveHandler);
1657
1658		function mousemoveHandler(e) {
1659
1660			let tl = gsap.timeline({
1661				defaults: {
1662					x: e.clientX,
1663					y: e.clientY,
1664				}
1665			})
1666
1667			tl.to(magicCursor, {
1668				ease: "power2.out"
1669			})
1670		}
1671
1672		$(".parallax-wrap").mouseenter(function (e) {
1673			gsap.to(this, { duration: 0.3, scale: 2 });
1674			gsap.to(magicCursor, { duration: 0.3, scale: 0.9, borderWidth: '2px', opacity: 1 });
1675			gsap.to($(this).children(), { duration: 0.3, scale: 0.5 });
1676			active = true;
1677		});
1678
1679		$(".parallax-wrap").mouseleave(function (e) {
1680			gsap.to(magicCursor, { duration: 0.3, scale: 0.5, borderWidth: '4px', opacity: 1, borderColor: 'rgba(255,255,255,.5)' });
1681			active = false;
1682		});
1683
1684		$(".parallax-wrap").mousemove(function (e) {
1685			parallaxCursor(e, this, 2);
1686			callParallax(e, this);
1687		});
1688
1689		function callParallax(e, parent) {
1690			parallaxIt(e, parent, parent.querySelector(".parallax-element"), 20);
1691		}
1692
1693		function parallaxIt(e, parent, target, movement) {
1694			var boundingRect = parent.getBoundingClientRect();
1695			var relX = e.pageX - boundingRect.left;
1696			var relY = e.pageY - boundingRect.top;
1697			var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1698
1699			gsap.to(target, {
1700				duration: 0.3,
1701				x: (relX - boundingRect.width / 2) / boundingRect.width * movement,
1702				y: (relY - boundingRect.height / 2 - scrollTop) / boundingRect.height * movement,
1703				ease: Power2.easeOut
1704			});
1705		}
1706
1707		function parallaxCursor(e, parent, movement) {
1708			var rect = parent.getBoundingClientRect();
1709			var relX = e.pageX - rect.left;
1710			var relY = e.pageY - rect.top;
1711			var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1712			pos.x = rect.left + rect.width / 2 + (relX - rect.width / 2) / movement;
1713			pos.y = rect.top + rect.height / 2 + (relY - rect.height / 2 - scrollTop) / movement;
1714			gsap.to(magicCursor, { duration: 0.3, x: pos.x, y: pos.y });
1715		}
1716	}
1717
1718	$('.tp-text-hover-effect nav ul li a').each(function () {
1719		var innerText = $(this).text();
1720		var elements = innerText.split('');
1721
1722		var $div = $('<div class="tp-text-hover-effect-word">');
1723
1724		for (var i = 0; i < elements.length; i++) {
1725			var element = elements[i];
1726			var divElement = $("<div class='char-wrapper'></div>");
1727			var divElement2 = $("<div class='single-char'></div>");
1728
1729
1730			if (' ' === elements[i]) {
1731				var $span = $('<span clas="hi">').html('&nbsp;').attr('data-hover', ' ');
1732			} else {
1733				var $span = $('<span>').text(element).attr('data-hover', element);
1734			}
1735
1736			divElement2.append($span);
1737			divElement.append(divElement2)
1738			$div.append(divElement);
1739		}
1740
1741		$(this).html($div);
1742	});
1743
1744	$('.tp-3dbtn-hover-effect a').each(function () {
1745		var innerText = $(this).text();
1746		var elementsWord = innerText.split(' ');
1747		var $div = $('<div class="tp-3dtext-hover-effect-word d-flex">');
1748
1749		for (let i = 0; i < elementsWord.length; i++) {
1750			const elements = elementsWord[i].split('');
1751
1752			for (let index = 0; index < elements.length + 1; index++) {
1753				var element = elements[index];
1754
1755				var divElement = $("<div class='char-wrapper'></div>");
1756				var divElement2 = $("<div class='single-char'></div>");
1757
1758				if (index == elements.length) {
1759					var $span = $('<span clas="hi">').html('&nbsp;').attr('data-hover', ' sfas');
1760				} else {
1761					var $span = $('<span>').text(element).attr('data-hover', element);
1762
1763				}
1764
1765				divElement2.append($span);
1766				divElement.append(divElement2)
1767				$div.append(divElement);
1768			}
1769
1770		}
1771		$(this).html($div);
1772	});
1773
1774	let tl = gsap.timeline();
1775
1776	let servicesSpanels = document.querySelectorAll('.services-panel')
1777
1778	servicesSpanels.forEach((section, index) => {
1779		tl.to(section, {
1780			scrollTrigger: {
1781				trigger: section,
1782				pin: section,
1783				scrub: 1,
1784				start: 'top 10%',
1785				end: "bottom 67%",
1786				endTrigger: '.services-panel-area',
1787				pinSpacing: false,
1788				markers: false,
1789			},
1790		})
1791	})
1792
1793
1794	if ($('.tp-service-3__area').length > 0) {
1795		let mm = gsap.matchMedia();
1796		mm.add("(min-width: 991px)", () => {
1797			gsap.to('.services-panel-pin', {
1798				opacity: 1,
1799				scrollTrigger: {
1800					trigger: '.tp-service-3__area',
1801					scrub: 1,
1802					start: 'top -7%',
1803					end: "bottom 63%",
1804					pin: '.services-panel-pin',
1805					markers: false,
1806				}
1807			})
1808		})
1809	}
1810
1811	if ($('.tp_title_anim').length > 0) {
1812		let splitTitleLines = gsap.utils.toArray(".tp_title_anim");

1813		splitTitleLines.forEach(splitTextLine => {
1814			const tl = gsap.timeline({
1815				scrollTrigger: {
1816					trigger: splitTextLine,
1817					start: 'top 90%',
1818					end: 'bottom 60%',
1819					scrub: false,
1820					markers: false,
1821					toggleActions: 'play none none none'
1822				}
1823			});
1824
1825			const itemSplitted = new SplitText(splitTextLine, { type: "words, lines" });
1826			gsap.set(splitTextLine, { perspective: 400 });
1827			itemSplitted.split({ type: "lines" })
1828			tl.from(itemSplitted.lines, {
1829				duration: 1,
1830				delay: 0.3,
1831				opacity: 0,
1832				rotationX: -80,
1833				force3D: true,
1834				transformOrigin: "top center -50",
1835				stagger: 0.1
1836			});
1837		});
1838	}
1839
1840
1841	if ($('.tp_text_anim p').length > 0) {
1842		let splitTextLines = gsap.utils.toArray(".tp_text_anim p");
1843
1844		splitTextLines.forEach(splitTextLine => {
1845			const tl = gsap.timeline({
1846				scrollTrigger: {
1847					trigger: splitTextLine,
1848					start: 'top 90%',
1849					duration: 2,
1850					end: 'bottom 60%',
1851					scrub: false,
1852					markers: false,
1853					toggleActions: 'play none none none'
1854				}
1855			});
1856
1857			const itemSplitted = new SplitText(splitTextLine, { type: "lines" });
1858			gsap.set(splitTextLine, { perspective: 400 });
1859			itemSplitted.split({ type: "lines" })
1860			tl.from(itemSplitted.lines, {
1861				duration: 1,
1862				delay: 0.7,
1863				opacity: 0,
1864				rotationX: -80,
1865				force3D: true,
1866				transformOrigin: "top center -50",
1867				stagger: 0.1
1868			});
1869		});
1870	}
1871
1872	// portfolio panel
1873	let otherSections = document.querySelectorAll('.portfolio-panel')
1874
1875	otherSections.forEach((section, index) => {
1876
1877		gsap.set(otherSections, {
1878			scale: 1
1879		});
1880
1881		tl.to(section, {
1882			scale: .8,
1883			scrollTrigger: {
1884				trigger: section,
1885				pin: section,
1886				scrub: 1,
1887				start: 'top 10%',
1888				end: "bottom 60%",
1889				endTrigger: '.tp-project-3__area',
1890				pinSpacing: false,
1891				markers: false,
1892			},
1893		})
1894	})
1895
1896
1897
1898
1899	if ($('.tp-personal-info-pin-section').length > 0) {
1900		let mm = gsap.matchMedia();
1901		mm.add("(min-width:991px)", () => {
1902			gsap.to('.tp-personal-info-pin', {
1903				opacity: 1,
1904				scrollTrigger: {
1905					trigger: '.tp-personal-info-pin-section',
1906					end: "bottom bottom",
1907					scrub: 1,
1908					start: 'top 10%',
1909					pin: '.tp-personal-info-pin',
1910					markers: false
1911				}
1912			})
1913		})
1914	}
1915
1916
1917	// blog sticky
1918
1919	let mm = gsap.matchMedia();
1920	mm.add("(min-width:991px)", () => {
1921		gsap.to('.tp-blog-sidebar-sticky', {
1922			scrollTrigger: {
1923				trigger: '.tp-blog-sidebar-sticky-area',
1924				scrub: 1,
1925				start: 'top 8%',
1926				end: "bottom 115%",
1927				pin: '.tp-blog-sidebar-sticky',
1928				markers: false
1929			}
1930		})
1931
1932	})
1933
1934	if ($('.tp-blog-social-sticky').length > 0) {
1935
1936		let mm = gsap.matchMedia();
1937		mm.add("(min-width:991px)", () => {
1938			gsap.to('.tp-blog-social-sticky', {
1939				scrollTrigger: {
1940					trigger: '.tp-blog-social-sticky-area',
1941					scrub: 1,
1942					start: 'top 10%',
1943					end: "bottom bottom",
1944					pin: '.tp-blog-social-sticky',
1945					markers: false
1946				}
1947			})
1948
1949		})
1950	}
1951
1952
1953	//home 1 line styles start
1954
1955	// for brand
1956	let allHorizontalLine = document.querySelectorAll('.tp-brand-border');
1957
1958	allHorizontalLine.forEach((line, index) => {
1959		gsap.set(line, {
1960			width: 0
1961		});
1962		gsap.to(line, {
1963			scrollTrigger: {
1964				trigger: line,
1965				start: 'top 80%',
1966				end: "bottom 80%",
1967				markers: false,
1968			},
1969			width: "100%"
1970		});
1971	});
1972
1973	let allVerticalLine = document.querySelectorAll('.tp-brand-inner-border');
1974
1975	allVerticalLine.forEach((line, index) => {
1976		gsap.set(line, {
1977			height: 0
1978		});
1979		gsap.to(line, {
1980			scrollTrigger: {
1981				trigger: line,
1982				start: 'top 80%',
1983				end: "bottom 80%",
1984			},
1985			height: "100%"
1986		});
1987	});
1988
1989	// for services
1990	let allServicesHorizontalBorder = document.querySelectorAll('.tp-services-inner-border');
1991
1992	allServicesHorizontalBorder.forEach((line, index) => {
1993		gsap.set(line, {
1994			height: 0
1995		});
1996		gsap.to(line, {
1997			scrollTrigger: {
1998				trigger: line,
1999				start: 'top 60%',
2000				end: "bottom 80%",
2001			},
2002			height: "100%"
2003		});
2004	});
2005
2006	// services accordion
2007	let allServicesAccordion = document.querySelectorAll('.tp-services-accordion-border');
2008
2009	allServicesAccordion.forEach((line, index) => {
2010		gsap.set(line, {
2011			height: 0
2012		});
2013		gsap.to(line, {
2014			scrollTrigger: {
2015				trigger: line,
2016				start: 'top 60%',
2017				end: "bottom 80%",
2018			},
2019			height: "100%"
2020		});
2021	});
2022
2023
2024	// services accordion
2025	let allServicesAccordionItem = document.querySelectorAll('.accordion-item-border');
2026
2027	allServicesAccordionItem.forEach((line, index) => {
2028		gsap.set(line, {
2029			width: 0
2030		});
2031		gsap.to(line, {
2032			scrollTrigger: {
2033				trigger: '.tp-services-accordion',
2034				start: 'top 40%',
2035				end: "bottom 80%",
2036			},
2037			width: "100%"
2038		});
2039	});
2040
2041
2042	// services accordion
2043	let aboutLine = document.querySelectorAll('.tp-about-inner-border');
2044
2045	aboutLine.forEach((line, index) => {
2046		gsap.set(line, {
2047			width: 0
2048		});
2049		gsap.to(line, {
2050			scrollTrigger: {
2051				trigger: '.tp-about-inner',
2052				start: 'top 40%',
2053				end: "bottom 80%",
2054				markers: false,
2055			},
2056			width: "100%"
2057		});
2058	});
2059
2060
2061	// services accordion
2062	let awardtLine_2 = document.querySelectorAll('.tp-award-bottom-border');
2063
2064	awardtLine_2.forEach((line, index) => {
2065		gsap.set(line, {
2066			width: 0
2067		});
2068		gsap.to(line, {
2069			scrollTrigger: {
2070				trigger: '.tp-award-bottom-border',
2071				start: 'top 90%',
2072				end: "bottom 80%",
2073				markers: false,
2074			},
2075			width: "100%"
2076		});
2077	});
2078
2079
2080	// services accordion
2081	let award_tLine_3 = document.querySelectorAll('.tp-award-inner-border');
2082
2083	award_tLine_3.forEach((line, index) => {
2084		gsap.set(line, {
2085			width: 0
2086		});
2087		gsap.to(line, {
2088			scrollTrigger: {
2089				trigger: '.tp-award-inner-border',
2090				start: 'top 90%',
2091				end: "bottom 80%",
2092				markers: false,
2093			},
2094			width: "100%"
2095		});
2096	});
2097
2098	// services accordion
2099	let testi_Line_1 = document.querySelectorAll('.tp-testimonial-user-border');
2100

2101	testi_Line_1.forEach((line, index) => {
2102		gsap.set(line, {
2103			width: 0
2104		});
2105		gsap.to(line, {
2106			scrollTrigger: {
2107				trigger: '.tp-testimonial-user-border',
2108				start: 'top 90%',
2109				end: "bottom 80%",
2110				markers: false,
2111			},
2112			width: "100%"
2113		});
2114	});
2115
2116	// services accordion
2117	let footer_Line_1 = document.querySelectorAll('.tp-footer-anim-border');
2118
2119	footer_Line_1.forEach((line, index) => {
2120		gsap.set(line, {
2121			width: 0
2122		});
2123		gsap.to(line, {
2124			scrollTrigger: {
2125				trigger: '.tp-footer-anim-border',
2126				start: 'top 90%',
2127				end: "bottom 80%",
2128				markers: false,
2129			},
2130			width: "100%"
2131		});
2132	});
2133
2134
2135	if ($('.tp-header-area').length > 0) {
2136		// Testimonial 3 Image Animation
2137		gsap.set(".tp-header-border", { width: 0, });
2138
2139		gsap.to(".tp-header-border", {
2140			scrollTrigger: {
2141				trigger: ".tp-header-area",
2142				start: "center center",
2143				markers: false
2144			},
2145			duration: 1,
2146			ease: "none",
2147			width: "100%",
2148		})
2149
2150	}
2151
2152
2153	if ($('.tp-btn-trigger').length > 0) {
2154
2155		gsap.set(".tp-btn-bounce", { y: -150, opacity: 0 });
2156		var mybtn = gsap.utils.toArray(".tp-btn-bounce");
2157		mybtn.forEach((btn) => {
2158			var $this = $(btn);
2159			gsap.to(btn, {
2160				scrollTrigger: {
2161					trigger: $this.closest('.tp-btn-trigger'),
2162					start: "top center",
2163					markers: false
2164				},
2165				duration: 1.5,
2166				delay: 1,
2167				ease: "bounce.out",
2168				y: 0,
2169				opacity: 1,
2170			})
2171		});
2172
2173	}
2174
2175	if ($('.tp-btn-trigger-2').length > 0) {
2176
2177		gsap.set(".tp-btn-bounce-2", { y: -100, opacity: 0 });
2178		var mybtn = gsap.utils.toArray(".tp-btn-bounce-2");
2179		mybtn.forEach((btn) => {
2180			var $this = $(btn);
2181			gsap.to(btn, {
2182				scrollTrigger: {
2183					trigger: $this.closest('.tp-btn-trigger-2'),
2184					start: "bottom bottom",
2185					markers: false
2186				},
2187				duration: 1,
2188				ease: "bounce.out",
2189				y: 0,
2190				opacity: 1,
2191			})
2192		});
2193
2194	}
2195
2196	if ($('.tp-btn-trigger-3').length > 0) {
2197
2198		gsap.set(".tp-btn-bounce-3", { y: -100, opacity: 0 });
2199		var mybtn = gsap.utils.toArray(".tp-btn-bounce-3");
2200		mybtn.forEach((btn) => {
2201			var $this = $(btn);
2202			gsap.to(btn, {
2203				scrollTrigger: {
2204					trigger: $this.closest('.tp-btn-trigger-3'),
2205					start: "-20% 20%",
2206					markers: false
2207				},
2208				duration: 1,
2209				delay: 1.2,
2210				ease: "bounce.out",
2211				y: 0,
2212				opacity: 1,
2213			})
2214		});
2215
2216	}
2217
2218	if ($('.tp-char-animation').length > 0) {
2219		// 25. Title Animation
2220		let char_come = gsap.utils.toArray(".tp-char-animation");
2221		char_come.forEach(splitTextLine => {
2222			const tl = gsap.timeline({
2223				scrollTrigger: {
2224					trigger: splitTextLine,
2225					start: 'top 90%',
2226					end: 'bottom 60%',
2227					scrub: false,
2228					markers: false,
2229					toggleActions: 'play none none none'
2230				}
2231			});
2232
2233			const itemSplitted = new SplitText(splitTextLine, { type: "chars, words" });
2234			gsap.set(splitTextLine, { perspective: 300 });
2235			itemSplitted.split({ type: "chars, words" })
2236			tl.from(itemSplitted.chars,
2237				{
2238					duration: 1,
2239					delay: 0.5,
2240					x: 100,
2241					autoAlpha: 0,
2242					stagger: 0.05
2243				});
2244		});
2245	}
2246
2247	if ($('.tp-hero-3__title span').length > 0) {
2248
2249		gsap.set(".tp-hero-3__title span", { scale: .5, opacity: 0 });
2250		gsap.to(".tp-hero-3__title span", {
2251			scrollTrigger: {
2252				trigger: ".tp-hero-3__title",
2253				start: "center center",
2254				markers: false
2255			},
2256			duration: 1.3,
2257			delay: 1,
2258			ease: "none",
2259			scale: 1,
2260			opacity: 1,
2261		})
2262
2263	}
2264
2265	if ($('.contact-inner__title span').length > 0) {
2266
2267		gsap.set(".contact-inner__title span", { scale: 0, opacity: 0 });
2268		gsap.to(".contact-inner__title span", {
2269			scrollTrigger: {
2270				trigger: ".contact-inner__title",
2271				start: "center center",
2272				markers: false
2273			},
2274			duration: 1.3,
2275			delay: 1.2,
2276			ease: "none",
2277			scale: 1,
2278			opacity: 1,
2279		})
2280
2281	}
2282
2283
2284	if ($('.tp_wrap_anim').length > 0) {
2285		// 25. Title Animation
2286		let char_come = gsap.utils.toArray(".tp_wrap_anim p");
2287		char_come.forEach(splitTextLine => {
2288			const tl = gsap.timeline({
2289				scrollTrigger: {
2290					trigger: splitTextLine,
2291					start: 'top 90%',
2292					end: 'bottom 60%',
2293					scrub: false,
2294					markers: false,
2295					toggleActions: 'play none none none'
2296				}
2297			});
2298
2299			const itemSplitted = new SplitText(splitTextLine, { type: "chars, words" });
2300			gsap.set(splitTextLine, { perspective: 300 });
2301			itemSplitted.split({ type: "chars, words" })
2302			tl.from(itemSplitted.words,
2303				{
2304					duration: 1,
2305					delay: 1,
2306					x: 100,
2307					autoAlpha: 0,
2308					stagger: 0.05
2309				});
2310		});
2311	}
2312
2313
2314	var text_slider_option = document.querySelector(".tp-text-slider-4-active");
2315	if (text_slider_option) {
2316
2317		var text_slider_speed = 300000
2318		var text_slider_autoplay = true
2319		var loop_value = true
2320		var data_itemshow = "auto"
2321

2322		if (text_slider_option.getAttribute("data-sliderSpeed")) {
2323			text_slider_speed = parseInt(text_slider_option.getAttribute("data-sliderSpeed"));
2324		}
2325		if (text_slider_option.getAttribute("data-autoPlay")) {
2326			text_slider_autoplay = text_slider_option.getAttribute("data-autoPlay")
2327		}
2328
2329		if (text_slider_option.getAttribute("data-loop")) {
2330			loop_value = text_slider_option.getAttribute("data-loop")
2331		}
2332		if (text_slider_option.getAttribute("data-itemShow")) {
2333			data_itemshow = text_slider_option.getAttribute("data-itemShow")
2334		}
2335
2336
2337		if (text_slider_autoplay == 'true') {
2338			var text_slider = new Swiper(".tp-text-slider-4-active", {
2339				loop: loop_value,
2340				speed: text_slider_speed,
2341				allowTouchMove: false,
2342				slidesPerView: data_itemshow,
2343				slidesPerGroup: 10,
2344				spaceBetween: 20,
2345				autoplay: {
2346					delay: 0,
2347					disableOnInteraction: true,
2348				}
2349			});
2350		}
2351		else {
2352			var text_slider = new Swiper(".tp-text-slider-4-active", {
2353				loop: loop_value,
2354				speed: text_slider_speed,
2355				allowTouchMove: false,
2356				slidesPerView: data_itemshow,
2357				slidesPerGroup: 10,
2358				spaceBetween: 20,
2359				autoplay: false,
2360			});
2361		}
2362	};
2363
2364
2365	var text_slider_option = document.querySelector(".tp-footer-5-slide-active");
2366
2367	if (text_slider_option) {
2368
2369		var text_slider_speed = 2000000
2370		var text_slider_autoplay = true
2371		var loop_value = true
2372		var data_itemshow = "auto"
2373
2374		if (text_slider_option.getAttribute("data-sliderSpeed")) {
2375			text_slider_speed = parseInt(text_slider_option.getAttribute("data-sliderSpeed"));
2376		}
2377		if (text_slider_option.getAttribute("data-autoPlay")) {
2378			text_slider_autoplay = text_slider_option.getAttribute("data-autoPlay")
2379		}
2380
2381		if (text_slider_option.getAttribute("data-loop")) {
2382			loop_value = text_slider_option.getAttribute("data-loop")
2383		}
2384		if (text_slider_option.getAttribute("data-itemShow")) {
2385			data_itemshow = text_slider_option.getAttribute("data-itemShow")
2386		}
2387
2388
2389		if (text_slider_autoplay == 'true') {
2390			var text_slider = new Swiper(".tp-footer-5-slide-active", {
2391				loop: loop_value,
2392				speed: text_slider_speed,
2393				allowTouchMove: false,
2394				slidesPerView: data_itemshow,
2395				slidesPerGroup: 10,
2396				spaceBetween: 20,
2397				autoplay: {
2398					delay: 0,
2399					disableOnInteraction: true,
2400				}
2401			});
2402		}
2403		else {
2404			var text_slider = new Swiper(".tp-footer-5-slide-active", {
2405				loop: loop_value,
2406				speed: text_slider_speed,
2407				allowTouchMove: false,
2408				slidesPerView: data_itemshow,
2409				slidesPerGroup: 10,
2410				spaceBetween: 20,
2411				autoplay: false,
2412			});
2413		}
2414	};
2415
2416
2417	$('.tp-project-5-title-wrap .tp-project-5-title-box').on("mouseenter", function () {
2418		$('#tp-project-5-thumb-wrap').removeClass().addClass($(this).attr('rel'));
2419		$(this).addClass('active').siblings().removeClass('active');
2420	});
2421
2422
2423	if ($('.tp-project-5-2-area').length > 0) {
2424		let project_text = gsap.timeline({
2425			scrollTrigger: {
2426				trigger: ".tp-project-5-2-area",
2427				start: 'top center-=350',
2428				end: "bottom 150%",
2429				pin: ".tp-project-5-2-title",
2430				markers: false,
2431				pinSpacing: false,
2432				scrub: 1,
2433			}
2434		})
2435		project_text.set(".tp-project-5-2-title", {
2436			scale: .6,
2437			duration: 2
2438		})
2439		project_text.to(".tp-project-5-2-title", {
2440			scale: 1,
2441			duration: 2
2442		})
2443		project_text.to(".tp-project-5-2-title", {
2444			scale: 1,
2445			duration: 2
2446		}, "+=2")
2447	}
2448
2449
2450
2451	if ($('#showcase-slider-main').length > 0) {
2452
2453		const showcaseSwiper = new Swiper('#showcase-slider', {
2454			direction: "horizontal",
2455			loop: true,
2456			slidesPerView: 'auto',
2457			touchStartPreventDefault: false,
2458			speed: 1000,
2459			effect: 'fade',
2460			autoplay: {
2461				delay: 5000
2462			},
2463			mousewheel: true,
2464			simulateTouch: true,
2465			navigation: {
2466				clickable: true,
2467				nextEl: '.swiper-next',
2468				prevEl: '.swiper-prev',
2469			},
2470			pagination: {
2471				el: '.tp-slider-dot',
2472				clickable: true,
2473				renderBullet: function (index, className) {
2474					return '<div class="' + className + '"></div>';
2475				},
2476			},
2477			on: {
2478				slidePrevTransitionStart: function () {
2479
2480					$('.tp-slider-dot').find('.swiper-pagination-bullet').each(function () {
2481						if (!$(this).hasClass("swiper-pagination-bullet-active")) {
2482							$('#trigger-slides .swiper-slide-active').find('div').first().each(function () {
2483								if (!$(this).hasClass("active")) {
2484									$(this).trigger('click');
2485								}
2486							});
2487
2488							$('#trigger-slides .swiper-slide-duplicate-active').find('div').first().each(function () {
2489								if (!$(this).hasClass("active")) {
2490									$(this).trigger('click');
2491								}
2492							});
2493						}
2494					});
2495
2496				},
2497				slideNextTransitionStart: function () {
2498

2499					$('.tp-slider-dot').find('.swiper-pagination-bullet').each(function () {
2500						if (!$(this).hasClass("swiper-pagination-bullet-active")) {
2501							$('#trigger-slides .swiper-slide-active').find('div').first().each(function () {
2502								if (!$(this).hasClass("active")) {
2503									$(this).trigger('click');
2504								}
2505							});
2506
2507							$('#trigger-slides .swiper-slide-duplicate-active').find('div').first().each(function () {
2508								if (!$(this).hasClass("active")) {
2509									$(this).trigger('click');
2510								}
2511							});
2512						}
2513					});
2514
2515				}
2516			},
2517		});
2518
2519		var vertex = 'varying vec2 vUv; void main() {  vUv = uv;  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );	}';
2520		var fragment = `
2521			varying vec2 vUv;
2522		
2523			uniform sampler2D currentImage;
2524			uniform sampler2D nextImage;
2525			uniform sampler2D disp;
2526			uniform float dispFactor;
2527			uniform float effectFactor;
2528			uniform vec4 resolution;
2529		
2530			void main() {
2531		
2532				vec2 uv = (vUv - vec2(0.5))*resolution.zw + vec2(0.5);
2533		
2534				vec4 disp = texture2D(disp, uv);
2535				vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
2536				vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);
2537				vec4 _currentImage = texture2D(currentImage, distortedPosition);
2538				vec4 _nextImage = texture2D(nextImage, distortedPosition2);
2539				vec4 finalTexture = mix(_currentImage, _nextImage, dispFactor);
2540		
2541				gl_FragColor = finalTexture; }
2542		
2543			`;
2544
2545		var gl_canvas = new WebGL({
2546			vertex: vertex,
2547			fragment: fragment,
2548		});
2549
2550		var addEvents = function () {
2551
2552			var triggerSlide = Array.from(document.getElementById('trigger-slides').querySelectorAll('.slide-wrap'));
2553			gl_canvas.isRunning = false;
2554
2555			triggerSlide.forEach((el) => {
2556
2557				el.addEventListener('click', function () {
2558
2559					if (!gl_canvas.isRunning) {
2560
2561						gl_canvas.isRunning = true;
2562
2563						document.getElementById('trigger-slides').querySelectorAll('.active')[0].className = '';
2564						this.className = 'active';
2565
2566						var slideId = parseInt(this.dataset.slide, 10);
2567
2568						gl_canvas.material.uniforms.nextImage.value = gl_canvas.textures[slideId];
2569						gl_canvas.material.uniforms.nextImage.needsUpdate = true;
2570
2571						gsap.to(gl_canvas.material.uniforms.dispFactor, {
2572							duration: 1,
2573							value: 1,
2574							ease: 'Sine.easeInOut',
2575							onComplete: function () {
2576								gl_canvas.material.uniforms.currentImage.value = gl_canvas.textures[slideId];
2577								gl_canvas.material.uniforms.currentImage.needsUpdate = true;
2578								gl_canvas.material.uniforms.dispFactor.value = 0.0;
2579								gl_canvas.isRunning = false;
2580							}
2581						});
2582
2583					}
2584
2585				});
2586
2587			});
2588
2589		};
2590
2591		addEvents();
2592	}
2593
2594
2595	var portfolio_slider = new Swiper('.portfolio-slider-2-active', {
2596		spaceBetween: 80,
2597		slidesPerView: 3,
2598		centeredSlides: true,
2599		loop: true,
2600		mousewheel: true,
2601		speed: 700,
2602		centerMode: true,
2603		keyboard: {
2604			enabled: true,
2605		},
2606		breakpoints: {
2607			'1400': {
2608				slidesPerView: 2,
2609			},
2610			'1200': {
2611				slidesPerView: 2,
2612			},
2613			'992': {
2614				slidesPerView: 1,
2615				centeredSlides: false,
2616			},
2617			'768': {
2618				slidesPerView: 1,
2619			},
2620			'576': {
2621				slidesPerView: 1,
2622			},
2623			'0': {
2624				slidesPerView: 1,
2625			},
2626		},
2627		// scrollbar
2628		scrollbar: {
2629			el: ".tp-scrollbar",
2630			clickable: true,
2631		},
2632
2633	});
2634
2635	var portfolio_slider_2 = new Swiper('.portfolio-slider-3-active', {
2636		spaceBetween: 30,
2637		slidesPerView: 4,
2638		loop: true,
2639		mousewheel: true,
2640		speed: 700,
2641		keyboard: {
2642			enabled: true,
2643		},
2644		breakpoints: {
2645			'1400': {
2646				slidesPerView: 4,
2647			},
2648			'1200': {
2649				slidesPerView: 4,
2650			},
2651			'992': {
2652				slidesPerView: 3,
2653			},
2654			'768': {
2655				slidesPerView: 2,
2656			},
2657			'576': {
2658				slidesPerView: 1,
2659			},
2660			'0': {
2661				slidesPerView: 1,
2662			},
2663		},
2664
2665		// scrollbar
2666		scrollbar: {
2667			el: ".tp-scrollbar",
2668			clickable: true,
2669		},
2670
2671	});
2672
2673	if ($('.tp-port-3-area').length > 0) {
2674		let mm = gsap.matchMedia();
2675		mm.add("(min-width: 1199px)", () => {
2676			ScrollTrigger.create({
2677				trigger: ".tp-port-3-area",
2678				start: "top -60%",
2679				end: "bottom 120%",
2680				pin: ".tp-port-3-content-left",
2681				pinSpacing: false,
2682			});
2683		})
2684	}
2685
2686	// Text Invert With Scroll 
2687	const split = new SplitText(".tp_text_invert, .tp_text_invert_2", { type: "lines" });
2688