/* ================================================================= * Template Master JS * * Template: Tank - Creative Portfolio Showcase HTML Website Template * Author: Themetorium * URL: https://themetorium.net/ * ================================================================= */ // Table of Content // ================= // Detect browser // Detect mobile device // Page transitions // Smooth Scrollbar // Magic cursor // Image lazy loading // Header tools // Main menu (classic) // Overlay menu // tt-Search // Portfolio slider (full screen slider) // Portfolio carousel (full screen carousel) // Content carousel // Testimonials slider // Isotope // lightGallery (lightbox plugin) // Page header // GSAP ScrollTrigger plugin // Portfolio list // Portfolio interactive // Portfolio grid // tt-Gallery // tt-Accordion // tt-Tabs // Page nav // Sidebar // Sliding sidebar // Scrolling text // Scroll between anchors // Scroll to top // Defer videos (Youtube, Vimeo) // Forms // Miscellaneous // (function ($) { 'use strict'; // ======================================== // Detect browser and add class to
if "tt-header-fixed" enabled. if ($("#tt-header").hasClass("tt-header-fixed")) { $("body").addClass("tt-header-fixed-on"); } // On menu toggle button click // ============================ var $olMenuToggleBtn = $(".tt-ol-menu-toggle-btn-text, .tt-ol-menu-toggle-btn"); $olMenuToggleBtn.on("click", function() { $("html").toggleClass("tt-no-scroll"); $("body").toggleClass("tt-ol-menu-open"); if ($("body").hasClass("tt-ol-menu-open")) { // Menu step in animations // ======================== $("body").addClass("olm-toggle-no-click"); // Disable toggle button click until the animations last. var tl_olMenuIn = gsap.timeline({ onComplete: function() { $("body").removeClass("olm-toggle-no-click"); } }); tl_olMenuIn.to(".tt-overlay-menu", { duration: 0.4, autoAlpha: 1 }); tl_olMenuIn.from(".tt-ol-menu-list > li", { duration: 0.4, y: 80, autoAlpha: 0, stagger: 0.05, ease: Power2.easeOut, clearProps:"all" }); // On menu link click $(".tt-overlay-menu a, .tt-logo a") .not('[target="_blank"]') // omit from selection .not('[href^="#"]') // omit from selection .not('[href^="mailto"]') // omit from selection .not('[href^="tel"]') // omit from selection .on('click', function() { gsap.set("#content-wrap, .ttgr-cat-nav", { autoAlpha: 0 }); // Hide before timeline var tl_olMenuClick = gsap.timeline(); tl_olMenuClick.to(".tt-ol-menu-list > li", { duration: 0.4, y: -80, autoAlpha: 0, stagger: 0.05, ease: Power2.easeIn }); }); // Hide sliding sidebar if ($(".tt-sliding-sidebar-wrap").length) { gsap.to(".tt-sliding-sidebar-trigger", { duration: 1, autoAlpha: 0, ease: Expo.easeOut }); } } else { // Menu step out animations // ========================= $("body").addClass("olm-toggle-no-click"); // Disable toggle button click until the animations last. var tl_olMenuOut = gsap.timeline({ onComplete: function() { $("body").removeClass("olm-toggle-no-click"); } }); tl_olMenuOut.to(".tt-ol-menu-list > li", { duration: 0.4, y: -80, autoAlpha: 0, stagger: 0.05, ease: Power2.easeIn }); tl_olMenuOut.to(".tt-overlay-menu", { duration: 0.4, autoAlpha: 0, clearProps:"all" }, "+=0.2"); tl_olMenuOut.set(".tt-ol-menu-list > li", { clearProps:"all" }); // clearProps only // Show sliding sidebar if ($(".tt-sliding-sidebar-wrap").length) { gsap.to(".tt-sliding-sidebar-trigger", { duration: 1, autoAlpha: 1, ease: Expo.easeOut, clearProps:"all" }, "-=0.3"); } // Close open submenus setTimeout(function () { $(".tt-ol-submenu").slideUp(350); $(".tt-ol-submenu-trigger").removeClass("tt-ol-submenu-open"); }, 500); } return false; }); // Menu list hover $(".tt-ol-menu-list").on("mouseenter", function() { $(this).addClass("tt-ol-menu-hover"); }).on("mouseleave", function() { $(this).removeClass("tt-ol-menu-hover"); }); // Open submenu if link href contains # $(".tt-ol-submenu-trigger > a").on("click", function() { if ($(this).is('[href^="#"]')) { var $this = $(this).parent(); if ($this.hasClass("tt-ol-submenu-open")) { $this.removeClass("tt-ol-submenu-open"); $this.next().slideUp(350); } else { $this.parent().parent().find(".tt-ol-submenu").prev().removeClass("tt-ol-submenu-open"); $this.parent().parent().find(".tt-ol-submenu").slideUp(350); $this.toggleClass("tt-ol-submenu-open"); $this.next().slideToggle(350); } } return false; }); // Open submenu on caret click $(".tt-ol-submenu-caret-wrap").on("click", function() { var $this = $(this).parent(); if ($this.hasClass("tt-ol-submenu-open")) { $this.removeClass("tt-ol-submenu-open"); $this.next().slideUp(350); } else { $this.parent().parent().find(".tt-ol-submenu").prev().removeClass("tt-ol-submenu-open"); $this.parent().parent().find(".tt-ol-submenu").slideUp(350); $this.toggleClass("tt-ol-submenu-open"); $this.next().slideToggle(350); } }); // ================================== // tt-Search // ================================== if ($(".tt-search").length) { // Append tt-Search $(".tt-search").appendTo("#body-inner"); // Open tt-Search $(".tt-search-trigger").on("click", function() { $("body").addClass("tt-search-open"); var tl_ttSearchIn = gsap.timeline(); tl_ttSearchIn.to(".tt-search", { duration: 0.4, autoAlpha: 1 }); tl_ttSearchIn.from(".tt-search-appear", { duration: 0.5, y: 80, autoAlpha: 0, stagger: 0.1, ease: Power2.easeOut, clearProps:"all" }, "+=0.1"); }); // Close tt-Search $(".tt-search-close, .tt-search-close-btn").on("click", function() { $("body").removeClass("tt-search-open"); var tl_ttSearchOut = gsap.timeline(); tl_ttSearchOut.to(".tt-search-appear", { duration: 0.5, y: -80, autoAlpha: 0, stagger: 0.05, ease: Power2.easeIn }); tl_ttSearchOut.to(".tt-search", { duration: 0.4, autoAlpha: 0, clearProps:"all" }, "+=0.2"); tl_ttSearchOut.to(".tt-search-appear", { clearProps:"all" }); }); } // ======================================================================================= // Portfolio slider (full screen slider) // Source: https://swiperjs.com/ // ======================================================================================= if ($(".tt-portfolio-slider").length) { $(".tt-portfolio-slider").each(function() { var $ttPortfolioSlider = $(this); // Data attributes // ================ var $dataMousewheel = $ttPortfolioSlider.data("mousewheel"); var $dataKeyboard = $ttPortfolioSlider.data("keyboard"); var $dataSimulateTouch = $ttPortfolioSlider.data("simulate-touch"); var $dataGrabCursor = $ttPortfolioSlider.data("grab-cursor"); var $dataAutoplay = $ttPortfolioSlider.data("autoplay") ? { delay: $ttPortfolioSlider.data("autoplay"),} : $ttPortfolioSlider.data("autoplay"); var $dataLoop = $ttPortfolioSlider.data("loop") ? { loopedSlides: 100, } : $ttPortfolioSlider.data("loop"); // Not recommended! if ($ttPortfolioSlider.is("[data-speed]")) { var $dataSpeed = $ttPortfolioSlider.data("speed"); } else { var $dataSpeed = 900; // by default } if ($ttPortfolioSlider.is("[data-pagination-type]")) { var $dataPaginationType = $ttPortfolioSlider.data("pagination-type"); } else { var $dataPaginationType = "fraction"; // by default (bullets/fraction/progressbar) } // Init Swiper // ============= var $ttPortfolioSliderSwiper = new Swiper ($ttPortfolioSlider.find(".swiper")[0], { // Parameters direction: "horizontal", effect: "slide", speed: 600, // slider speed for smaller screens (when window width is 1024px or smaller) parallax: true, resistanceRatio: 0, longSwipesRatio: 0.02, preloadImages: false, // Needed for lazy loading preventInteractionOnTransition: true, // No actions during transition autoplay: $dataAutoplay, mousewheel: $dataMousewheel, keyboard: $dataKeyboard, simulateTouch: $dataSimulateTouch, grabCursor: $dataGrabCursor, loop: $dataLoop, // Not recommended! breakpoints: { // when window width is 1025px or larger 1025: { speed: $dataSpeed, } }, // Lazy loading lazy: { loadPrevNext: true, loadOnTransitionStart: true, }, // Navigation arrows navigation: { nextEl: $ttPortfolioSlider.find(".tt-ps-nav-arrow-next")[0], prevEl: $ttPortfolioSlider.find(".tt-ps-nav-arrow-prev")[0], disabledClass: "tt-ps-nav-arrow-disabled", }, // Pagination pagination: { el: $ttPortfolioSlider.find(".tt-ps-nav-pagination")[0], type: $dataPaginationType, modifierClass: "tt-ps-nav-pagination-", dynamicBullets: true, dynamicMainBullets: 1, clickable: true, }, // Events on: { init: function () { var $this = this; var $slideActive = $($this.slides[$this.activeIndex]); // Play video on load $slideActive.find("video").each(function() { $(this).get(0).play(); }); // Portfolio slider caption on load // --------------------------------- // Portfolio slider caption title (if contains link or not) if ($ttPortfolioSlider.find(".tt-ps-caption-title").find("a").length) { $ttPortfolioSlider.find(".tt-ps-caption-title a").text($slideActive.attr("data-title")); $ttPortfolioSlider.find(".tt-ps-caption-title a").attr("href", $slideActive.attr("data-url")); } else { $ttPortfolioSlider.find(".tt-ps-caption-title").text($slideActive.attr("data-title")); } // Portfolio slider caption category on load $ttPortfolioSlider.find(".tt-ps-caption-category").text($slideActive.attr("data-category")); }, transitionStart: function () { var $this = this; var $slideActive = $($this.slides[$this.activeIndex]); // If slider image is light setTimeout(function(){ if ($slideActive.hasClass("psi-image-is-light")) { $("body").addClass("psi-light-image-on"); } else { $("body").removeClass("psi-light-image-on"); } }, 400); // Play video $slideActive.find("video").each(function() { $(this).get(0).play(); }); // Animate portfolio slider caption gsap.fromTo($ttPortfolioSlider.find(".tt-psc-elem"), { autoAlpha: 1, y: 0 }, { duration: 0.25, autoAlpha: 0, y: -30, stagger: 0.15, ease: Power1.easeIn }); }, transitionEnd: function () { var $this = this; var $slideActive = $($this.slides[$this.activeIndex]); // Pause video $slideActive.prevAll().find("video").each(function() { $(this).get(0).pause(); }); $slideActive.nextAll().find("video").each(function() { $(this).get(0).pause(); }); // Portfolio slider caption // ------------------------- // Portfolio slider caption title (if contains link or not) if ($ttPortfolioSlider.find(".tt-ps-caption-title").find("a").length) { $ttPortfolioSlider.find(".tt-ps-caption-title a").text($slideActive.attr("data-title")); $ttPortfolioSlider.find(".tt-ps-caption-title a").attr("href", $slideActive.attr("data-url")); } else { $ttPortfolioSlider.find(".tt-ps-caption-title").text($slideActive.attr("data-title")); } // Portfolio slider caption category $ttPortfolioSlider.find(".tt-ps-caption-category").text($slideActive.attr("data-category")); // Animate portfolio slider caption gsap.fromTo($ttPortfolioSlider.find(".tt-psc-elem"), { autoAlpha: 0, y: 30 }, { duration: 0.25, autoAlpha: 1, y: 0, stagger: 0.15, ease: Power1.easeOut }); } } }); // Parallax effect on mouse move (no effect on mobile devices!) // ------------------------------ if(!isMobile) { if ($ttPortfolioSlider.data("parallax-mouse-move")) { gsap.set($ttPortfolioSlider.find(".tt-psi-image"), { scale: 1.05 }); $ttPortfolioSlider.mousemove(function(e) { parallaxIt(e, $ttPortfolioSlider.find(".tt-psi-image"), -25); // Parallax element parallaxIt(e, $ttPortfolioSlider.find(".tt-ps-caption-inner"), -35); // Parallax element }); function parallaxIt(e, target, movement) { var $this = $ttPortfolioSlider var relX = e.pageX - $this.offset().left; var relY = e.pageY - $this.offset().top; gsap.to(target, { duration: 1, x: (relX - $this.width() / 2) / $this.width() * movement, y: (relY - $this.height() / 2) / $this.height() * movement }); } } } }); } // ======================================================================================= // Portfolio carousel (full screen carousel) // Source: https://swiperjs.com/ // ======================================================================================= if ($(".tt-portfolio-carousel").length) { $(".tt-portfolio-carousel").each(function() { var $ttPortfolioCarousel = $(this); // Data attributes // ================ var $dataMousewheel = $ttPortfolioCarousel.data("mousewheel"); var $dataKeyboard = $ttPortfolioCarousel.data("keyboard"); var $dataSimulateTouch = $ttPortfolioCarousel.data("simulate-touch"); var $dataGrabCursor = $ttPortfolioCarousel.data("grab-cursor"); var $dataAutoplay = $ttPortfolioCarousel.data("autoplay") ? { delay: $ttPortfolioCarousel.data("autoplay"),} : $ttPortfolioCarousel.data("autoplay"); var $dataLoop = $ttPortfolioCarousel.data("loop") ? { loopedSlides: 100, } : $ttPortfolioCarousel.data("loop"); // Not recommended! if ($ttPortfolioCarousel.is("[data-speed]")) { var $dataSpeed = $ttPortfolioCarousel.data("speed"); // speed for larger screens } else { var $dataSpeed = 1200; // speed for larger screens (by default) } if ($ttPortfolioCarousel.is("[data-pagination-type]")) { var $dataPaginationType = $ttPortfolioCarousel.data("pagination-type"); } else { var $dataPaginationType = "fraction"; // by default (bullets/fraction/progressbar) } // Init Swiper // ============= var $ttPortfolioCarouselSwiper = new Swiper ($ttPortfolioCarousel.find(".swiper")[0], { // Parameters direction: "horizontal", slidesPerView: "auto", spaceBetween: 0, resistanceRatio: 0.85, longSwipesRatio: 0.3, shortSwipes: true, centeredSlides: true, preloadImages: false, // Needed for lazy loading watchSlidesProgress: true, // Needed for lazy loading (if slidesPerView is "auto" or more than 1) preventInteractionOnTransition: false, // No actions during transition speed: 900, // Slider speed for smaller screens (when window width is 1024px or smaller) keyboard: $dataKeyboard, mousewheel: $dataMousewheel, autoplay: $dataAutoplay, simulateTouch: $dataSimulateTouch, grabCursor: $dataGrabCursor, loop: $dataLoop, // Not recommended! lazy: { loadPrevNext: true, loadOnTransitionStart: true, }, breakpoints: { // When window width is 1025px or larger 1025: { speed: $dataSpeed, lazy: { loadPrevNextAmount: 3, // Amount of next/prev slides to preload lazy images in. }, } }, // Navigation arrows navigation: { nextEl: $ttPortfolioCarousel.find(".tt-pc-arrow-next")[0], prevEl: $ttPortfolioCarousel.find(".tt-pc-arrow-prev")[0], disabledClass: "tt-pc-arrow-disabled", }, // Pagination pagination: { el: $ttPortfolioCarousel.find(".tt-pc-pagination")[0], type: $dataPaginationType, modifierClass: "tt-pc-pagination-", dynamicBullets: true, dynamicMainBullets: 1, clickable: true, }, // Events on: { lazyImageReady: (swiper) => { // Lazy load + slidesPerView:"auto" fix. $ttPortfolioCarouselSwiper.update() }, init: function () { var $this = this; var $slideActive = $($this.slides[$this.activeIndex]); // Active slide class (custom) on load $slideActive.addClass("tt-slide-active"); // Add class to active slide. // Carousel slide disabled (prev/next slide) on load $slideActive.prevAll().addClass("tt-pcs-disabled"); $slideActive.nextAll().addClass("tt-pcs-disabled"); }, transitionStart: function () { var $this = this; var $slideActive = $($this.slides[$this.activeIndex]); // Active slide classes (custom). $slideActive.addClass("tt-slide-active"); // Add class to active slide. $slideActive.prev().addClass("tt-slide-active-start"); // Add class if active slide transition starts. $slideActive.next().addClass("tt-slide-active-start"); // Add class if active slide transition starts. // Carousel slide disabled (prev/next slide) $slideActive.prevAll().addClass("tt-pcs-disabled"); $slideActive.removeClass("tt-pcs-disabled"); $slideActive.nextAll().addClass("tt-pcs-disabled"); // Play video $(".swiper-slide-active").find("video").each(function() { $(this).get(0).play(); }); // Disable nav arrow action. $(".tt-pc-arrow").addClass("tt-pc-arrow-disabled"); }, transitionEnd: function () { var $this = this; var $slideActive = $($this.slides[$this.activeIndex]); // Active slide classes (custom) $slideActive.prevAll().removeClass("tt-slide-active"); // Remove class if active slide transition ends. $slideActive.nextAll().removeClass("tt-slide-active"); // Remove class if active slide transition ends. $slideActive.prev().removeClass("tt-slide-active-start"); // Remove class if active slide transition ends. $slideActive.next().removeClass("tt-slide-active-start"); // Remove class if active slide transition ends. // Pause video $(".swiper-slide-prev").find("video").each(function() { $(this).get(0).pause(); }); $(".swiper-slide-next").find("video").each(function() { $(this).get(0).pause(); }); // Disable nav arrow action. $(".tt-pc-arrow").removeClass("tt-pc-arrow-disabled"); } } }); // Scale down animation on carousel click if ($ttPortfolioCarousel.attr("data-simulate-touch") == "true") { if ($ttPortfolioCarousel.hasClass("pc-scale-down")) { $ttPortfolioCarousel.find(".swiper").on("mousedown touchstart pointerdown", function(e) { if (e.which === 1) { // Affects the left mouse button only! gsap.to($ttPortfolioCarousel.find(".swiper-slide"), { duration: 0.7, scale: 0.9 }); } }); $("body").on("mouseup touchend pointerup mouseleave", function() { gsap.to($ttPortfolioCarousel.find(".swiper-slide"), { duration: 0.7, scale: 1, clearProps: "scale" }); }); } } // Update slider when windows resize or orientation change $(window).on("resize orientationchange", function() { setTimeout(function(){ $ttPortfolioCarouselSwiper.update(); $ttPortfolioCarousel.find(".swiper-wrapper").addClass("swtr-smooth"); }, $dataSpeed); setTimeout(function(){ $ttPortfolioCarousel.find(".swiper-wrapper").removeClass("swtr-smooth"); }, $dataSpeed + $dataSpeed); }); }); } // ======================================================================================= // Content carousel // Source: https://swiperjs.com/ // ======================================================================================= if ($(".tt-content-carousel").length) { $(".tt-content-carousel").each(function() { var $ttContentCarousel = $(this); // Data attributes // ================ var $dataSimulateTouch = $ttContentCarousel.data("simulate-touch"); var $autoplay = $ttContentCarousel.data("autoplay") ? { delay: $ttContentCarousel.data("autoplay"), } : $ttContentCarousel.data("autoplay"); var $dataLoop = $ttContentCarousel.data("loop") ? { loopedSlides: 100, } : $ttContentCarousel.data("loop"); if ($ttContentCarousel.is("[data-speed]")) { var $dataSpeed = $ttContentCarousel.data("speed"); } else { var $dataSpeed = 900; // by default } if ($ttContentCarousel.is("[data-pagination-type]")) { var $dataPaginationType = $ttContentCarousel.data("pagination-type"); } else { var $dataPaginationType = "bullets"; // by default (bullets/fraction/progressbar) } // Init Swiper // ============= var $ttContentCarouselSwiper = new Swiper($ttContentCarousel.find(".swiper")[0], { // Parameters direction: "horizontal", slidesPerView: "auto", spaceBetween: 0, centeredSlides: true, longSwipesRatio: 0.3, mousewheel: false, keyboard: false, preloadImages: false, // Needed for lazy loading watchSlidesProgress: true, // Needed for lazy loading (if slidesPerView is "auto" or more than 1) preventInteractionOnTransition: false, // No actions during transition simulateTouch: $dataSimulateTouch, grabCursor: $dataSimulateTouch, speed: $dataSpeed, autoplay: $autoplay, loop: $dataLoop, lazy: { loadPrevNext: true, loadOnTransitionStart: true, }, breakpoints: { // when window width is 1025px or larger 1025: { lazy: { loadPrevNextAmount: 3, // Amount of next/prev slides to preload lazy images in. }, } }, // Navigation (arrows) navigation: { nextEl: $ttContentCarousel.find(".tt-cc-nav-next")[0], prevEl: $ttContentCarousel.find(".tt-cc-nav-prev")[0], disabledClass: "tt-cc-nav-arrow-disabled", }, // Pagination pagination: { el: $ttContentCarousel.find(".tt-cc-pagination")[0], type: $dataPaginationType, modifierClass: "tt-cc-pagination-", dynamicBullets: true, dynamicMainBullets: 1, clickable: true, }, // Events on: { lazyImageReady: (swiper) => { // Lazy load + slidesPerView:"auto" fix. $ttContentCarouselSwiper.update() }, transitionStart: function () { // Play video $(".swiper-slide-active").find("video").each(function() { $(this).get(0).play(); }); }, transitionEnd: function () { // Pause video $(".swiper-slide-prev").find("video").each(function() { $(this).get(0).pause(); }); $(".swiper-slide-next").find("video").each(function() { $(this).get(0).pause(); }); } } }); // Scale down animation on carousel click // ======================================= if ($ttContentCarousel.attr("data-simulate-touch") == "true") { if ($ttContentCarousel.hasClass("cc-scale-down")) { $ttContentCarousel.find(".swiper-wrapper").on("mousedown touchstart pointerdown", function(e) { if (e.which === 1) { // Affects the left mouse button only! gsap.to($ttContentCarousel.find(".tt-content-carousel-item"), { duration: 0.7, scale: 0.9 }); } }); $("body").on("mouseup touchend pointerup mouseleave", function() { gsap.to($ttContentCarousel.find(".tt-content-carousel-item"), { duration: 0.7, scale: 1, clearProps: "scale" }); }); } } }); } // ======================================================================================= // Testimonials slider // Source: https://swiperjs.com/ // ======================================================================================= if ($(".tt-testimonials-slider").length) { $(".tt-testimonials-slider").each(function() { var $ttTestimonialsSlider = $(this); // Data attributes // ================ var $dataSimulateTouch = $ttTestimonialsSlider.data("simulate-touch"); var $autoplay = $ttTestimonialsSlider.data("autoplay") ? { delay: $ttTestimonialsSlider.data("autoplay"), } : $ttTestimonialsSlider.data("autoplay"); var $dataLoop = $ttTestimonialsSlider.data("loop") ? { loopedSlides: 100, } : $ttTestimonialsSlider.data("loop"); if ($ttTestimonialsSlider.is("[data-speed]")) { var $dataSpeed = $ttTestimonialsSlider.data("speed"); } else { var $dataSpeed = 900; // by default } // Init Swiper // ============= var $ttTestimonialsSliderSwiper = new Swiper ($ttTestimonialsSlider.find(".swiper")[0], { // Parameters direction: "horizontal", slidesPerView: "auto", spaceBetween: 0, mousewheel: false, longSwipesRatio: 0.3, grabCursor: true, autoHeight: true, centeredSlides: true, preventInteractionOnTransition: false, // No actions during transition speed: $dataSpeed, simulateTouch: $dataSimulateTouch, autoplay: $autoplay, loop: $dataLoop, // Navigation (arrows) navigation: { nextEl: $ttTestimonialsSlider.find(".tt-ts-nav-next")[0], prevEl: $ttTestimonialsSlider.find(".tt-ts-nav-prev")[0], disabledClass: "tt-ts-nav-arrow-disabled", }, // Pagination pagination: { el: $ttTestimonialsSlider.find(".tt-ts-pagination")[0], type: "bullets", modifierClass: "tt-ts-pagination-", dynamicBullets: true, dynamicMainBullets: 1, clickable: true, } }); // Auto height fix setTimeout(function() { $ttTestimonialsSliderSwiper.updateAutoHeight(); }, 100); // Scale down animation on slider click if ($ttTestimonialsSlider.hasClass("ts-scale-down")) { $ttTestimonialsSlider.find(".swiper-wrapper").on("mousedown touchstart pointerdown", function(e) { if (e.which === 1) { // Affects the left mouse button only! gsap.to($ttTestimonialsSlider.find(".swiper-slide"), { duration: 0.7, scale: 0.9 }); } }); $("body").on("mouseup touchend pointerup", function() { gsap.to($ttTestimonialsSlider.find(".swiper-slide"), { duration: 0.7, scale: 1, clearProps: "scale" }); }); } }); } // ============================================================================ // Isotope // More info: http://isotope.metafizzy.co // Note: "imagesloaded" blugin is required! https://imagesloaded.desandro.com/ // ============================================================================ // init Isotope var $container = $(".isotope-items-wrap"); $container.imagesLoaded(function() { $container.isotope({ itemSelector: ".isotope-item", layoutMode: "packery", transitionDuration: "0.7s", percentPosition: true }); setTimeout(function() { $container.isotope('layout'); // Refresh Isotope ScrollTrigger.refresh(true); // Refresh ScrollTrigger }, 500); }); // Filter $(".ttgr-cat-list > li > a").on("click", function() { var selector = $(this).attr("data-filter"); $container.isotope({ filter: selector }); // Refresh ScrollTrigger setTimeout(function() { ScrollTrigger.refresh(true); }, 500); return false; }); // Filter item active var filterItemActive = $(".ttgr-cat-list > li > a"); filterItemActive.on("click", function(){ var $this = $(this); if ( !$this.hasClass("active")) { filterItemActive.removeClass("active"); $this.addClass("active"); } }); // Isotope items gaps fix (uncomment the below code if isotope items gaps do not calculate correctly.) // ======================== // if ($(".isotope-items-wrap").length){ // // add overflow scroll to (isotope items gaps fix). // if ( document.querySelector("body").offsetHeight > window.innerHeight ) { // document.documentElement.style.overflowY = "scroll"; // } // } // ===================================================== // lightGallery (lightbox plugin) // Source: http://sachinchoolur.github.io/lightGallery // Mousewheel plugin: https://github.com/jquery/jquery-mousewheel // ===================================================== $(".lightgallery").lightGallery({ // Please read about gallery options here: http://sachinchoolur.github.io/lightGallery/docs/api.html // lightGallery core selector: '.lg-trigger', mode: 'lg-fade', // Type of transition between images ('lg-fade' or 'lg-slide'). height: '100%', // Height of the gallery (ex: '100%' or '300px'). width: '100%', // Width of the gallery (ex: '100%' or '300px'). iframeMaxWidth: '100%', // Set maximum width for iframe. loop: true, // If false, will disable the ability to loop back to the beginning of the gallery when on the last element. speed: 600, // Transition duration (in ms). closable: true, // Allows clicks on dimmer to close gallery. escKey: true, // Whether the LightGallery could be closed by pressing the "Esc" key. keyPress: true, // Enable keyboard navigation. hideBarsDelay: 3000, // Delay for hiding gallery controls (in ms). controls: true, // If false, prev/next buttons will not be displayed. mousewheel: true, // Chane slide on mousewheel. download: false, // Enable download button. By default download url will be taken from data-src/href attribute but it supports only for modern browsers. If you want you can provide another url for download via data-download-url. counter: true, // Whether to show total number of images and index number of currently displayed image. swipeThreshold: 50, // By setting the swipeThreshold (in px) you can set how far the user must swipe for the next/prev image. enableDrag: true, // Enables desktop mouse drag support. enableTouch: true, // Enables touch support. getCaptionFromTitleOrAlt: false, // Option to get captions from alt or title tags. // Thumbnail plugin thumbnail: false, // Enable thumbnails for the gallery. showThumbByDefault: false, // Show/hide thumbnails by default. thumbMargin: 5, // Spacing between each thumbnails. toogleThumb: true, // Whether to display thumbnail toggle button. enableThumbSwipe: true, // Enables thumbnail touch/swipe support for touch devices. exThumbImage: 'data-exthumbnail', // If you want to use external image for thumbnail, add the path of that image inside "data-" attribute and set value of this option to the name of your custom attribute. // Autoplay plugin autoplay: false, // Enable gallery autoplay. autoplayControls: true, // Show/hide autoplay controls. pause: 6000, // The time (in ms) between each auto transition. progressBar: true, // Enable autoplay progress bar. fourceAutoplay: false, // If false autoplay will be stopped after first user action // Full Screen plugin fullScreen: true, // Enable/Disable fullscreen mode. // Zoom plugin zoom: false, // Enable/Disable zoom option. scale: 0.5, // Value of zoom should be incremented/decremented. enableZoomAfter: 50, // Some css styles will be added to the images if zoom is enabled. So it might conflict if you add some custom styles to the images such as the initial transition while opening the gallery. So you can delay adding zoom related styles to the images by changing the value of enableZoomAfter. // Video options videoMaxWidth: '1400px', // Set limit for video maximal width. // Youtube video options loadYoutubeThumbnail: true, // You can automatically load thumbnails for youtube videos from youtube by setting loadYoutubeThumbnail true. youtubeThumbSize: 'default', // You can specify the thumbnail size by setting respective number: 0, 1, 2, 3, 'hqdefault', 'mqdefault', 'default', 'sddefault', 'maxresdefault'. youtubePlayerParams: { // Change youtube player parameters: https://developers.google.com/youtube/player_parameters modestbranding: 0, showinfo: 1, controls: 1 }, // Vimeo video options loadVimeoThumbnail: true, // You can automatically load thumbnails for vimeo videos from vimeo by setting loadYoutubeThumbnail true. vimeoThumbSize: 'thumbnail_medium', // Thumbnail size for vimeo videos: 'thumbnail_large' or 'thumbnail_medium' or 'thumbnail_small'. vimeoPlayerParams: { // Change vimeo player parameters: https://developer.vimeo.com/player/embedding#universal-parameters byline : 1, portrait : 1, title: 1, color : 'CCCCCC', autopause: 1 }, // Hash plugin (unique url for each slides) hash: false, // Enable/Disable hash plugin. hgalleryId: 1, // Unique id for each gallery. It is mandatory when you use hash plugin for multiple galleries on the same page. // Rotate plugin rotate: false, // Share plugin share: false, // Enable/Disable share plugin. facebook: true, // Enable Facebook share. facebookDropdownText: 'Facebook', // Facebok dropdown text. twitter: true, // Enable Twitter share. twitterDropdownText: 'Twitter', // Twitter dropdown text. googlePlus: true, // Enable Google Plus share. googlePlusDropdownText: 'Google+', // Google Plus dropdown text. pinterest: true, // Enable Pinterest share. pinterestDropdownText: 'Pinterest' // Pinterest dropdown text. }); // ================================================================ // Page header // ================================================================ // If page header image exist // =========================== if ($(".ph-image").length) { $("body").addClass("ph-image-on"); // If page header image is background image if ($("#page-header").hasClass("ph-bg-image")) { $("body").addClass("ph-bg-image-on"); } } // If page header contains project info list // ========================================== if ($("#page-header .project-info-list").length) { $("#page-header").addClass("project-info-list-on"); } // If "made with love" exist // ========================== if ($(".made-with-love").length) { $("body").addClass("made-with-love-on"); } // Project share // =============== if ($(".ph-share").length) { $("body").addClass("ph-share-on"); if ($(".ph-share-trigger").hasClass("ph-appear")) { $(".ph-share-trigger").removeClass("ph-appear"); } $(".ph-share").addClass("ph-appear"); // Project share position (move it out of page header if the window width is 1024px or smaller). // Expl: Since Smooth Scrollbar doesn't support element fixed position inside "scroll-container" move the "ph-share" out of it. function projectSharePosition() { if (window.matchMedia("(max-width: 768px)").matches) { $(".ph-share").appendTo("#body-inner"); } else { $(".ph-share").appendTo("#page-header"); } } projectSharePosition(); $(window).resize(function() { projectSharePosition(); }); // Project share icon hover $(".ph-share-icon").on("mouseenter", function() { $(".ph-share").addClass("active"); }).on("mouseleave", function() { $(".ph-share").removeClass("active"); }); // Prepend top close button $(".ph-share-content").prepend(' '); // Top close button hover $(".ph-share-close-btn").on("mouseenter", function() { gsap.to($ball, { duration: 0.3, scale: 0, opacity: 0 }); }).on("mouseleave", function() { gsap.to($ball, { duration: 0.3, scale: $ballScale, opacity: $ballOpacity }); }); // Open project share content $(".ph-share-content").appendTo("#body-inner"); $(".ph-share-icon").on("click", function() { $("body").addClass("ph-share-open"); var tl_prshIn = gsap.timeline(); tl_prshIn.to(".ph-share-content", { duration: 0.4, autoAlpha: 1 }); tl_prshIn.from(".ph-share-appear", { duration: 0.5, y: 80, autoAlpha: 0, stagger: 0.1, ease: Power2.easeOut, clearProps:"all" }, "+=0.1"); }); // Close project share content $(".ph-share-close, .ph-share-close-btn").on("click", function() { $("body").removeClass("ph-share-open"); var tl_prshOut = gsap.timeline(); tl_prshOut.to(".ph-share-appear", { duration: 0.5, y: -80, autoAlpha: 0, stagger: 0.05, ease: Power2.easeIn }); tl_prshOut.to(".ph-share-content", { duration: 0.4, autoAlpha: 0, clearProps:"all" }, "+=0.2"); tl_prshOut.to(".ph-share-appear", { clearProps:"all" }); }); } // If page header background image is light (toggle class on scroll handled by scrollTrigger plugin below) // ========================================= if ($("#page-header").is(".ph-bg-image.ph-bg-image-is-light")) { $("body").addClass("ph-bg-image-light-on"); } else { $("body").removeClass("ph-bg-image-light-on"); } // ================================================================ // GSAP ScrollTrigger plugin // More info: https://greensock.com/docs/v3/Plugins/ScrollTrigger/ // ================================================================ // Page header elements scrolling effects: // ======================================= if ($("#page-header").hasClass("ph-content-parallax")) { let tlPhParallax = gsap.timeline({ scrollTrigger: { trigger: "#page-header", start: 'top top', end: 'bottom top', scrub: true, markers: false } }); // Page header caption elements scrolling effect if ($(".ph-categories").length) { $(".ph-categories").wrapInner(''); tlPhParallax.to(".ph-cat-parallax", { y: -80 }, 0); } if ($(".ph-caption-title").length) { $(".ph-caption-title").wrapInner(''); tlPhParallax.to(".ph-title-parallax", { y: -40 }, 0); } if ($(".ph-caption-subtitle").length) { $(".ph-caption-subtitle").wrapInner(''); tlPhParallax.to(".ph-subt-parallax", { y: -10 }, 0); } if ($(".ph-caption-title-ghost").length) { $(".ph-caption-title-ghost").wrapInner(''); tlPhParallax.to(".ph-ghost-parallax", { y: 40 }, 0); } // Page header image scrolling effect if ($(".ph-image").length) { if ($("#page-header").hasClass("ph-bg-image")) { tlPhParallax.to(".ph-image-inner", { yPercent: 30, scale: 1.05 }, 0); } else { tlPhParallax.to(".ph-image-inner", { yPercent: -20 }, 0); } } // Page header project info list scrolling effect (effect only if it in the page header!) if ($("#page-header .project-info-list").length) { $("#page-header .project-info-list > ul > li").wrapInner(''); if ($("#page-header:not('.ph-center')").hasClass("ph-inline")) { ScrollTrigger.matchMedia({ "(min-width: 1025px)": function() { gsap.to(".ph-pil-parallax", { y: -140, stagger: 0.15, ease: "none", scrollTrigger: { trigger: "#page-header", start: "top top", end: "bottom top", scrub: true, markers: false } }); }, "(max-width: 1024px)": function() { gsap.to("#page-header .project-info-list", { y: 20, ease: "none", scrollTrigger: { trigger: "#page-header", start: "top top", end: "bottom top", scrub: true, markers: false } }); } }); } else { gsap.to(".ph-pil-parallax", { y: 30, ease: "none", scrollTrigger: { trigger: "#page-header", start: "top top", end: "bottom top", scrub: true, markers: false } }); } } // Page header scroll down circle if ($(".scroll-down-circle").length) { gsap.to(".scroll-down-circle", { x: -100, autoAlpha: 0, ease: "none", scrollTrigger: { trigger: "#page-header", start: "top top", end: "30% top", scrub: true, markers: false }, }); } // Page header projekt share if ($(".ph-share").length) { $(".ph-share-trigger").wrap(''); ScrollTrigger.matchMedia({ "(min-width: 769px)": function() { gsap.to(".ph-share-trigger-wrap", { y: 50, autoAlpha: 0, ease: "none", scrollTrigger: { trigger: "#page-header", start: "top top", end: "30% top", scrub: true, markers: false }, }); } }); } // If page header background image is light if ($("#page-header").is(".ph-bg-image.ph-bg-image-is-light")) { if ($("#tt-header").hasClass("tt-header-fixed")) { ScrollTrigger.create({ trigger: "#page-header", start: "top bottom", end: "bottom 30px", scrub: true, markers: false, onLeave: () => phLeaveClass(), onEnter: () => phEnterClass(), onLeaveBack: () => phLeaveClass(), onEnterBack: () => phEnterClass(), }); function phLeaveClass() { $("body").removeClass("ph-bg-image-light-on"); }; function phEnterClass() { $("body").addClass("ph-bg-image-light-on"); }; } } } // Portfolio grid categories filter show/hide on scroll // ===================================================== if ($(".tt-grid-categories").length) { var $ttgCatTriggerWrap = $(".ttgr-cat-trigger-wrap"); if ($ttgCatTriggerWrap.hasClass("ttgr-cat-fixed")) { $ttgCatTriggerWrap.appendTo("#body-inner"); // Show/Hide trigger on page scroll ScrollTrigger.create({ trigger: "#portfolio-grid", start: "top bottom", end: "bottom 75%", scrub: true, markers: false, onEnter: () => ttgCatShow(), onLeave: () => ttgCatHide(), onEnterBack: () => ttgCatShow(), onLeaveBack: () => ttgCatHide(), }); function ttgCatShow() { gsap.to($ttgCatTriggerWrap, { duration: 0.4, autoAlpha: 1, scale: 1, ease:Power2.easeOut }); } function ttgCatHide() { gsap.to($ttgCatTriggerWrap, { duration: 0.4, autoAlpha: 0, scale: 0.9, ease:Power2.easeOut }); } } else { // Hide trigger before it reaches the top when page scroll gsap.to($ttgCatTriggerWrap, { yPercent: 70, autoAlpha: 0, ease: "none", scrollTrigger: { trigger: $ttgCatTriggerWrap, start: "top 250px", end: "100px 250px", scrub: true, markers: false }, }); } } // Portfolio list item info elements scrolling effects: // ===================================================== $(".pli-info").each(function() { var $pliTitle = $(this).find(".pli-title"); var $pliCategory = $(this).find(".pli-categories-wrap"); var $pliCounter = $(this).find(".pli-counter"); let tl_plIInfo = gsap.timeline({ scrollTrigger: { trigger: this, start: "top bottom", markers: false } }); if ($($pliTitle).length) { tl_plIInfo.from($pliTitle, { duration: 2.5, autoAlpha: 0, y: 80, ease: Expo.easeOut, clearProps:"all" }, "+=0.5"); } if ($($pliCategory).length) { tl_plIInfo.from($pliCategory, { duration: 2.5, autoAlpha: 0, y: 60, ease: Expo.easeOut, clearProps:"all" }, "-=2.2"); } if ($($pliCounter).length) { tl_plIInfo.from($pliCounter, { duration: 2.5, autoAlpha: 0, y: 40, ease: Expo.easeOut, clearProps:"all" }, "-=2.2"); } }); // Image parallax // =============== $(".anim-image-parallax").each(function() { // Add wrap