{"version":3,"file":"Home.Animations.js","sources":["Home.Animations.js"],"sourcesContent":["/**\r\n * HOME: ANIMATIONS\r\n *\r\n * @file Client-side functionality defining animations for the home page, such as the panel wipes, \"factory\" movement, and\r\n * client logos.\r\n * @author Katherine Trunkey (katherine.trunkey@ignia.com)\r\n */\r\n\r\n$(function() {\r\n  'use strict';\r\n\r\n  /**\r\n   * Establish variables\r\n   */\r\n  var\r\n    topOffset                   = $('#Header').outerHeight(),\r\n    mainContentHeight           = ($(window).height() - topOffset),\r\n    slides                      = $('.panel').not('.splash'),\r\n    sceneController             = new ScrollMagic.Controller();\r\n\r\n  /**\r\n   * Sets up pin / section wipe scene for splash panel\r\n   */\r\n  var splashPinScene            = new ScrollMagic.Scene({\r\n    triggerElement              : '#Introduction',\r\n    triggerHook                 : 1\r\n  }).setPin('#Splash', { pushFollowers: false }).addTo(sceneController);\r\n\r\n  /**\r\n   * Sets up overlay layer and opacity tweens for panels\r\n   */\r\n  $('article.panel').not('#Contact').each(function() {\r\n\r\n    // Establish variables\r\n    var\r\n      panelId                   = $(this).attr('id'),\r\n      panelOverlay              = $(this).find('span.overlay'),\r\n      triggerPanel              = '#Introduction';\r\n\r\n    // Conditionally set subsequent trigger panels\r\n    if (panelId === 'Introduction') {\r\n      triggerPanel              = '#Services';\r\n    }\r\n    if (panelId === 'Services') {\r\n      triggerPanel              = '#ClientHighlights';\r\n    }\r\n    if (panelId === 'ClientHighlights') {\r\n      triggerPanel              = '#Contact';\r\n    }\r\n\r\n    // Define tweens timeline\r\n    var overlayTweens           = gsap.timeline()\r\n      .add(gsap.to(panelOverlay, { duration: 0.1, zIndex: 1, ease: \"none\" }))\r\n      .add(gsap.to(panelOverlay, { duraction: 0.9, autoAlpha: 0.8, ease: \"none\" }, '-=0.05'));\r\n\r\n    // Define scene\r\n    var overlayScene            = new ScrollMagic.Scene({\r\n      triggerElement            : triggerPanel,\r\n      duration                  : mainContentHeight,\r\n      triggerHook               : 1\r\n    }).setTween(overlayTweens).addTo(sceneController);\r\n\r\n  });\r\n\r\n  /**\r\n   * Creates scale and opacity tweens for featured client logos\r\n   */\r\n  var\r\n    clientLogosItem             = $('#ClientHighlights section.logos ul li'),\r\n    clientLogosDuration         = ($('#ClientHighlights').innerHeight() * 0.5),\r\n    clientLogosTween            = gsap.fromTo(\r\n      clientLogosItem,\r\n      { autoAlpha: 0, scale: 0 },\r\n      { duration: 3, autoAlpha: 1, scale: 1, ease: \"slowMo(0.3, 0.4, false)\", stagger: 0.25 }\r\n    ),\r\n    clientLogosScene            = new ScrollMagic.Scene({\r\n      triggerElement            : '#ClientHighlights section.tagline h2.subheadline',\r\n      triggerHook               : 1,\r\n      offset                    : -48,\r\n      duration                  : clientLogosDuration\r\n    }).setTween(clientLogosTween).addTo(sceneController);\r\n\r\n  /**\r\n   * Gradually fades the Contact form and callout as the footer comes into view\r\n   */\r\n  var\r\n    contactFormArea             = $('#Contact section'),\r\n    contactFormAreaTween        = gsap.to(\r\n      contactFormArea,\r\n      { duraction: 0.9, autoAlpha: 0.05, ease: \"none\" }\r\n    ),\r\n    contactFormAreaScene        = new ScrollMagic.Scene({\r\n      triggerElement            : '#Footer',\r\n      triggerHook               : 1,\r\n      duration                  : $('#Footer').height()\r\n    }).setTween(contactFormAreaTween);\r\n  if ($(window).width() > 959 && $('#Contact').height() < 1000) {\r\n    // $('#Footer').addClass('transparent');\r\n    // contactFormAreaScene.addTo(sceneController);\r\n  }\r\n\r\n  /**\r\n   * Set panel scenes for tablet and larger screens\r\n   */\r\n  if ($(window).width() > 767) {\r\n\r\n    // Establish variables\r\n    var servicesPanelHeader     = '#Services > div.container > header';\r\n\r\n    // Services panel header pin\r\n    var servicesHeaderScene     = new ScrollMagic.Scene({\r\n      triggerElement            : '#Services',\r\n      triggerHook               : 0,\r\n      offset                    : -topOffset,\r\n      duration                  : ($('#Services').height() - mainContentHeight)\r\n    }).setClassToggle(servicesPanelHeader, 'is-pinned').setPin(servicesPanelHeader, { pushFollowers: false }).addTo(sceneController);\r\n\r\n    // Services panel categories animations\r\n    $('#Services article').each(function () {\r\n      var\r\n        category                = '#' + $(this).attr('id'),\r\n        categoryHeaderTween     = gsap.to(category + ' header h2 span', 0.075, {\r\n          duration              : 0.075,\r\n          scale                 : 1.1,\r\n          x                     : '-24px',\r\n          ease                  : Circ.easeOut,\r\n          repeat                : 1,\r\n          yoyo                  : true\r\n        }),\r\n        sceneOffset             = (mainContentHeight/2 - 60),\r\n        sceneDuration           = ($(category).height() - 72);\r\n\r\n      if (category === '#CloudAPIService') {\r\n        sceneOffset             = (mainContentHeight/2 - 150);\r\n      }\r\n      if (category === '#CMSService') {\r\n        sceneOffset             = (mainContentHeight/2 - 240);\r\n        sceneDuration           = ($(category).height() - 104);\r\n      }\r\n\r\n      // Heading text scaling\r\n      new ScrollMagic.Scene({\r\n        triggerElement          : category,\r\n        triggerHook             : 1,\r\n        offset                  : sceneOffset\r\n      }).setTween(categoryHeaderTween).addTo(sceneController);\r\n\r\n      // Highlight and heading pin\r\n      new ScrollMagic.Scene({\r\n        triggerElement          : category,\r\n        triggerHook             : 1,\r\n        offset                  : sceneOffset,\r\n        duration                : sceneDuration\r\n      }).setClassToggle(category, 'is-active').setPin(category + ' header h2', { pushFollowers: false }).addTo(sceneController);\r\n\r\n    });\r\n\r\n    // Contact panel pin\r\n    var\r\n      contactPanelAllowance     = ($('#Header').outerHeight() + $('#Contact > .container').outerHeight() + $('#Footer').outerHeight()),\r\n      contactPinScene           = new ScrollMagic.Scene({\r\n        triggerElement          : '#Contact',\r\n        triggerHook             : 0,\r\n        offset                  : -topOffset\r\n      }).setPin('#Contact', { pushFollowers: true });\r\n    if (contactPanelAllowance <= $(window).outerHeight()) {\r\n      contactPinScene.addTo(sceneController);\r\n    }\r\n\r\n  }\r\n\r\n  /**\r\n   * Set panel scenes for large screens\r\n   */\r\n  if ($(window).width() > 959) {\r\n\r\n    // Establish variables\r\n    var introductionPanelHeader = '#Introduction header:first-child';\r\n\r\n    // Introduction panel header pin\r\n    var introHeaderScene        = new ScrollMagic.Scene({\r\n      triggerElement            : '#Introduction',\r\n      triggerHook               : 0,\r\n      offset                    : -topOffset,\r\n      duration                  : ($('#Introduction').height() - mainContentHeight)\r\n    }).setPin(introductionPanelHeader, { pushFollowers: false }).addTo(sceneController);\r\n\r\n    // Introduction panel code factory tween\r\n    var\r\n      codefactoryTween          = gsap.to(\r\n        'img#FactoryWidget',\r\n        { duration: 10, y: '260px', ease: \"none\", force3D: true }\r\n      ),\r\n      codeFactoryScene          = new ScrollMagic.Scene({\r\n        triggerElement          : '#FactoryWidget',\r\n        triggerHook             : 1,\r\n        offset                  : 10,\r\n        duration                : '750'\r\n      }).setTween(codefactoryTween).addTo(sceneController);\r\n  }\r\n\r\n});\r\n"],"names":["$","topOffset","outerHeight","mainContentHeight","window","height","sceneController","not","ScrollMagic","Controller","clientLogosItem","Scene","triggerElement","triggerHook","setPin","pushFollowers","addTo","each","panelId","this","attr","panelOverlay","find","triggerPanel","overlayTweens","gsap","timeline","add","to","duration","zIndex","ease","duraction","autoAlpha","setTween","clientLogosDuration","innerHeight","clientLogosTween","fromTo","scale","stagger","contactFormArea","offset","contactFormAreaTween","width","servicesPanelHeader","setClassToggle","category","categoryHeaderTween","x","Circ","easeOut","repeat","yoyo","sceneOffset","sceneDuration","contactPanelAllowance","contactPinScene","codefactoryTween","y","force3D"],"mappings":"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"}