<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/asistapl/pen/mPLWXm?limit=all&page=11&q=service" />
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">body {
padding: 0 30px;
}
svg {
display: block;
max-width: 800px;
margin: 70px auto 0;
}
@media (max-width: 800px) {
svg {
margin: 8vw auto 0;
}
}
svg[hidden] {
visibility: hidden;
}
.ra-labels {
position: relative;
}
.ra-labels span {
width: 100%;
position: absolute;
top: 0;
left: 0;
margin: 50px 0;
font: 300 36px Roboto, sans-serif;
text-align: center;
color: #888;
}
@media (max-width: 800px) {
.ra-labels span {
margin: 8vw 0;
font-size: 5vw;
}
}
@media (max-width: 500px) {
.ra-labels span {
font-size: 8vw;
}
}
</style></head><body>
<svg id="ra" viewBox="0 0 720.91 362.95" role="img" aria-labelledby="ra-title" hidden>
<title id="ra-title">Retargeting Animation</title>
<defs>
<path id="ra-bf-ad" d="M573.6,225.98H434.98v-97.5H573.6V225.98z"/>
<path id="ra-yt-ad" d="M600.29,151.37H452.12v-90.5h148.17V151.37z"/>
</defs>
<clipPath id="ra-screen-mask">
<path d="M97.99,25h524.93v297.96H97.99V25z"/>
</clipPath>
<g id="ra-mac">
<path id="ra-mac-base" fill="#ccc" d="M684.21,362.95H360.45H36.7c-19.49,0-35.44-6.69-36.7-15l360.45,0.11l360.45-0.11C719.65,356.27,703.7,362.95,684.21,362.95z"/>
<path id="ra-mac-open" fill="#888" d="M410.95,347.96c-1.91,4.14-5.94,7-11,7h-39h-1h-39c-5.06,0-9.09-2.86-11-7H410.95z"/>
<path id="ra-mac-lid" fill="#333" d="M360.45,348.07l-287.46-0.11V20c0-10.83,9.44-20,20.27-20h267.19h267.19c10.83,0,20.27,9.17,20.27,20v327.96L360.45,348.07z"/>
<path id="ra-mac-screen" fill="#e5e5e5" d="M97.99,25h524.93v297.96H97.99V25z"/>
<path id="ra-mac-camera" fill="#000" d="M365.15,12.94c0,2.38-1.93,4.31-4.31,4.31s-4.3-1.93-4.3-4.31s1.92-4.31,4.3-4.31S365.15,10.56,365.15,12.94z"/>
</g>
<g id="ra-yt" clip-path="url(#ra-screen-mask)">
<path id="ra-yt-c2-rect" fill="#fff" d="M607.25,322.96H445.16V53.48h162.08V322.96z"/>
<g id="ra-yt-c2-items" fill="#ddd">
<path d="M600.29,312.07H498.2v-26.21h102.08V312.07z"/>
<path d="M600.29,279.86H498.2v-26.21h102.08V279.86z"/>
<path d="M600.29,247.99H498.2v-26.21h102.08V247.99z"/>
<path d="M600.29,215.79H498.2v-26.21h102.08V215.79z"/>
<path d="M600.29,183.58H498.2v-26.21h102.08V183.58z"/>
</g>
<g id="ra-yt-c2-thumbnails" fill="#bbb">
<path d="M498.2,312.07h-46.08v-26.21h46.08V312.07z"/>
<path d="M498.2,279.86h-46.08v-26.21h46.08V279.86z"/>
<path d="M498.2,247.99h-46.08v-26.21h46.08V247.99z"/>
<path d="M498.2,215.79h-46.08v-26.21h46.08V215.79z"/>
<path d="M498.2,183.58h-46.08v-26.21h46.08V183.58z"/>
</g>
<path id="ra-yt-c1-rect" fill="#fff" d="M442.16,304.07h-328.5v-67.09h328.5V304.07z"/>
<path id="ra-yt-c1-rect" fill="#fff" d="M442.16,322.96h-328.5v-15.89h328.5V322.96z"/>
<g id="ra-yt-c1-content">
<path fill="#333" d="M318.16,249.35V256h-197.5v-6.65H318.16z"/>
<path fill="#bbb" d="M236.83,266.81h-95.04v-4.27h95.04V266.81z"/>
<path fill="#e62117" d="M177.66,279.6h-35.88v-9h35.88V279.6z"/>
<path fill="#333" d="M435.87,273.91v6.64h-48.96v-6.64H435.87z"/>
<path fill="#167ac6" d="M435.87,284.98h-61.33v-0.95h61.33V284.98z"/>
<path fill="#bbb" d="M120.66,262.54h17.06v17.06h-17.06V262.54z"/>
<path fill="#ddd" d="M418.5,295.52h-13.96v-6.83h13.96V295.52z"/>
<path fill="#ddd" d="M147.91,295.52h-27.25v-6.83h27.25V295.52z"/>
<path fill="#ddd" d="M178.75,295.52H151.5v-6.83h27.25V295.52z"/>
<path fill="#ddd" d="M209.25,295.52H182v-6.83h27.25V295.52z"/>
<path fill="#ddd" d="M435.87,295.52h-13.96v-6.83h13.96V295.52z"/>
</g>
<path id="ra-yt-video" fill="#333" d="M113.66,53.48h328.5v183.5h-328.5V53.48z"/>
<g id="ra-yt-play">
<path fill="#4a4a4a" d="M304.83,145.23c0,14.87-12.05,26.92-26.92,26.92S251,160.09,251,145.23c0-14.87,12.05-26.92,26.92-26.92S304.83,130.36,304.83,145.23z"/>
<path fill="#fff" d="M269.41,132.1l22.73,13.12l-22.73,13.12V132.1z"/>
</g>
<g id="ra-yt-navigation">
<path fill="#bbb" d="M118.54,41.35h-4.88v-3.81h4.88V41.35z"/>
<g id="ra-yt-logo">
<path fill="#333" d="M136.92,42.79H125.9c-0.62,0-1.11-0.5-1.11-1.11v-4.46c0-0.62,0.5-1.11,1.11-1.11h11.02c0.62,0,1.11,0.5,1.11,1.11v4.46C138.04,42.29,137.54,42.79,136.92,42.79z"/>
<path fill="#e62117" d="M149.46,45.2h-10.47c-1.49,0-2.7-1.21-2.7-2.7V36.4c0-1.49,1.21-2.7,2.7-2.7h10.47c1.49,0,2.7,1.21,2.7,2.7v6.09C152.16,43.99,150.95,45.2,149.46,45.2z"/>
</g>
<path fill="#fff" d="M417.16,45.2h-250.5v-11.5h250.5V45.2z"/>
<path fill="#bbb" d="M442.16,45.2h-25v-11.5h25V45.2z"/>
<path fill="#bbb" d="M571.91,44.48h-22V33.81h22V44.48z"/>
<path fill="#167ac6" d="M607.25,44.48h-29.42V33.81h29.42V44.48z"/>
</g>
</g>
<g id="ra-bf" clip-path="url(#ra-screen-mask)">
<path fill="#ccc" id="ra-bf-bottom-rect" d="M573.6,322.96h-81.13v-85.89h81.13V322.96z"/>
<path fill="#ccc" id="ra-bf-bottom-rect" d="M487.29,322.96H355.98v-85.89h131.31V322.96z"/>
<g id="ra-bf-bottom-item" fill="#ccc">
<path d="M191.48,310.44h-44.17v-29.33h44.17V310.44z"/>
<path fill="#555" d="M326.98,291.78H200.31v-7h126.67V291.78z"/>
<path d="M257.64,300.46h-57.33v-4.99h57.33V300.46z"/>
<path d="M239.93,306.77h-39.62v-2.5h39.62V306.77z M283.45,304.28h-39.62v2.5h39.62V304.28z M326.98,304.28h-39.62v2.5h39.62V304.28z"/>
</g>
<g id="ra-bf-bottom-item" fill="#ccc">
<path d="M191.48,268.94h-44.17v-29.33h44.17V268.94z"/>
<path fill="#555" d="M326.98,250.28H200.31v-7h126.67V250.28z"/>
<path d="M257.64,258.96h-57.33v-4.99h57.33V258.96z"/>
<path d="M239.93,265.27h-39.62v-2.5h39.62V265.27z M283.45,262.78h-39.62v2.5h39.62V262.78z M326.98,262.78h-39.62v2.5h39.62V262.78z"/>
</g>
<path id="ra-bf-c1-rect" fill="#555" d="M430.3,225.98H147.31v-97.5H430.3V225.98z"/>
<g id="ra-bf-c1-rect-items">
<path fill="#fff" d="M244.98,189.48h172.66v24H244.98V189.48z"/>
<path fill="#ee3322" d="M417.63,184.98h-108v-8.75h108V184.98z"/>
</g>
<g id="ra-bf-thumbnails" fill="#ccc">
<path d="M191.48,117.73h-44.17V88.39h44.17V117.73z"/>
<path d="M239.24,117.73h-44.17V88.39h44.17V117.73z"/>
<path d="M287.01,117.73h-44.17V88.39h44.17V117.73z"/>
<path d="M334.77,117.73h-44.17V88.39h44.17V117.73z"/>
<path d="M382.54,117.73h-44.17V88.39h44.17V117.73z"/>
<path d="M430.3,117.73h-44.17V88.39h44.17V117.73z"/>
<path d="M478.07,117.73H433.9V88.39h44.17V117.73z"/>
<path d="M525.84,117.73h-44.17V88.39h44.17V117.73z"/>
<path d="M573.6,117.73h-44.17V88.39h44.17V117.73z"/>
</g>
<path id="ra-bf-navbar" fill="#eaeaea" d="M622.92,79.6H97.99V60.48h524.93V79.6z"/>
<g id="ra-bf-menu-dots" fill="#333">
<path d="M560.23,70.04c0,1.55-1.26,2.81-2.81,2.81s-2.81-1.26-2.81-2.81s1.26-2.81,2.81-2.81S560.23,68.49,560.23,70.04z"/>
<path d="M573.6,70.04c0,1.55-1.26,2.81-2.81,2.81s-2.81-1.26-2.81-2.81s1.26-2.81,2.81-2.81S573.6,68.49,573.6,70.04z"/>
</g>
<g id="ra-bf-menu-items" fill="#bbb">
<path d="M174.35,72.85h-27.04v-5.63h27.04V72.85z"/>
<path d="M216.65,72.85h-27.04v-5.63h27.04V72.85z"/>
<path d="M258.95,72.85h-27.04v-5.63h27.04V72.85z"/>
<path d="M301.25,72.85h-27.04v-5.63h27.04V72.85z"/>
<path d="M343.55,72.85h-27.04v-5.63h27.04V72.85z"/>
<path d="M385.85,72.85h-27.04v-5.63h27.04V72.85z"/>
</g>
<g id="ra-bf-dots" fill="#ffee00">
<path d="M434.98,42.14c0,5.25-4.25,9.5-9.5,9.5s-9.5-4.25-9.5-9.5s4.25-9.5,9.5-9.5S434.98,36.9,434.98,42.14z"/>
<path d="M458.08,42.14c0,5.25-4.25,9.5-9.5,9.5s-9.5-4.25-9.5-9.5s4.25-9.5,9.5-9.5S458.08,36.9,458.08,42.14z"/>
<path d="M481.18,42.14c0,5.25-4.25,9.5-9.5,9.5s-9.5-4.25-9.5-9.5s4.25-9.5,9.5-9.5S481.18,36.9,481.18,42.14z"/>
<path d="M504.29,42.14c0,5.25-4.25,9.5-9.5,9.5s-9.5-4.25-9.5-9.5s4.25-9.5,9.5-9.5S504.29,36.9,504.29,42.14z"/>
<path d="M527.39,42.14c0,5.25-4.25,9.5-9.5,9.5s-9.5-4.25-9.5-9.5s4.25-9.5,9.5-9.5S527.39,36.9,527.39,42.14z"/>
<path d="M550.5,42.14c0,5.25-4.25,9.5-9.5,9.5s-9.5-4.25-9.5-9.5s4.25-9.5,9.5-9.5S550.5,36.9,550.5,42.14z"/>
<path fill="#ee3322" d="M573.6,42.14c0,5.25-4.25,9.5-9.5,9.5s-9.5-4.25-9.5-9.5s4.25-9.5,9.5-9.5S573.6,36.9,573.6,42.14z"/>
</g>
<path id="ra-bf-logo" fill="#ee3322" d="M255.31,51.64h-108v-19h108V51.64z"/>
</g>
<g id="ra-fb" clip-path="url(#ra-screen-mask)">
<g id="ra-c1" fill="#c7c7c7">
<path fill="#999" d="M222.52,54.66h-49.06v-6.52h49.06V54.66z"/>
<path d="M206.52,63.91h-33.06v-4.89h33.06V63.91z"/>
<path d="M215.95,84.71h-42.5v-4.89h42.5V84.71z"/>
<path d="M233.95,93.96h-60.5v-4.89h60.5V93.96z"/>
<path fill="#999" d="M189.17,75.46h-25.72v-2.87h25.72V75.46z"/>
<path d="M215.95,103.21h-42.5v-4.89h42.5V103.21z"/>
<path d="M215.95,112.46h-42.5v-4.89h42.5V112.46z"/>
<path d="M215.95,121.71h-42.5v-4.89h42.5V121.71z"/>
<path d="M215.95,143.32h-42.5v-4.89h42.5V143.32z"/>
<path d="M215.95,152.57h-42.5v-4.89h42.5V152.57z"/>
<path fill="#999" d="M189.17,134.07h-25.72v-2.87h25.72V134.07z"/>
<path d="M215.95,161.82h-42.5v-4.89h42.5V161.82z"/>
<path d="M233.95,84.71h-6.88v-4.89h6.88V84.71z"/>
<path d="M233.95,112.46h-6.88v-4.89h6.88V112.46z"/>
<path d="M233.95,161.82h-6.88v-4.89h6.88V161.82z"/>
<path d="M215.95,183.42h-42.5v-4.89h42.5V183.42z"/>
<path d="M215.95,192.67h-42.5v-4.89h42.5V192.67z"/>
<path fill="#999" d="M189.17,174.17h-25.72v-2.87h25.72V174.17z"/>
<path d="M215.95,201.92h-42.5v-4.89h42.5V201.92z"/>
<path d="M233.95,201.59h-6.88v-4.89h6.88V201.59z"/>
<path d="M233.95,211.17h-60.5v-4.89h60.5V211.17z"/>
<path d="M215.95,220.42h-42.5v-4.89h42.5V220.42z"/>
<path d="M215.95,229.67h-42.5v-4.89h42.5V229.67z"/>
<path d="M233.95,229.34h-6.88v-4.89h6.88V229.34z"/>
<path d="M215.95,238.92h-42.5v-4.89h42.5V238.92z"/>
<path d="M215.95,248.17h-42.5v-4.89h42.5V248.17z"/>
<path d="M215.95,257.42h-42.5v-4.89h42.5V257.42z"/>
<path d="M233.95,257.09h-6.88v-4.89h6.88V257.09z"/>
</g>
<g id="ra-c2-rects" fill="#fff">
<path d="M430.29,105.44H240.45v-58h189.83V105.44z"/>
<path d="M430.29,170.64H240.45v-60.88h189.83V170.64z"/>
<path d="M430.29,301.06H240.45V174.98h189.83V301.06z"/>
<path d="M430.29,322.96H240.45v-17.57h189.83V322.96z"/>
</g>
<path id="ra-fb-c3-rect" fill="#fff" d="M542.12,257.42h-107.5V142.05h107.5V257.42z"/>
<g id="ra-fb-c3-items" fill="#c7c7c7">
<g>
<path d="M456.79,164.03h-15.75v-15.75h15.75V164.03z"/>
<path d="M486.7,155.78h-27.54v-5.13h27.54V155.78z"/>
<path d="M501.37,161.65h-42.21v-3.41h42.21V161.65z"/>
</g>
<g>
<path d="M456.79,185.86h-15.75v-15.75h15.75V185.86z"/>
<path d="M501.37,177.61h-42.21v-5.13h42.21V177.61z"/>
<path d="M486.7,183.49h-27.54v-3.41h27.54V183.49z"/>
</g>
<g>
<path d="M456.79,207.53h-15.75v-15.75h15.75V207.53z"/>
<path d="M486.7,199.28h-27.54v-5.13h27.54V199.28z"/>
<path d="M501.37,205.15h-42.21v-3.41h42.21V205.15z"/>
</g>
<g>
<path d="M456.79,229.24h-15.75v-15.75h15.75V229.24z"/>
<path d="M501.37,220.99h-42.21v-5.13h42.21V220.99z"/>
<path d="M486.7,226.86h-27.54v-3.41h27.54V226.86z"/>
</g>
<g>
<path d="M456.79,251.13h-15.75v-15.75h15.75V251.13z"/>
<path d="M486.7,242.88h-27.54v-5.13h27.54V242.88z"/>
<path d="M501.37,248.76h-42.21v-3.41h42.21V248.76z"/>
</g>
</g>
<g id="ra-c2-items" fill="#c7c7c7">
<path d="M280.6,59.87h-33.06v-4.89h33.06V59.87z M316.25,54.98h-33.06v4.89h33.06V54.98z M351.9,54.98h-33.06v4.89h33.06V54.98z"/>
<path d="M385.62,97.23h-33.06v-7.54h33.06V97.23z"/>
<path fill="#46629e" d="M421.58,97.23h-33.06v-7.54h33.06V97.23z"/>
<path d="M263.29,132.57h-15.75v-15.75h15.75V132.57z"/>
<path d="M263.29,82.03h-15.75V66.28h15.75V82.03z"/>
<path d="M293.2,124.32h-27.54v-5.13h27.54V124.32z"/>
<path d="M307.87,130.19h-42.21v-3.41h42.21V130.19z"/>
<path d="M312.29,75.86h-42.21v-3.41h42.21V75.86z"/>
<path d="M420.95,141.91H247.54v-3.41h173.42V141.91z"/>
<path d="M263.29,198.46h-15.75v-15.75h15.75V198.46z"/>
<path d="M293.2,190.21h-27.54v-5.13h27.54V190.21z"/>
<path d="M307.87,196.09h-42.21v-3.41h42.21V196.09z"/>
<path d="M356.7,207.8H247.54v-3.41H356.7V207.8z"/>
<path d="M422.7,292.48H247.54v-79.21H422.7V292.48z"/>
<path d="M402.95,148.01H247.54v-3.41h155.42V148.01z"/>
<path d="M322.29,154.27h-74.75v-3.41h74.75V154.27z"/>
</g>
<path id="ra-navbar" fill="#46629e" d="M622.95,42.35h-525V25h525V42.35z"/>
<g id="ra-navbar-content" fill="#23355b">
<path fill="#fff" d="M181.86,37.92h-8.41v-8.5h8.41V37.92z"/>
<path fill="#fff" d="M383.8,37.92H184.64v-8.5H383.8V37.92z"/>
<path d="M396.59,36.91h-6.48v-6.48h6.48V36.91z"/>
<path fill="#fff" d="M423.27,36.91h-24.09v-6.48h24.09V36.91z"/>
<path fill="#fff" d="M449.83,36.91h-24.09v-6.48h24.09V36.91z"/>
<path fill="#fff" d="M476.39,36.91H452.3v-6.48h24.09V36.91z"/>
<path d="M489.15,33.67c0,1.79-1.45,3.24-3.24,3.24s-3.24-1.45-3.24-3.24c0-1.79,1.45-3.24,3.24-3.24S489.15,31.89,489.15,33.67z"/>
<path d="M501.94,33.67c0,1.79-1.45,3.24-3.24,3.24c-1.79,0-3.24-1.45-3.24-3.24c0-1.79,1.45-3.24,3.24-3.24C500.49,30.44,501.94,31.89,501.94,33.67z"/>
<path fill="#fff" d="M514.73,33.67c0,1.79-1.45,3.24-3.24,3.24s-3.24-1.45-3.24-3.24c0-1.79,1.45-3.24,3.24-3.24S514.73,31.89,514.73,33.67z"/>
<path d="M532.79,33.67c0,1.31-1.06,2.36-2.36,2.36c-1.31,0-2.36-1.06-2.36-2.36s1.06-2.36,2.36-2.36C531.73,31.31,532.79,32.37,532.79,33.67z"/>
<path d="M542.12,33.67c0,1.31-1.06,2.36-2.36,2.36c-1.31,0-2.36-1.06-2.36-2.36s1.06-2.36,2.36-2.36C541.06,31.31,542.12,32.37,542.12,33.67z"/>
<path d="M521.74,36.91h-0.7v-6.48h0.7V36.91z"/>
<path fill="#ff385e" d="M515.25,33.23h-2.6c-0.28,0-0.5-0.23-0.5-0.5v-3.54c0-0.27,0.22-0.5,0.5-0.5h2.6c0.28,0,0.5,0.23,0.5,0.5v3.54C515.75,33,515.53,33.23,515.25,33.23z"/>
</g>
</g>
<path id="ra-ad" fill="#f7c400" d="M542.12,137.72h-107.5V47.44h107.5V137.72z"/>
</svg>
<div class="ra-labels">
<span id="ra-fb-label">Facebook</span>
<span id="ra-bf-label">BuzzFeed</span>
<span id="ra-yt-label">YouTube</span>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script><script src='//www.greensock.com/js/src/utils/SplitText.min.js'></script>
<script >'use strict';
(function () {
// Avoid FOUC
var ra = document.getElementById('ra');
ra.removeAttribute('hidden');
var navbar = document.getElementById('ra-navbar');
var ad = document.getElementById('ra-ad');
var screen = document.getElementById('ra-mac-screen');
TweenLite.set(".ra-labels", { perspective: 400 });
var fbLabel = new SplitText("#ra-fb-label", { type: "chars" });
var bfLabel = new SplitText("#ra-bf-label", { type: "chars" });
var ytLabel = new SplitText("#ra-yt-label", { type: "chars" });
var labelAnimation = {
opacity: 0,
scale: 0,
y: 20,
rotationX: 180,
transformOrigin: "0% 50% -10",
ease: Elastic.easeOut
};
var endLabelAnimation = Object.assign({}, labelAnimation, {
ease: Power4.easeIn
});
var tl = new TimelineMax({ repeat: -1 });
tl.staggerFrom(fbLabel.chars, 2, labelAnimation, .05);
tl.from(ad, 1, {
morphSVG: '#ra-mac-screen',
ease: Back.easeOut,
delay: .5
}, 0);
tl.from(navbar, .4, {
transformOrigin: 'center top',
scaleY: 0,
opacity: 0
}, '-=1');
tl.staggerFrom('#ra-navbar-content path', .4, {
y: -10,
opacity: 0
}, .07, '-=0.5');
tl.staggerFrom('#ra-c1 path', .6, {
transformOrigin: 'left',
scaleX: 0,
opacity: 0,
ease: Power4.easeOut
}, .05, '-=1');
tl.staggerFrom('#ra-c2-rects path, #ra-fb-c3-rect', .6, {
y: 20,
opacity: 0
}, .2, '-=1.8');
tl.staggerFrom('#ra-c2-items path', .6, {
transformOrigin: 'left',
scaleX: 0,
opacity: 0,
ease: Power4.easeOut
}, .05, 2.5);
tl.staggerFrom('#ra-fb-c3-items g', .6, {
transformOrigin: 'left',
scaleX: 0,
opacity: 0,
ease: Power4.easeOut
}, .1, '-=0.8');
tl.staggerTo(fbLabel.chars, 1, endLabelAnimation, -.05);
tl.to('#ra-fb', .6, {
opacity: 0
}, '-=1');
// BuzzFeed
tl.to(ad, 1, {
morphSVG: '#ra-bf-ad',
ease: Back.easeOut
});
tl.staggerFrom(bfLabel.chars, 2, labelAnimation, .05, '-=1');
tl.to(screen, .5, {
fill: '#fff'
}, '-=2');
tl.from('#ra-bf-logo', 1, {
transformOrigin: 'left',
scaleX: 0,
opacity: 0,
ease: Power4.easeOut
}, '-=2');
tl.staggerFrom('#ra-bf-dots path', .8, {
transformOrigin: 'center',
scale: .5,
opacity: 0,
ease: Elastic.easeOut
}, .05, '-=2');
tl.from('#ra-bf-navbar', .8, {
opacity: 0
}, '-=1.5');
tl.staggerFrom('#ra-bf-menu-items path', .8, {
transformOrigin: 'left',
x: -10,
scaleX: 0,
opacity: 0,
ease: Power4.easeOut
}, .1, '-=1.5');
tl.staggerFrom('#ra-bf-menu-dots path', .8, {
transformOrigin: 'center',
scale: .5,
opacity: 0,
ease: Elastic.easeOut
}, .05, '-=1.2');
tl.staggerFrom('#ra-bf-thumbnails path', .8, {
transformOrigin: 'center',
scale: .5,
opacity: 0,
ease: Power4.easeOut
}, .05, '-=1');
tl.from('#ra-bf-c1-rect', .8, {
transformOrigin: 'center',
scale: .8,
opacity: 0
}, '-=1');
tl.staggerFrom('#ra-bf-c1-rect-items path', .8, {
transformOrigin: 'right',
scaleX: 0,
opacity: 0,
ease: Power4.easeOut
}, .1, '-=0.5');
tl.staggerFrom('#ra-bf-bottom-rect', .6, {
y: 20,
opacity: 0,
ease: Power4.easeOut
}, .1, '-=0.5');
tl.staggerFrom('#ra-bf-bottom-item', .8, {
transformOrigin: 'left',
scaleX: 0,
opacity: 0,
ease: Power4.easeOut
}, .1, '-=1');
tl.staggerTo(bfLabel.chars, 1, endLabelAnimation, -.05);
tl.to('#ra-bf', .6, {
opacity: 0
}, '-=1');
// YouTube
// tl.addLabel('yt')
tl.to(ad, 1, {
morphSVG: '#ra-yt-ad',
ease: Back.easeOut
});
tl.staggerFrom(ytLabel.chars, 2, labelAnimation, .05, '-=1');
tl.to(screen, 1, {
fill: '#e9eaed'
}, '-=2');
tl.staggerFrom('#ra-yt-navigation > path, #ra-yt-navigation > g', .4, {
y: -10,
opacity: 0
}, .07, '-=2');
tl.from('#ra-yt-video', .6, {
transformOrigin: 'center',
scale: .8,
opacity: 0
}, '-=2');
tl.from('#ra-yt-play', .6, {
transformOrigin: 'center',
scale: .8,
opacity: 0
}, '-=1.5');
tl.staggerFrom('#ra-yt-c1-rect, #ra-yt-c2-rect', .6, {
y: 20,
opacity: 0
}, .07, '-=1.5');
tl.staggerFrom('#ra-yt-c1-content path', .6, {
transformOrigin: 'left',
scaleX: 0,
opacity: 0
}, .07, '-=1.5');
tl.staggerFrom('#ra-yt-c2-thumbnails path', .6, {
transformOrigin: 'center',
scale: .8,
opacity: 0
}, -.07, '-=1');
tl.staggerFrom('#ra-yt-c2-items path', .6, {
transformOrigin: 'left',
scaleX: 0,
opacity: 0
}, -.07, '-=0.6');
tl.staggerTo(ytLabel.chars, 1, endLabelAnimation, -.05);
tl.to('#ra-yt', .6, {
opacity: 0
}, '-=1');
tl.to(ad, 1, {
morphSVG: '#ra-mac-screen',
ease: Back.easeIn
}, // onComplete: () => tl.seek('yt')
'-=0.6');
// tl.seek('yt')
})();
//# sourceURL=pen.js
</script>
</body></html>
