<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/chrisgannon/pen/rLNNge?q=device&order=popularity&depth=everything&show_forks=false" />
<script src="https://use.typekit.net/sxm0sex.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">body {
background-color:#FFF;
overflow: hidden;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.devicesSVG{
position:absolute;
width:100%;
height:100%;
/* visibility:hidden; */
overflow:hidden
}
.horizonSVG{
position:absolute;
width:100%;
height:100%;
/* visibility:hidden; */
overflow:visible
}
svg{
/* top:-100px; */
overflow:visible;
visibility:hidden;
/* max-width:740px; */
/* left:300px; */
}
.horizon{
text-anchor:middle;
fill:#7D7D7D;
font-size:64px;
font-family: museo-sans-rounded,sans-serif;
}
#visitText a{
text-anchor:middle;
fill:#A5A7AA;
font-size:32px;
font-family: museo-sans-rounded,sans-serif;
opacity:1;
}
#visitText a:hover{
fill:#EA5679;
}</style></head><body>
<svg class="horizonSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMaxYMid meet" text-rendering="optimizeSpeed">
<defs>
<linearGradient id="warmSkyGrad" gradientUnits="userSpaceOnUse" x1="418.5291" y1="12" x2="418.5291" y2="419.5709">
<stop offset="0" style="stop-color:#E84778"/>
<stop offset="0.1552" style="stop-color:#EE6F7A"/>
<stop offset="0.3347" style="stop-color:#F4967C"/>
<stop offset="0.5122" style="stop-color:#F9B57D"/>
<stop offset="0.6847" style="stop-color:#FCCB7E"/>
<stop offset="0.85" style="stop-color:#FED87F"/>
<stop offset="1" style="stop-color:#FFDD7F"/>
</linearGradient>
<linearGradient id="mountainSkyGrad" gradientUnits="userSpaceOnUse" x1="400" y1="65.7474" x2="400" y2="573.9511">
<stop offset="0" style="stop-color:#E5F9FA"/>
<stop offset="1" style="stop-color:#FFFFFF"/>
</linearGradient>
<clipPath id="mainLogoMask">
<circle class="mainLogoMaskCircle" cx="400" cy="215" r="203.8"/>
</clipPath>
</defs>
<rect class="skyBg" x="-400" y="-300" fill="url(#mountainSkyGrad)" width="1600" height="1200"/>
<g class="mainLogoGroup">
<g class="maskedLogoGroup" clip-path="url(#mainLogoMask)">
<rect class="warmSkyBg" fill="url(#warmSkyGrad)" width="1900" height="1200" x="-800" y="-600" opacity="0"/>
<circle class="logoSun" fill="#FFFCEA" cx="400" cy="215" r="55.3"/>
<g class="waterGroup">
<rect id="waterCircle" x="0.2" fill="#5DB3C6" width="2014.1" height="278"/>
<path fill="#A5DCE4" d="M1710,0c-0.4,2.9-2.1,7.4-5.1,13.1c-15.3,21.7-54.3,38-89,40.2c-36.6,2.3-100.9,7.3-102.9,16.5
c-2,9.2,44.9,15.6,54.8,20.3c19.6,9.2,1.5,25.4-44.6,37.3c-26.2,6.8-106.5,18.5-147,23.7C1007,198.8,0,278,0,278v269h1007h0.2H2014
V0C2014,0,1743,0,1710,0z"/>
</g>
</g>
</g>
<g class="allMountains" >
<g class="smallGroup">
<g id="small2_1_">
<polygon fill="#D9D4E2" points="1530.4,229.3 1825.5,489.1 1240.1,489.1 "/>
<polygon fill="#D9D4E2" points="1146.9,258.6 1213.3,305 1230.4,290.6 1506.1,489.1 836.2,489.1 "/>
</g>
<g id="small1_1_">
<polygon fill="#D9D4E2" points="2519.4,229.3 2814.5,489.1 2229.1,489.1 "/>
<polygon fill="#D9D4E2" points="2135.9,258.6 2202.3,305 2219.4,290.6 2495.1,489.1 1825.2,489.1 "/>
</g>
</g>
<g class="medGroup">
<g id="med3_1_">
<polygon fill="#B3A8C7" points="1824.4,134.3 2266.3,489.1 1334,489.1 "/>
<polygon fill="#B3A8C7" points="862.6,143.1 1382.8,489.1 408,489.1 "/>
</g>
<g id="med1_4_">
<polygon fill="#B3A8C7" points="3682.4,134.3 4124.3,489.1 3192,489.1 "/>
<polygon fill="#B3A8C7" points="2720.6,143.1 3240.8,489.1 2266,489.1 "/>
</g>
<g id="med1_3_">
<polygon fill="#B3A8C7" points="5540.4,134.3 5982.3,489.1 5050,489.1 "/>
<polygon fill="#B3A8C7" points="4578.6,143.1 5098.8,489.1 4124,489.1 "/>
</g>
</g>
<g class="bigGroup">
<g id="big_7_">
<polygon fill="#7D76AA" points="541,12 1270.2,489.1 0,489.1 "/>
<polygon fill="#7D76AA" points="2240.2,0 1511,489.1 2676,489.1 "/>
</g>
<g id="big_6_">
<polygon fill="#7D76AA" points="3217,12 3946.2,489.1 2676,489.1 "/>
<polygon fill="#7D76AA" points="4916.2,0 4187,489.1 5352,489.1 "/>
</g>
<g id="big_5_">
<polygon fill="#7D76AA" points="5893,12 6622.2,489.1 5352,489.1 "/>
<polygon fill="#7D76AA" points="7592.2,0 6863,489.1 8028,489.1 "/>
</g>
<g id="big_4_">
<polygon fill="#7D76AA" points="8569,12 9298.2,489.1 8028,489.1 "/>
<polygon fill="#7D76AA" points="10268.2,0 9539,489.1 10704,489.1 "/>
</g>
</g>
</g>
<text class="horizon" x="50%" y="50%">horizon.io</text>
<g class="wholeChat">
<linearGradient id="chatPanelGrad" gradientUnits="userSpaceOnUse" x1="400" y1="375" x2="400" y2="182" >
<stop offset="0" style="stop-color:#FFEAB6;stop-opacity:0.6"/>
<stop offset="1" style="stop-color:#FEDA7F;stop-opacity:0"/>
</linearGradient>
<linearGradient id="chatMaskGrad" gradientUnits="userSpaceOnUse" x1="400" y1="205" x2="400" y2="182" >
<stop offset="0" style="stop-color:#EEEEEE;stop-opacity:1"/>
<stop offset="1" style="stop-color:#FEDA7F;stop-opacity:0"/>
</linearGradient>
<mask id="chatMask">
<rect class="chatMask" x="120" y="186" fill="url(#chatMaskGrad)" width="560" height="203"/>
</mask>
<rect class="chatPanel" x="140" y="186" fill="url(#chatPanelGrad)" width="520" height="203.1"/>
<g class="allChat" mask="url(#chatMask)">
<g class="chat0 chatMessage">
<g>
<circle cx="213.63" cy="410" r="16.7" fill="#e84778"/>
<path d="M213.63,403.21a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,403.21Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,422.26,219.79,419.48,213.63,419.48Z" fill="#fffcea"/>
</g>
<rect x="248.25" y="394.4" width="197.29" height="32.3" rx="6" ry="6" fill="#fffcea"/>
</g>
<g class="chat1 chatMessage">
<g>
<circle cx="586.37" cy="460.06" r="16.7" fill="#5db3c6"/>
<path d="M586.37,453.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,453.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,472.32,592.53,469.54,586.37,469.54Z" fill="#fffcea"/>
</g>
<rect x="443.44" y="443.91" width="111.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"/>
</g>
<g class="chat2 chatMessage">
<g>
<circle cx="586.37" cy="510.06" r="16.7" fill="#5db3c6"/>
<path d="M586.37,503.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,503.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,522.32,592.53,519.54,586.37,519.54Z" fill="#fffcea"/>
</g>
<rect x="483.44" y="493.91" width="71.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"/>
</g>
<g class="chat3 chatMessage">
<g>
<circle cx="213.63" cy="560.06" r="16.7" fill="#e84778"/>
<path d="M213.63,553.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,553.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,572.32,219.79,569.54,213.63,569.54Z" fill="#fffcea"/>
</g>
<rect x="248.25" y="543.97" width="136.29" height="32.3" rx="4.63" ry="4.63" fill="#fffcea"/>
</g>
<g class="chat4 chatMessage">
<g>
<circle cx="586.37" cy="610" r="16.7" fill="#5db3c6"/>
<path d="M586.37,603.21a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,586.37,603.21Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C595.2,622.26,592.53,619.48,586.37,619.48Z" fill="#fffcea"/>
</g>
<rect x="413.44" y="593.85" width="141.29" height="32.3" rx="4.63" ry="4.63" fill="#fff"/>
</g>
<g class="chat5 chatMessage">
<g>
<circle cx="213.63" cy="660.06" r="16.7" fill="#e84778"/>
<path d="M213.63,653.27a6.85,6.85,0,1,1-6.85,6.85A6.87,6.87,0,0,1,213.63,653.27Zm0,16.27c-6.16,0-8.83,2.78-9.74,4.08a16.68,16.68,0,0,0,19.48,0C222.46,672.32,219.79,669.54,213.63,669.54Z" fill="#fffcea"/>
</g>
<rect x="248.25" y="643.97" width="87.29" height="32.3" rx="4.63" ry="4.63" fill="#fffcea"/>
</g>
</g>
</g>
</svg>
<svg class="devicesSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMax meet">
<defs>
<clipPath id="desktopMask">
<rect class="desktopMask" x="59" y="154" fill="#009444" width="388" height="231"/>
</clipPath>
<clipPath id="iPadMask">
<rect class="iPadMask" x="509" y="215" fill="#ED1C24" width="166" height="224"/>
</clipPath>
<clipPath id="phoneMask">
<rect class="phoneMask" x="716" y="333" fill="#ED1C24" width="61" height="107"/>
</clipPath>
</defs>
<g id="allDevices" >
<g class="desktopGroup device">
<g clip-path="url(#desktopMask)">
<g class="desktopSVGContainer"></g>
</g>
<g>
<path fill="#707174" d="M208.9,416.3h83.2l-0.9-5.7c0,0-81.3,0-81.3,0L208.9,416.3z"/>
<rect x="61.3" y="156.3" fill="none" width="383" height="226.6"/>
<polygon fill="#A5A7AA" points="203.4,458.3 297.1,458.3 292.1,416.3 208.9,416.3 "/>
</g>
<g>
<path fill="#5A5A5A" d="M458.3,131.3H45.8c-6.6,0-12,5-12,11.1v121v115.7v22c0,6.1,5.4,11.1,12,11.1h163.8h81.9h166.8
c6.6,0,12-5,12-11.1v-86.8v-116v-55.9C470.3,136.3,464.8,131.3,458.3,131.3z M446.3,318.2V385h-387v-10V259.3V154.3h387v47.9V318.2
z"/>
<path fill="#9E9E9E" d="M255.4,398.6c0.1-0.1,0.4-1.9,0.3-2.3c-0.1-0.4-1-1.6-1.6-2.1c-0.3-0.6-0.7-2.2-0.8-2.5
c-0.2-0.7-0.4-1-0.7-1.2c-0.2-0.2-0.6-0.7-1.8-0.8c-1.2-0.1-2.2,0.9-2.5,1.7c-0.1,0.2-0.2,0.8-0.4,1.9c-0.2,1.2-0.9,1.6-2.2,3
c-0.1,0.1-0.1,0.2-0.2,0.2c-0.1,0.3-0.4,1.1,0.1,1.6c0.4,0.4,0.7,0.6,1,0.7c-0.1,0.1-0.4,0.7,0.1,1c0.1,0.1,0.2,0.1,0.3,0.1
c-0.1,0.8-0.2,1.4-0.1,1.8c0,0.5,0.2,2.1,0.4,2.5c0.2,0.4,0.5,1.3,1.1,1.4c0.5,0.1,0.9-0.3,1.4-0.5s1.2-0.7,1.7-0.9
c0.2-0.1,0.3-0.1,0.4-0.2c0.3,0.3,0.9,0.9,1.2,1.1c0.2,0.1,0.5,0.2,0.9,0c0.4-0.2,0.8-1.3,1.1-2.2c0.3-0.9,0.5-1.7,0.3-4.1
C255.4,398.8,255.4,398.7,255.4,398.6z M247.5,400c-0.2,0-0.3,0-0.4,0C247.3,400,247.4,400,247.5,400z"/>
</g>
</g>
<g class="iPadGroup device" >
<g clip-path="url(#iPadMask)">
<g class="iPadSVGContainer"></g>
</g>
<g>
<path fill="#5A5A5A" d="M680.1,195h-177c-6.6,0-12,5.4-12,12v108.5v101.1v0.5v29.5c0,6.6,5.4,12,12,12h177c6.6,0,12-5.4,12-12
v-60.2v-0.5V273.1V207C692.1,200.4,686.7,195,680.1,195z M674.1,277.3V389v0.5v49.1h-165V414v-0.5V311.3v-95.8h165V277.3z"/>
</g>
<g>
<circle fill="#7C7D80" cx="591.3" cy="204.7" r="1.4"/>
<g>
<path fill="#444444" d="M591.6,444.3c-2.1,0-3.9,1.6-4.1,3.7c0-0.2,0-0.3,0-0.5c0-2.3,1.9-4.2,4.2-4.2s4.2,1.9,4.2,4.2
c0,0.2,0,0.3,0,0.5C595.5,446,593.8,444.3,591.6,444.3z"/>
<path fill="#7B7C7F" d="M591.6,444.3c2.1,0,3.9,1.6,4.1,3.7c-0.2,2.1-2,3.7-4.1,3.7s-3.9-1.6-4.1-3.7
C587.7,446,589.5,444.3,591.6,444.3z"/>
</g>
</g>
</g>
<g class="phoneGroup device">
<g clip-path="url(#phoneMask)">
<g class="phoneSVGContainer"></g>
</g>
<g>
<rect x="716.7" y="334" fill="none" width="59.8" height="105.3"/>
<path fill="#5A5A5A" d="M768.7,315c0,0-2.5,0-2.9,0l-0.1,0h-5.5l-2.2,0h-33.2c-6.7,0-12.2,5.4-12.2,12v6.6v0.5v0.4v5.3v8.9v7.6
v2.1v7.4v1v79.5c0,6.6,5.5,12,12.2,12h43.8c6.7,0,12.2-5.4,12.2-12V327C780.8,320.4,775.3,315,768.7,315z M776.5,439.3h-59.8V334
h59.8V439.3z"/>
</g>
<g>
<circle fill="#7C7D80" cx="746.7" cy="324.8" r="1.4"/>
<g>
<path fill="#444444" d="M746.6,445.2c-2.1,0-3.9,1.6-4.1,3.7c0-0.2,0-0.3,0-0.5c0-2.3,1.9-4.2,4.2-4.2c2.3,0,4.2,1.9,4.2,4.2
c0,0.2,0,0.3,0,0.5C750.5,446.9,748.7,445.2,746.6,445.2z"/>
<path fill="#7B7C7F" d="M746.6,445.2c2.1,0,3.9,1.6,4.1,3.7c-0.2,2.1-2,3.7-4.1,3.7c-2.1,0-3.9-1.6-4.1-3.7
C742.7,446.9,744.4,445.2,746.6,445.2z"/>
</g>
</g>
</g>
</g>
<text id="visitText" x="32%" y="90%"><a xlink:href="http://horizon.io" target="blank">Visit Horizon.io</a></text>
</svg>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/AnticipateEase.min.js'></script>
<script >var xmlns = "http://www.w3.org/2000/svg",
xlinkns = "http://www.w3.org/1999/xlink",
select = function(s) {
return document.querySelector(s);
},
selectAll = function(s) {
return document.querySelectorAll(s);
},
devicesSVG = select('.devicesSVG'),
horizonSVG = select('.horizonSVG'),
desktopSVGContainer = select('.desktopSVGContainer'),
iPadSVGContainer = select('.iPadSVGContainer'),
phoneSVGContainer = select('.phoneSVGContainer'),
desktopSVG = horizonSVG.cloneNode(true),
iPadSVG = horizonSVG.cloneNode(true),
phoneSVG = horizonSVG.cloneNode(true)
desktopSVGContainer.appendChild(desktopSVG);
iPadSVGContainer.appendChild(iPadSVG);
phoneSVGContainer.appendChild(phoneSVG);
document.body.removeChild(horizonSVG);
desktopSVG.setAttribute('class', 'desktopSVG');
iPadSVG.setAttribute('class', 'iPadSVG');
phoneSVG.setAttribute('class', 'phoneSVG');
var allMountains = selectAll('.allMountains'),
warmSkyBg = selectAll('.warmSkyBg'),
smallGroup = selectAll('.smallGroup'),
medGroup = selectAll('.medGroup'),
bigGroup = selectAll('.bigGroup'),
logoSun = selectAll('.logoSun'),
mainLogoGroup = selectAll('.mainLogoGroup'),
mainLogoMaskCircle = selectAll('.mainLogoMaskCircle'),
waterGroup = selectAll('.waterGroup'),
notifyDisp = selectAll('.notifyDisp')
//console.log(numPeaks)
TweenMax.set('svg', {
visibility: 'visible'
})
TweenMax.set(desktopSVGContainer, {
scale: 0.48,
x: -69,
y: 6,
transformOrigin: '50% 50%',
svgOrigin: '252 270'
})
TweenMax.set(iPadSVGContainer, {
scale: 0.375,
x: 74,
y: 11,
transformOrigin: '50% 50%',
svgOrigin: '591 326'
})
TweenMax.set(phoneSVGContainer, {
scale: 0.185,
x: 65,
y: 16,
transformOrigin: '50% 50%',
svgOrigin: '746 386'
})
TweenMax.set(allMountains, {
x: '-=950',
y: 111
})
TweenMax.set(waterGroup, {
x: 800,
y: 311 + 78
})
TweenMax.set('.phoneGroup', {
x: -725, //changed in 008
y: 0,
scale: 1.05,
transformOrigin: '0% 100%'
})
TweenMax.set('.iPadGroup', {
x: -92,
y: 0
})
TweenMax.set(mainLogoMaskCircle, {
attr: {
r: 560
}
})
TweenMax.set(logoSun, {
attr: {
cy: 100
}
})
//DEVICE SPECIFIC ANIMATION vv
TweenMax.set(iPadSVG.querySelector('.waterGroup'), {
y: 500
})
TweenMax.set(iPadSVG.querySelector('.wholeChat'), {
y: 111
})
TweenMax.set(phoneSVG.querySelector('.wholeChat'), {
y: 58,
scale: 0.7,
transformOrigin: '50% 0%'
})
//DEVICE SPECIFIC ANIMATION ^^
//DEVICE SPECIFIC ANIMATION vv
TweenMax.set(desktopSVG.querySelector('.horizon'), {
y: '-=40'
})
//DEVICE SPECIFIC ANIMATION ^^
var tl = new TimelineMax({
paused: true,
repeat: -1,
repeatDelay: 1
});
tl.staggerFrom([smallGroup, medGroup, bigGroup], 0.6, {
y: '+=400',
ease: Expo.easeOut
}, 0.1, '-=1')
.to(smallGroup, 4, {
x: -(2 * 1200),
ease: Power2.easeInOut
})
.to(medGroup, 4, {
x: -(3 * 1858),
ease: Power2.easeInOut
}, '-=4')
.to(bigGroup, 4, {
x: -(4 * 2676),
ease: Power2.easeInOut
}, '-=4')
.to('.horizon', 1, {
alpha: 0,
x: '-=400',
ease: Power2.easeIn
}, '-=4')
.to(waterGroup, 1, {
x: -1000,
ease: Power2.easeOut
}, '-=1.8')
.to(warmSkyBg, 1.2, {
alpha: 1,
ease: Power2.easeOut
}, '-=2')
.from(logoSun, 1.2, {
attr: {
cx: '+=500'
},
ease: Power2.easeOut
}, '-=2')
.from('.chatPanel', 0.6, {
scaleY: 0,
transformOrigin: '50% 100%',
ease: Power3.easeInOut
}, '-=0.6')
.to('.chatMessage', 0.6, {
y: '-=50',
//delay:0.25,
ease: Anticipate.easeIn
}, '-=0.6')
.from('.chat0 rect', 0.2, {
scaleX: 0.1,
y: '+=30',
transformOrigin: '0% 100%',
ease: Anticipate.easeIn
}, '-=0.2')
.to('.chatMessage', 0.4, {
y: '-=50',
delay: 0.25,
ease: Anticipate.easeIn
})
.from('.chat1 rect', 0.2, {
scaleX: 0.1,
y: '+=30',
transformOrigin: '100% 100%',
ease: Anticipate.easeIn
}, '-=0.2')
.to('.chatMessage', 0.4, {
y: '-=50',
delay: 0.25,
ease: Anticipate.easeIn
})
.from('.chat2 rect', 0.2, {
scaleX: 0.1,
y: '+=30',
transformOrigin: '100% 100%',
ease: Anticipate.easeIn
}, '-=0.2')
.to('.chatMessage', 0.4, {
y: '-=50',
delay: 0.25,
ease: Anticipate.easeIn
})
.from('.chat3 rect', 0.2, {
scaleX: 0.1,
y: '+=30',
transformOrigin: '0% 100%',
ease: Anticipate.easeIn
}, '-=0.2')
.to('.chatMessage', 0.4, {
y: '-=50',
delay: 0.25,
ease: Anticipate.easeIn
})
.from('.chat4 rect', 0.2, {
scaleX: 0.1,
y: '+=30',
transformOrigin: '100% 100%',
ease: Anticipate.easeIn
}, '-=0.2')
.to('.chatMessage', 0.4, {
y: '-=50',
delay: 0.25,
ease: Anticipate.easeIn
})
.from('.chat5 rect', 0.2, {
scaleX: 0.1,
y: '+=30',
transformOrigin: '0% 100%',
ease: Anticipate.easeIn
}, '-=0.2')
.to('.chatPanel', 1, {
alpha: 0,
delay: 0
})
.to('.chatMessage', 1, {
y: '-=200',
alpha: 0,
ease: Back.easeIn.config(0.6)
}, '-=1')
.to(mainLogoMaskCircle, 1, {
attr: {
r: 203.8
},
ease: Power3.easeInOut
}, '-=0.5')
//DEVICE SPECIFIC ANIMATION vv
.to(iPadSVG.querySelector('.waterGroup'), 1, {
y: '-=276',
x: '-=100',
ease: Power3.easeInOut
}, '-=1')
.to(phoneSVG.querySelector('.waterGroup'), 1, {
y: '-=170',
x: '-=100',
ease: Power3.easeInOut
}, '-=1')
.to(desktopSVG.querySelector('.waterGroup'), 1, {
y: '-=170',
x: '-=100',
ease: Power3.easeInOut
}, '-=1')
//DEVICE SPECIFIC ANIMATION ^^
//DEVICE SPECIFIC ANIMATION vv
.to(iPadSVG.querySelector('.mainLogoGroup'), 1, {
scale: 0.7,
x: 418,
y: 326,
transformOrigin: '0% 0%',
ease: Power3.easeInOut
}, '-=1')
.to(phoneSVG.querySelector('.mainLogoGroup'), 1, {
scale: 0.7,
x: 416,
y: 326,
transformOrigin: '0% 0%',
ease: Power3.easeInOut
}, '-=1')
.to(desktopSVG.querySelector('.mainLogoGroup'), 1, {
scale: 0.7,
x: 416,
y: 290,
transformOrigin: '0% 0%',
ease: Power3.easeInOut
}, '-=1')
//DEVICE SPECIFIC ANIMATION ^^
.to(logoSun, 1, {
attr: {
cy: 215,
r: 75.3
},
ease: Anticipate.easeOut
}, '-=1')
.set('.horizon', {
x: 0
})
.to(mainLogoGroup, 1, {
alpha: 0,
delay: 0,
ease: Power1.easeIn
})
.to('.horizon', 1, {
alpha: 1,
ease: Power2.easeIn
})
tl.timeScale(0.6)
tl.play(0)
//ScrubGSAPTimeline(tl)
//# sourceURL=pen.js
</script>
</body></html>
