/* home-animation.js ================= This file is manually included by the home_inc-js.php file within this themes directory if animations are not disabled. This file is only loaded on the homepage of this theme, and doesn't apply animations across the site. If you wish to apply an animation across the whole site then please do so in global-animation.js 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 */ (function () { /* VARIABLES ========= */ // Store the value if frame is ticking or not var bScrollTicking = false; // Scroll animate elements var aElementsToAnimateOnScroll = []; /* On Document Loaded ================== Called by Jquery event handler when the document is ready (When content has been loaded) */ $( document ).ready( function() { // Try load the header container var oHeaderContainer = $(".h1-container"); // Try and load the slideshow var oSlideshow = $("#slideshow"); // Try and load the shop product category block var oShopProdCategoryBlock = $("#shop-prod-cat-block"); // Try and load the shop product new in block var oShopProdNewInBlock = $("#shop-prod-block"); // Try and load the blog block var oBlogBlock = $("#blog-block"); // Try and load the quote section var oQuoteSection = $("#quote-section"); // Try and load the quote section var oBottomImageBlock = $("#bottom-image-block"); // If the slideshow element exists if( oSlideshow.length ) { // Call the function that actually handles the animation fAnimateSlideshow( oSlideshow ); } // If the header container does exist if( oHeaderContainer.length ) { // Call the function that actually handles the animation fAnimateHeaderContainer( oHeaderContainer ); } // If the shop product category block is set if( oShopProdCategoryBlock.length ) { // Set the inital opacity of category block TweenMax.set( oShopProdCategoryBlock, { opacity : 0 }); // Add the element to the animate on scroll array aElementsToAnimateOnScroll.push( oShopProdCategoryBlock ); } // If the shop product new in block is set if( oShopProdNewInBlock.length ) { // Set the inital opacity of shop prod new in block TweenMax.set( oShopProdNewInBlock, { opacity : 0 }); // Add the element to the animate on scroll array aElementsToAnimateOnScroll.push( oShopProdNewInBlock ); } // If the blog block is set if( oBlogBlock.length ) { // Set the inital opacity of blog block TweenMax.set( oBlogBlock, { opacity : 0 }); // Add the element to the animate on scroll array aElementsToAnimateOnScroll.push( oBlogBlock ); } // If the qutoe section block is set if( oQuoteSection.length ) { // Set the inital opacity of qutoe section block TweenMax.set( oQuoteSection, { opacity : 0 }); // Add the element to the animate on scroll array aElementsToAnimateOnScroll.push( oQuoteSection ); } // If the bottom image block is set if( oBottomImageBlock.length ) { // Set the inital opacity of image block TweenMax.set( oBottomImageBlock, { opacity : 0 }); // Add the element to the animate on scroll array aElementsToAnimateOnScroll.push( oBottomImageBlock ); } // When the user scrolls $(window).scroll( function() { // Request a scroll tick fRequestScrollTick(); }); // Request a scroll tick on the page load incase the user pressed back fRequestScrollTick(); }); /* fRequestScrollTick() ==================== Simply requests an animation tick, all this function does is check if we have already called a tick, and if not then call a tick. simple. */ function fRequestScrollTick() { // If we aren't currently ticking if(!bScrollTicking) { // Deley by 100ms for a micro optimisation, this ensures that the function isn't called too frequently // as realistiaclly we don't need to do a check every scroll, just every scroll within 100ms intervals setTimeout( function () { // Prepare the request animation for the next frame requestAnimationFrame(fOnScrollUpdate); }, 100); // Set the ticking to be true bScrollTicking = true; } } /* fOnScrollUpdate() ================ This function is called by requestAnimationFrame when we log a tick */ function fOnScrollUpdate() { // If the element to animate on scroll array has some values in it if( aElementsToAnimateOnScroll.length != 0 ) { // Loop through all items that is to be animated, we start from the top element and work to the bottom so we can remove elements for( var nIndex = aElementsToAnimateOnScroll.length - 1; nIndex >= 0; nIndex--) { // If the element has entered the viewport if( fHasScrolledIntoView( aElementsToAnimateOnScroll[nIndex] ) ) { // Fade the element in fFadeElementIn( aElementsToAnimateOnScroll[nIndex], 1 ); // Remove it from the array aElementsToAnimateOnScroll.splice(nIndex, 1); } } } // Set the scroll ticking to be false so it can be called again bScrollTicking = false; } /* fHasScrolledIntoView() ====================== Checks if the element is in view or not, this is used to start an animtaion when coming into view */ function fHasScrolledIntoView( oTarget ) { // Store the scroll top var oViewTop = $(window).scrollTop(); // Store the view bottom var oViewBottom = oViewTop + $(window).height(); // Store the targets top var oTargetTop = oTarget.offset().top; // Store the target's bottom var oTargetBottom = oTargetTop + oTarget.height(); // Return if the target is in viewport or not return ( (oTargetTop <= oViewBottom) && (oTargetBottom >= oViewTop) ); } /* fFadeElementIn() ================ Fades an element in */ function fFadeElementIn( oTarget, nSpeed ) { // Fade the header container in TweenMax.to(oTarget, nSpeed, { opacity : 1 }); } /* fAnimateSlideshow() =================== This function handles the inital animation of the slideshow. */ function fAnimateSlideshow( oSlideshow ) { // Set the inital opacity of the header container TweenMax.set( oSlideshow, { paddingBottom : ($(window).height() / 10) }); // Fade the header container in TweenMax.to(oSlideshow, 1.1, { paddingBottom : 0 }); } /* fAnimateHeaderContainer() ========================= This function handles the inital animation of the header container. */ function fAnimateHeaderContainer( oHeaderContainer ) { // Set the inital opacity of the header container TweenMax.set( oHeaderContainer, { opacity : 0 }); // Fade the header container in TweenMax.to(oHeaderContainer, 1.25, { opacity : 1, ease : Power2.easeIn }); } }());