"animation"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: