/* global-animation.js =================== This file is included in inc-htmlbottom.php if animations are enabled. Please only place animations that are to be site wide in this file, otherwise please place Remember that animations are theme specific, meaning this file only effects the current theme that you are animating, and not every theme across the TemplateOTS platform. See detailed documentation here:- https://docs.google.com/document/d/1n5sWQ8SIr-zjOpTv8YnOTHJapO8WdedjDfbeo-lkqMM/edit#heading=h.lmxb59mpcpe2 */ /* FUNCTIONS ========= fFadePageIn() - Called on document load, simplt fades the webpage in, fAnimateTopHeader - Called on document load, handles animation for the top header fAnimateMiddleHeader - Called on document load, handles animation for the middle header fAnimateBottomHeader - Called on document load, handles animation for the bottom header */ /* Store in self invoking function so we don't clutter the global namespace. */ (function () { // Store the animation delay for the header elements var nHeaderLoginAnimatinDelay = 0.3; /* On Document Loaded ================== Called by Jquery event handler when the document is ready (When content has been loaded) */ $( document ).ready( function() { // Fade the webpage in fFadePageIn(); // Try and grab the top header bar (Shopping car, login, register) var oTopHeader = $(".top-header-bar"); // Try and grab the middle header navigation (Social links, Logo) var oMiddleHeader = $(".middle-header-bar"); // Try and grab the bottom header navigation (Links / Menu) var oBottomHeader = $(".bottom-header-bar"); // Fade in the carousel items $(".carousel-section").css("opacity", 1); // If the middle header element exists if( oMiddleHeader.length ) { // Animate the top header fAnimateMiddleHeader( oMiddleHeader ); } // If the top header element exists if( oTopHeader.length ) { // Animate the top header fAnimateTopHeader( oTopHeader ); } // If the bottom header element exists if( oBottomHeader.length ) { // Animate the top header fAnimateBottomHeader( oBottomHeader ); } /* ANIMATE DROPDOWN MENU ===================== */ // When the dropdown is hovered $('.dropdown').mouseenter( function() { // Store the dropdown menu var oDropdownMenu = $(this).find(".dropdown-menu"); // Fade the dropdown menu in TweenMax.to(oDropdownMenu, 0.25, { opacity : 1, ease : Power2.easeIn } ); }); // When the dropdown menu isn't being hovered anymore $('.dropdown').mouseleave( function() { // Store the dropdown menu var oDropdownMenu = $(this).find(".dropdown-menu"); // If we are on mobile if( $(window).width() <= 767 ) { // Set the opacity of the dropdown menu to 1 TweenMax.set(oDropdownMenu, { opacity : 1 } ); } // If we are on desktop else { // Set the opacity of the dropdown menu back to 0 TweenMax.set(oDropdownMenu, { opacity : 0 } ); } }); // When the dropdown is clicked $('.dropdown').click( function() { // Store the dropdown menu var oDropdownMenu = $(this).find(".dropdown-menu"); // If we are on mobile, then we need to fade the element out or in if( $(window).width() <= 768) { // Set the correct opacity of the element var nOpacity = oDropdownMenu.css("opacity") > 0 ? 0 : 1; // Set the opacity of the dropdown menu to 1 TweenMax.set(oDropdownMenu, { opacity : nOpacity } ); } }); }); /* fFadePageIn() ============= Fades the page in, called on load */ function fFadePageIn() { // Fade the body in TweenMax.to( $("body"), 0.35, { opacity : 1, ease : Power2.easeIn } ); } /* fAnimateTopHeader() =================== Function that handles any animating of the top header */ function fAnimateTopHeader( oTopHeader ) { // Store the header cart wrapper var oTopHeaderCart = oTopHeader.find(".header-cart-wrapper"); // Store the header login wrapper var oHeaderLoginWrapper = oTopHeader.find(".header-login-wrapper"); /* ANIMATE HEADER SHOPPING CART ============================ The inital values are set in global-animation.css for the shopping cart, including the animation speed. */ // If the header cart exists if( oTopHeaderCart.length ) { // Set the inital position of the cart from absolute to relative TweenMax.set(oTopHeaderCart, { position : "relative" } ); // Set the left position of the cart to 0 so it comes from off the screen TweenMax.set(oTopHeaderCart, { left : 0 } ); } /* ANIMATE ACCOUNT / LOGIN / REGISTER ================================== Animate all elements within the login wrapper, including the line break between words */ // If the header login wrapper exists if( oHeaderLoginWrapper.length ) { // Loop through all elements in the header login wrapper oHeaderLoginWrapper.children().each( function() { // Fade the dropdown menu in TweenMax.to( $(this), 0.75, { opacity : 1, delay : nHeaderLoginAnimatinDelay, ease : Power2.easeIn } ); // Increment the animation Delay nHeaderLoginAnimatinDelay += 0.15; }); } } /* fAnimateMiddleHeader() ====================== Function that handles any animating of the middle header */ function fAnimateMiddleHeader( oMiddleHeader ) { // Try and store the logo wrapper var oLogoWrapper = oMiddleHeader.find("#logo-col-wrapper"); // Try and store the header social icons var oSocialWrapper = oMiddleHeader.find(".header-social-wrapper"); // Try and store the contact details wrapper var oContactWrapper = oMiddleHeader.find(".header-contact"); // Try and grab the search bar var oSearchBarWrapper = oMiddleHeader.find("#searchbar-col"); /* ANIMTE LOGO WRAPPER =================== */ // If the logo wrapper exists if( oLogoWrapper.length ) { // Fade the logo wrapper in TweenMax.to( oLogoWrapper, 0.35, { opacity : 1, delay : nHeaderLoginAnimatinDelay, ease : Power2.easeIn } ); // Increment the animation Delay nHeaderLoginAnimatinDelay += 0.10; } /* ANIMATE CONTACT WRAPPER ======================== */ // If the logo wrapper exists if( oContactWrapper.length ) { // Fade the logo wrapper in TweenMax.to( oContactWrapper, 0.35, { opacity : 1, delay : nHeaderLoginAnimatinDelay, ease : Power2.easeIn } ); // Increment the animation Delay nHeaderLoginAnimatinDelay += 0.10; } /* ANIMTE SOCIAL ICONS =================== */ // If the header social icons wrapper exists if( oSocialWrapper.length ) { // Fade the Social Icons Wrapper in TweenMax.to( oSocialWrapper, 0.55, { opacity : 1, delay : nHeaderLoginAnimatinDelay, ease : Power2.easeIn } ); // Increment the animation Delay nHeaderLoginAnimatinDelay += 0.10; } /* ANIMTE SEARCH BAR ================= */ // If the search bar wrapper exists if( oSearchBarWrapper.length ) { // Fade the Search Bar Wrapper in TweenMax.to( oSearchBarWrapper, 0.55, { opacity : 1, delay : nHeaderLoginAnimatinDelay, ease : Power2.easeIn } ); // Increment the animation Delay nHeaderLoginAnimatinDelay += 0.10; } } /* fAnimateBottomHeader() ====================== Function that handles any animating of the bottom header */ function fAnimateBottomHeader( oBottomHeader ) { // Fade the bottom header in TweenMax.to( oBottomHeader, 1, { opacity : 1, ease : Power2.easeIn } ); } }());