<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 lang='en' 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/nerdmanship/pen/rGzqYe" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">body {
background: #52C1BC;
}
p {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -1;
}
p, a {
font-size: small;
font-family: sans-serif;
color: rgba(255, 255, 255, 0.5);
}
#add-to-cart {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 600px;
}
.hidden {
visibility: hidden;
}
.clickable {
cursor: pointer;
opacity: 0.01;
}
</style></head><body>
<!--
THIS IS ONE PART OF THREE
Check out the others here:
https://codepen.io/collection/DgggNa/
-->
<!--
Interactivity:
* Click 'add to cart' button to add carrot to cart
* Click cart icon to toggle view of cart items
*A selection of established motion principles applied to this concept
(https://material.io/guidelines/motion/material-motion.html)
- All motion design in this concept has an intentional purpose assigned to it. Each animation informs the user about something of essence.
- The 'add to cart' button knows where the user clicks and provides immediate feedback clarifying the connection between user input and the button element.
- The transformation from icon to open cart view utilise and combine a few meaningful things. The open view expands from the origin of the icon to show the user that icon and list is strongly connected. The icon stroke represents the bounds of the cart contents and bringing this meaning into the next state further associates the elements. Also, to click the bag to look inside the bag provides a fun, familiar and meaningful metaphor into the UI.
- Elements animate along curved paths with intentional directions to create meaning.
- A. The 'add to cart' motion provides clarity of what happens and guides the user's focus to the cart, but still without disrupting a continued shopping experience. The arc travel path allows the item to hit the cart from below to create a subtle success motion on its arrival. The item gains momentum along the way and transfer its energy to the cart icon in the direction it is hit.
- B. The travel path of the list items in the cart originate in the small closed state of the cart to reinforce the idea that the items live inside the cart icon.
- The cart icon serves dual functions. The handle transforming to a cross gives new meaning to an element that is already introduced. The animation is intentionally subtle because it shouldn't compete for the user's attention at that point.
- The 'total items number' is assigned with meaning in the carts closed state which it keeps throughout the transition and into the open state.
Critique:
* Ideally, the elements below the user's cursor don't move after interaction as the number/cross does on cart icon click. It's unexpected and unpleasant. It should feel like only one element represent the toggle interaction. In the current version, it feels like the icon consists of three separate parts, handle, number and box. This could be solved with having a unifying element below the icon, such as a solid circle, that persists throughout the transition. This would create a more pleasant and trustworthy user experience.
* I don't appreciate that the handle lines cross the box lines when transforming to a cross.
Would have been nice to add:
* Hover icon to expand box slightly, to show what will happen on click
* Morph 'total items number' to actual list items that populate the open cart state
* Calculate distance between shopping item and cart to be able to adapt the speed of shopping item animation to the distance it would travel
* A motion for closing the cart different from the opening one.
* Asynchronos transformation of the width and height of the cart bounds.
* Tweak the easing curves to create a more casual and playful feel to match the art style
* An alternative to the icon 'physics'. When the user adds an item, the car icon opens up slightly to catch the item inside of it. Would very clearly demonstrate to user how the cart element behaves.
-->
<p>Art style credits to <a href="https://www.shopify.com" target='_blank'>Shopify</a></p>
<svg id='add-to-cart' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 660 660" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id='btn-mask'>
<use fill="#FFFFFF" xlink:href="#path-1"/>
</mask>
<mask id='cart-content-mask'>
<path data-anim='box-mask' fill='#FFFFFF' d="M563 71h25l1.78 24c.12 1.66-1.12 3-2.77 3h-23c-1.6 0-2.9-1.34-2.7-3l1.7-24z"/>
</mask>
<morph>
<path data-path="box-open" d="M396.36 69H590v340.34H396.36z"/>
<path data-path="line-2-open" d="M569.66 90.4l11.73-11.8"/>
<path data-path="line-1-open" d="M581.6 90.4l-12.07-11.86"/>
</morph>
<g id="carrot">
<path id="bg" fill="#FFFFFF" stroke="#DEE2EC" stroke-width="4" d="M247.72 275.4c-1.54.58-2.6 2.4-2.37 4.04 0 0 6.97 48.8 11.1 74.2 4.14 25.4 9.1 50.1 9.1 50.1.32 1.63 1.9 2.7 3.53 2.4 0 0 42.1-7.74 64.7-12.9 22.6-5.18 78.84-19.96 78.84-19.96 1.6-.43 2.6-2.06 2.2-3.68 0 0-10.27-42.12-14.38-63.64-4.1-21.5-11.9-74.08-11.9-74.08-.23-1.63-1.72-2.6-3.33-2.18 0 0-41.6 11.05-64 18.5-22.4 7.44-73.4 27.2-73.4 27.2z"/>
<path id="carrot-head" fill="#52C1BC" d="M309.38 319.32c2.9 1.86 4.83 2.98 4.83 2.98l2.6-4.95-7.1-5.42s2.3-7.73-1.1-12.8-7.3-3.7-12.3-4.25c2.6-5.6-5.7-8.52-5.7-8.52s2.9-10.72-5.8-9.83c-8.7.88-3.3 18.35 5.6 27.67 3.3 3.5 7.6 6.93 11.5 9.84-4.7.34-10 1-14.6 2.2-11.5 3.03-21.9 20.62-15.5 25.6 8.4 6.37 9-8.07 9-8.07s12.6 5.32 12.6-5.7c3.3 1.66 5.1 2.36 10.2 0 5.2-2.35 2.9-8.44 2.9-8.44l3.3-.3z"/>
<path id="carrot-body" fill="#FFC14C" d="M365.97 331.74c-2.8-2.46-6.2-5.5-10.37-9.3-2.38 5.46-6.17 11.1-6.17 11.1-.45.7-1.4.96-2.14.56-.8-.38-.9-1.2-.4-1.86 0 0 3.3-3.57 6.3-11.92-2-1.78-4.1-3.7-6.3-5.8-1.4-1.27-2.7-2.4-4-3.38-.6 2.5-1.3 5.32-2.4 7.73-2.6 5.92-8.5 13.32-8.5 13.32-.5.6-1.5.8-2.2.3s-.8-1.3-.3-1.9c0 0 4.2-3.8 8.2-13.1 1.4-3.2 2.2-5.9 2.8-8.1-14.9-10.5-19.8.5-27.2 10-8.4 10.7-4.1 24.4 18.1 35.8 22.3 11.3 48 .9 52.7-2.7 4.7-3.6-3.2-9.6-6.8-11.7-1.9-1.1-4.7-3.2-9.6-7.5-1.9 3.4-3.6 6-3.6 6-.4.7-1.4.9-2.1.5-.8-.4-.9-1.2-.4-1.9 0 0 1.8-2 4-6.5z"/>
</g>
<rect id="path-1" width="219" height="60" rx="8"/>
<filter id="filter-2" width="106.8%" height="125%" x="-3.4%" y="-7.5%" filterUnits="objectBoundingBox">
<feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" in="shadowBlurOuter1"/>
</filter>
<filter id="filter-4" width="106.8%" height="125%" x="-3.4%" y="-7.5%" filterUnits="objectBoundingBox">
<feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
<feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" in="shadowBlurOuter1"/>
</filter>
</defs>
<g fill="none" fill-rule="evenodd">
<path id="window" fill="#FFFFFF" stroke="#0B1238" stroke-width="5" d="M30.33 37.98c-.18-4.4 3.25-7.85 7.66-7.7 0 0 52.5 1.88 71.4 1.88 4.6 0 50.4 2.3 97.8 2.12 18.6-.08 89.4-2.74 164.9-3.52 33.9-.35 95.2 1.15 144.2 1.05 49.1-.1 105.5-1.6 105.5-1.6 4.4-.1 7.9 3.4 7.7 7.8 0 0-1.7 55.9-1.7 84.1 0 5.6 1.4 29 1.6 62.4 0 9.2-1.8 49.4-.8 99.3s.9 88.5 1.4 136.3c.4 51.1-1.8 100.1-2 137-.2 36.9 1.3 65.1 1.3 65.1.2 4.4-3.2 7.8-7.6 7.6 0 0-51.1-2.4-76.6-2.4-7.8 0-58.6 1.3-125.2 1.7-21.6.1-44.6-2.2-99.2-2-37.1.1-102.6 3-174 3.9-71.5.9-109.1-.4-109.1-.4-4.4-.1-7.8-3.8-7.6-8.2 0 0 2.3-46.6 2.3-69.7 0-6.7-1.9-53.2-2.2-115.7-.2-29.1-.1-115.4-.2-201.4 0-33.1 1.13-111.7 1.1-144.5 0-32.7-1-52.7-1-52.7z"/>
<path id="bg" fill="#F4F6F8" d="M306.55 582.56c-149.02-29.03-219-231.42-180.63-281.86 38.37-50.44 86.73-113.1 196.53-113.1s207.7 9.92 216.62 75.47C548 328.63 549.8 430 512.3 485.57c-38.75 52.66-56.72 126.03-205.75 97z"/>
<path id="divivder" stroke="#E8EAF1" stroke-width="5" d="M50 130h560" stroke-linecap="round"/>
<g id="btn" transform="translate(225.5 448.375)">
<g id="bg">
<use data-anim='shadow' fill="black" filter="url(#filter-2)" xlink:href="#path-1"/>
<use data-anim='btn-bg' fill="#52C1BC" xlink:href="#path-1"/>
</g>
<g mask='url(#btn-mask)'>
<circle id="ripple" data-anim='ripple' class='hidden' cx="109.5" cy="30" r="10" fill="#45A6A1"/>
</g>
<path id="label" fill="#FFFFFF" d="M39.96 33.74h-4l-.7 2.26h-3.1l4.43-12.1h2.7L43.8 36h-3.13l-.7-2.26zm-3.3-2.25h2.6l-1.3-4.2-1.3 4.2zM48.94 36V23.9h3.9c1.06 0 2.02.26 2.87.74.9.48 1.6 1.17 2 2.05.5.8.8 1.8.8 2.9v.5c0 1.1-.2 2.1-.7 3-.4.8-1.1 1.5-2 2-.8.5-1.8.7-2.8.7h-4zm2.9-9.84v7.6h1.03c.83 0 1.47-.3 1.92-.9.4-.6.6-1.47.6-2.65v-.5c0-1.1-.2-2-.7-2.6-.5-.6-1.1-.9-2-.9h-1zM64.18 36V23.9h3.9c1.06 0 2.02.26 2.87.74.86.48 1.52 1.17 2 2.05.48.8.72 1.8.73 2.9v.5c0 1.1-.24 2.1-.7 3-.47.8-1.13 1.5-1.98 2-.86.5-1.8.7-2.85.7h-3.98zm2.9-9.84v7.6h1.03c.9 0 1.5-.3 2-.9.5-.6.7-1.47.7-2.65v-.5c0-1.1-.2-2-.6-2.6-.4-.6-1.1-.9-1.9-.9h-1zm29.8 0h-3.6V36h-2.93v-9.84H86.8V23.9h10.1v2.26zm15.5 4.05c0 1.2-.22 2.3-.66 3.2-.43.9-1.05 1.6-1.86 2.1-.8.5-1.72.8-2.75.8s-1.9-.2-2.7-.7c-.8-.5-1.4-1.1-1.8-2-.4-.9-.7-1.9-.7-3V30c0-1.2.2-2.25.7-3.16.5-.9 1.1-1.6 1.9-2.1.9-.5 1.8-.72 2.8-.72 1 0 1.9.26 2.8.75.8.5 1.4 1.2 1.9 2.1.5.9.7 1.93.7 3.1v.55zm-2.97-.5c0-1.2-.2-2.1-.6-2.7-.4-.6-.9-.9-1.7-.9-1.4 0-2.2 1.1-2.3 3.3v.9c0 1.2.2 2.1.6 2.8.4.7 1 1 1.8 1s1.3-.3 1.7-.9c.4-.6.6-1.5.6-2.7V30zm27 2.2c0 .9-.2 1.6-.7 2.3-.4.7-1 1.2-1.7 1.5-.7.4-1.6.6-2.5.6-1.6 0-2.8-.5-3.7-1.5-.9-1-1.3-2.5-1.3-4.3v-.6c0-1.2.2-2.2.7-3.1.4-.9 1-1.6 1.8-2 .8-.5 1.7-.7 2.7-.7 1.5 0 2.7.4 3.5 1.2.9.8 1.4 1.9 1.5 3.2h-2.9c0-.7-.2-1.2-.5-1.6-.3-.3-.8-.4-1.6-.4-.7 0-1.2.3-1.6.8-.3.6-.5 1.4-.5 2.6v.9c0 1.3.2 2.2.5 2.8.3.6.9.8 1.7.8.7 0 1.2-.1 1.6-.5.4-.3.6-.8.6-1.5h2.9zm12.5 1.9h-4l-.7 2.3h-3.1l4.4-12.1h2.8l4.4 12h-3.1l-.7-2.2zm-3.3-2.2h2.6l-1.3-4.2-1.3 4.2zm16.8.3h-1.6V36h-2.9V23.9h4.8c1.5 0 2.6.33 3.4.97.8.64 1.2 1.53 1.2 2.7 0 .84-.1 1.53-.5 2.1-.3.54-.9 1-1.6 1.33l2.5 4.88V36h-3.1l-2.1-4.27zm-1.6-2.2h1.9c.6 0 1-.1 1.3-.4.3-.3.4-.7.4-1.2s-.1-.9-.4-1.2c-.3-.3-.7-.4-1.2-.4H161v3.3zm21.5-3.3h-3.6V36h-2.9v-9.84h-3.5V23.9h10.1v2.26z"/>
</g>
<use id='buy-carrot-2' data-anim='carrot' xlink:href="#carrot" />
<use id='buy-carrot-1' xlink:href="#carrot" />
<g data-anim="icon">
<g id="box">
<path data-anim="box" fill="#FFFFFF" d="M563 71h25l1.78 24c.12 1.66-1.12 3-2.77 3h-23c-1.6 0-2.9-1.34-2.7-3l1.7-24z"/>
</g>
</g>
<g data-anim="cart-content" mask='url(#cart-content-mask)'>
<g data-anim="cart-item" >
<g id="btn-checkout" transform="translate(430.5 359.375)">
<rect id="bg" width="123.31" height="33.78" x=".94" y=".11" fill="#FFC14C" rx="6.4"/>
<path id="label" fill="#FFFFFF" d="M22.3 18.73c-.03.67-.2 1.26-.55 1.78-.33.6-.8 1-1.4 1.2-.6.3-1.28.5-2.05.5-1.27 0-2.27-.4-3-1.2s-1.1-2-1.1-3.5V17c0-.94.17-1.77.5-2.48.33-.7.8-1.26 1.42-1.65.62-.38 1.34-.58 2.15-.58 1.18 0 2.12.3 2.83.9.72.6 1.12 1.4 1.22 2.5H20c-.02-.6-.17-1-.45-1.3-.28-.3-.7-.4-1.28-.4-.58 0-1 .2-1.27.6s-.4 1.1-.43 2v.7c0 1 .13 1.7.4 2.2.25.4.7.6 1.33.6.54 0 .95-.1 1.23-.4s.43-.7.45-1.2h2.32zM34.88 22h-2.32v-4.04h-3.43V22H26.8v-9.67h2.33v3.84h3.43v-3.84h2.32V22zm10.87-4.1H42.1v2.3h4.32V22h-6.66v-9.67h6.67v1.8H42.1v2.04h3.65v1.73zm12.84.83c-.1.67-.3 1.26-.6 1.78-.4.6-.8 1-1.4 1.2-.6.3-1.3.5-2.1.5-1.3 0-2.3-.4-3-1.2s-1.1-2-1.1-3.5V17c0-.94.1-1.77.5-2.48.3-.7.8-1.26 1.4-1.65.6-.38 1.3-.58 2.1-.58 1.2 0 2.1.3 2.8.9.7.6 1.1 1.4 1.2 2.5h-2.2c0-.6-.2-1-.5-1.3-.3-.3-.7-.4-1.3-.4-.6 0-1 .2-1.3.6-.2.4-.4 1.1-.4 2v.7c0 1 .1 1.7.4 2.2.3.4.7.6 1.3.6.5 0 .9-.1 1.2-.4s.4-.7.4-1.2h2.3zm7.7-.33l-1 1.05V22H63v-9.67h2.3v4.26l.8-1.3 2.1-3.1h2.9l-3.27 4.3 3.3 5.4H68.4l-2.05-3.6zm16.8-1.04c0 .95-.2 1.78-.6 2.5-.4.73-.9 1.3-1.5 1.7-.7.38-1.4.57-2.2.57-.8 0-1.6-.2-2.2-.56-.6-.38-1.1-.92-1.5-1.63-.4-.7-.6-1.5-.6-2.42v-.55c0-.94.2-1.78.5-2.5.3-.73.8-1.3 1.5-1.68.6-.4 1.3-.6 2.2-.6.8 0 1.5.2 2.2.5.6.4 1.1.9 1.5 1.6.3.7.5 1.5.5 2.4v.4zm-2.4-.4c0-.96-.2-1.7-.5-2.2-.3-.5-.8-.74-1.4-.74-1.2 0-1.8.88-1.9 2.63v.7c0 .96.1 1.7.4 2.2.3.5.8.76 1.4.76.6 0 1-.2 1.4-.7.3-.5.4-1.2.4-2.1V17zm14.5-4.63v6.33c0 .72-.2 1.34-.5 1.86-.3.53-.8.93-1.3 1.2-.6.28-1.3.4-2.1.4-1.2 0-2.1-.3-2.8-.9-.7-.6-1.1-1.45-1.1-2.5v-6.4H90v6.43c0 1.06.5 1.6 1.46 1.6.5 0 .85-.14 1.1-.4.24-.27.37-.7.37-1.3v-6.32h2.34zm12.4 1.8h-2.9V22h-2.4v-7.87h-2.8v-1.8h8.1v1.8z"/>
</g>
</g>
<g data-anim="cart-item" >
<path id="bg" fill="#F4F6F8" d="M403 307c0-4.42 3.58-8 8-8h177v46H411c-4.4 0-8-3.6-8-8v-30z"/>
<g id="coins">
<g data-anim="coin">
<path id="edge" fill="#FFC14C" d="M464.93 318.93s.95-4.1 3.44-6.15c1.24-1.03 6-3.5 10.78-2.8 2.96.45 5.5 2.63 7.44 5.4 1.9 2.78 2.3 5.62 2.5 8.1.3 3.78-3.1 7.02-4.8 9.04-1 1.13-7 3.04-12 1.4-5.1-1.65-7.1-5.07-8-10.43l.5-4.6z"/>
<path id="face" fill="#FFE77F" d="M462.93 318.93s.95-4.1 3.44-6.15c1.24-1.03 6-3.5 10.78-2.8 2.96.45 5.5 2.63 7.44 5.4 1.9 2.78 2.3 5.62 2.5 8.1.3 3.78-3.1 7.02-4.8 9.04-1 1.13-7 3.04-12 1.4-5.1-1.65-7.1-5.07-8-10.43l.5-4.6z"/>
<path id="$" fill="#FFC14C" d="M476.16 314.45v1.08c.86.1 1.63.27 2.32.54.37.15.75.74.38 1.83-.38 1.08-1.25.98-1.52.85-.5-.26-1.02-.4-1.52-.4-.47 0-.85.12-1.14.33-.3.22-.45.46-.45.73 0 .3.12.5.35.8.24.2.55.4.93.6l1.1.4c1.3.4 2.1 1 2.7 1.6.6.6.8 1.4.8 2.4 0 .6 0 1.2-.2 1.6-.1.5-.3.9-.6 1.3s-.7.7-1.2 1c-.5.3-1.1.5-1.8.8v1.1s.2 1.1-.8 1.1-.9-1.1-.9-1.1v-1.1c-.3 0-.7 0-1.2-.1l-1.2-.3c-.4-.12-.8-.3-1.2-.5-.2-.1-.4-.2-.5-.3-.1-.1-.5-.9-.1-1.9.5-1 1.6-.8 1.8-.7 1 .7 1.9 1.1 2.8 1.1.5 0 .9-.1 1.2-.34.4-.3.5-.6.5-1 0-.53-.4-.93-1.2-1.2l-1-.32c-.6-.2-1.1-.4-1.6-.62-.4-.22-.8-.5-1-.8-.3-.3-.5-.65-.6-1.04-.2-.4-.2-.86-.2-1.36 0-.54.06-1.05.2-1.55s.4-.93.7-1.32c.3-.4.7-.7 1.2-1 .4-.23 1-.4 1.6-.5v-1.04s-.1-1.2.88-1.2.84 1.16.84 1.16z"/>
</g>
<g data-anim="coin">
<path id="edge" fill="#FFC14C" d="M482.43 318.93s.95-4.1 3.44-6.15c1.24-1.03 6-3.5 10.78-2.8 2.96.45 5.5 2.63 7.44 5.4 1.9 2.78 2.3 5.62 2.5 8.1.3 3.78-3.1 7.02-4.8 9.04-1 1.13-7 3.04-12 1.4-5.1-1.65-7.1-5.07-8-10.43l.5-4.6z"/>
<path id="face" fill="#FFE77F" d="M480.43 318.93s.95-4.1 3.44-6.15c1.24-1.03 6-3.5 10.78-2.8 2.96.45 5.5 2.63 7.44 5.4 1.9 2.78 2.3 5.62 2.5 8.1.3 3.78-3.1 7.02-4.8 9.04-1 1.13-7 3.04-12 1.4-5.1-1.65-7.1-5.07-8-10.43l.5-4.6z"/>
<path id="$" fill="#FFC14C" d="M493.66 314.45v1.08c.86.1 1.63.27 2.32.54.37.15.75.74.38 1.83-.38 1.08-1.25.98-1.52.85-.5-.26-1.02-.4-1.52-.4-.47 0-.85.12-1.14.33-.3.22-.45.46-.45.73 0 .3.12.5.35.8.24.2.55.4.93.6l1.1.4c1.3.4 2.1 1 2.7 1.6.6.6.8 1.4.8 2.4 0 .6 0 1.2-.2 1.6-.1.5-.3.9-.6 1.3s-.7.7-1.2 1c-.5.3-1.1.5-1.8.8v1.1s.2 1.1-.8 1.1-.9-1.1-.9-1.1v-1.1c-.3 0-.7 0-1.2-.1l-1.2-.3c-.4-.12-.8-.3-1.2-.5-.2-.1-.4-.2-.5-.3-.1-.1-.5-.9-.1-1.9.5-1 1.6-.8 1.8-.7 1 .7 1.9 1.1 2.8 1.1.5 0 .9-.1 1.2-.34.4-.3.5-.6.5-1 0-.53-.4-.93-1.2-1.2l-1-.32c-.6-.2-1.1-.4-1.6-.62-.4-.22-.8-.5-1-.8-.3-.3-.5-.65-.6-1.04-.2-.4-.2-.86-.2-1.36 0-.54.06-1.05.2-1.55s.4-.93.7-1.32c.3-.4.7-.7 1.2-1 .4-.23 1-.4 1.6-.5v-1.04s-.1-1.2.88-1.2.84 1.16.84 1.16z"/>
</g>
<g data-anim="coin">
<path id="edge" fill="#FFC14C" d="M499.93 318.93s.95-4.1 3.44-6.15c1.24-1.03 6-3.5 10.78-2.8 2.96.45 5.5 2.63 7.44 5.4 1.9 2.78 2.3 5.62 2.5 8.1.3 3.78-3.1 7.02-4.8 9.04-1 1.13-7 3.04-12 1.4-5.1-1.65-7.1-5.07-8-10.43l.5-4.6z"/>
<path id="face" fill="#FFE77F" d="M497.93 318.93s.95-4.1 3.44-6.15c1.24-1.03 6-3.5 10.78-2.8 2.96.45 5.5 2.63 7.44 5.4 1.9 2.78 2.3 5.62 2.5 8.1.3 3.78-3.1 7.02-4.8 9.04-1 1.13-7 3.04-12 1.4-5.1-1.65-7.1-5.07-8-10.43l.5-4.6z"/>
<path id="$" fill="#FFC14C" d="M511.16 314.45v1.08c.86.1 1.63.27 2.32.54.37.15.75.74.38 1.83-.38 1.08-1.25.98-1.52.85-.5-.26-1.02-.4-1.52-.4-.47 0-.85.12-1.14.33-.3.22-.45.46-.45.73 0 .3.12.5.35.8.24.2.55.4.93.6l1.1.4c1.3.4 2.1 1 2.7 1.6.6.6.8 1.4.8 2.4 0 .6 0 1.2-.2 1.6-.1.5-.3.9-.6 1.3s-.7.7-1.2 1c-.5.3-1.1.5-1.8.8v1.1s.2 1.1-.8 1.1-.9-1.1-.9-1.1v-1.1c-.3 0-.7 0-1.2-.1l-1.2-.3c-.4-.12-.8-.3-1.2-.5-.2-.1-.4-.2-.5-.3-.1-.1-.5-.9-.1-1.9.5-1 1.6-.8 1.8-.7 1 .7 1.9 1.1 2.8 1.1.5 0 .9-.1 1.2-.34.4-.3.5-.6.5-1 0-.53-.4-.93-1.2-1.2l-1-.32c-.6-.2-1.1-.4-1.6-.62-.4-.22-.8-.5-1-.8-.3-.3-.5-.65-.6-1.04-.2-.4-.2-.86-.2-1.36 0-.54.06-1.05.2-1.55s.4-.93.7-1.32c.3-.4.7-.7 1.2-1 .4-.23 1-.4 1.6-.5v-1.04s-.1-1.2.88-1.2.84 1.16.84 1.16z"/>
</g>
</g>
</g>
<g data-anim="cart-item" >
<path id="bg" fill="#F4F6F8" d="M403 257c0-4.42 3.58-8 8-8h177v46H411c-4.4 0-8-3.6-8-8v-30z"/>
<g data-anim="cart-item-carrot">
<path id="Combined-Shape" fill="#52C1BC" d="M424.28 270.7c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.33-1.92-.97-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.58c-2.28.23-.87 4.8 1.45 7.25.87.9 1.97 1.8 3 2.57-1.23.1-2.62.26-3.82.58-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.38 3.3-1.5c.85.43 1.3.6 2.65 0 1.35-.62.77-2.22.77-2.22l.86-.08z"/>
<path id="Combined-Shape" fill="#FFC14C" d="M439.1 273.96c-.74-.65-1.63-1.44-2.72-2.44-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.26-.56.16-.2-.1-.23-.32-.1-.5 0 0 .87-.93 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.3-.33-.7-.63-1-.9-.1.67-.3 1.4-.6 2.04-.7 1.5-2.2 3.4-2.2 3.4-.1.1-.4.2-.5.1-.2-.1-.2-.4 0-.5 0 0 1.1-1 2.2-3.5.4-.9.6-1.6.8-2.1-3.9-2.8-5.1.1-7.1 2.6-2.2 2.8-1 6.4 4.8 9.3 5.9 3 12.6.2 13.8-.7 1.3-.9-.8-2.5-1.8-3-.5-.3-1.2-.9-2.5-2l-.9 1.6c-.1.2-.4.2-.6.1-.2-.1-.2-.3-.1-.5 0 0 .5-.5 1.1-1.7z"/>
</g>
<g data-anim="cart-item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
<path id="Path-4" d="M456.73 280.77s7.25-.28 18.28-.2c11.1.08 17.2.4 20.3.48 3.1.1 4.9.52 16.5 0 11.6-.53 6.5-.67 11.9-.74 5.4 0 9.2.4 13.3.5l11.6-.4"/>
<path id="Path-2" d="M456.74 271.64s2.98 1.62 6.8-.9c3.84-2.5 7.67-8.68 5.58-8.68-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.8 9.16-8.8 12.9-7.8 3.7 1-1.47 5.7 1.8 7.1 3.25 1.3 5.87-5.5 8.4-5.2 2.53.2-.1 2.9 2.15 3.4 2.25.4 2.72-1.9 4.85-1.6 2.14.3-.54 2.3 2.77 1.9 3.3-.4 8.2-1.7 8.2-1.7"/>
</g>
</g>
<g data-anim="cart-item">
<path id="bg" fill="#F4F6F8" d="M403 207c0-4.42 3.58-8 8-8h177v46H411c-4.4 0-8-3.6-8-8v-30z"/>
<g data-anim="cart-item-carrot">
<path id="Combined-Shape" fill="#52C1BC" d="M424.28 220.7c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.33-1.92-.97-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.58c-2.28.23-.87 4.8 1.45 7.25.87.9 1.97 1.8 3 2.57-1.23.1-2.62.26-3.82.58-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.38 3.3-1.5c.85.43 1.3.6 2.65 0 1.35-.62.77-2.22.77-2.22l.86-.08z"/>
<path id="Combined-Shape" fill="#FFC14C" d="M439.1 223.96c-.74-.65-1.63-1.44-2.72-2.44-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.26-.56.16-.2-.1-.23-.32-.1-.5 0 0 .87-.93 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.3-.33-.7-.63-1-.9-.1.67-.3 1.4-.6 2.04-.7 1.5-2.2 3.4-2.2 3.4-.1.1-.4.2-.5.1-.2-.1-.2-.4 0-.5 0 0 1.1-1 2.2-3.5.4-.9.6-1.6.8-2.1-3.9-2.8-5.1.1-7.1 2.6-2.2 2.8-1 6.4 4.8 9.3 5.9 3 12.6.2 13.8-.7 1.3-.9-.8-2.5-1.8-3-.5-.3-1.2-.9-2.5-2l-.9 1.6c-.1.2-.4.2-.6.1-.2-.1-.2-.3-.1-.5 0 0 .5-.5 1.1-1.7z"/>
</g>
<g data-anim="cart-item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
<path id="Path-4" d="M456.73 230.77s7.25-.28 18.28-.2c11.1.08 17.2.4 20.3.48 3.1.1 4.9.52 16.5 0 11.6-.53 6.5-.67 11.9-.74 5.4 0 9.2.4 13.3.5l11.6-.4"/>
<path id="Path-2" d="M456.74 221.64s2.98 1.62 6.8-.9c3.84-2.5 7.67-8.68 5.58-8.68-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.8 9.16-8.8 12.9-7.8 3.7 1-1.47 5.7 1.8 7.1 3.25 1.3 5.87-5.5 8.4-5.2 2.53.2-.1 2.9 2.15 3.4 2.25.4 2.72-1.9 4.85-1.6 2.14.3-.54 2.3 2.77 1.9 3.3-.4 8.2-1.7 8.2-1.7"/>
</g>
</g>
<g data-anim="cart-item">
<path id="bg" fill="#F4F6F8" d="M403 157c0-4.42 3.58-8 8-8h177v46H411c-4.4 0-8-3.6-8-8v-30z"/>
<g data-anim="cart-item-carrot">
<path id="Combined-Shape" fill="#52C1BC" d="M424.28 170.7c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.33-1.92-.97-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.58c-2.28.23-.87 4.8 1.45 7.25.87.9 1.97 1.8 3 2.57-1.23.1-2.62.26-3.82.58-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.38 3.3-1.5c.85.43 1.3.6 2.65 0 1.35-.62.77-2.22.77-2.22l.86-.08z"/>
<path id="Combined-Shape" fill="#FFC14C" d="M439.1 173.96c-.74-.65-1.63-1.44-2.72-2.44-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.26-.56.16-.2-.1-.23-.32-.1-.5 0 0 .87-.93 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.3-.33-.7-.63-1-.9-.1.67-.3 1.4-.6 2.04-.7 1.5-2.2 3.4-2.2 3.4-.1.1-.4.2-.5.1-.2-.1-.2-.4 0-.5 0 0 1.1-1 2.2-3.5.4-.9.6-1.6.8-2.1-3.9-2.8-5.1.1-7.1 2.6-2.2 2.8-1 6.4 4.8 9.3 5.9 3 12.6.2 13.8-.7 1.3-.9-.8-2.5-1.8-3-.5-.3-1.2-.9-2.5-2l-.9 1.6c-.1.2-.4.2-.6.1-.2-.1-.2-.3-.1-.5 0 0 .5-.5 1.1-1.7z"/>
</g>
<g data-anim="cart-item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
<path id="Path-4" d="M456.73 180.77s7.25-.28 18.28-.2c11.1.08 17.2.4 20.3.48 3.1.1 4.9.52 16.5 0 11.6-.53 6.5-.67 11.9-.74 5.4 0 9.2.4 13.3.5l11.6-.4"/>
<path id="Path-2" d="M456.74 171.64s2.98 1.62 6.8-.9c3.84-2.5 7.67-8.68 5.58-8.68-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.8 9.16-8.8 12.9-7.8 3.7 1-1.47 5.7 1.8 7.1 3.25 1.3 5.87-5.5 8.4-5.2 2.53.2-.1 2.9 2.15 3.4 2.25.4 2.72-1.9 4.85-1.6 2.14.3-.54 2.3 2.77 1.9 3.3-.4 8.2-1.7 8.2-1.7"/>
</g>
</g>
<g data-anim="cart-item">
<path id="bg" fill="#F4F6F8" d="M403 107c0-4.42 3.58-8 8-8h177v46H411c-4.4 0-8-3.6-8-8v-30z"/>
<path data-anim="total-items" fill="#989BAF" d="M422.62 121.05h-2.88V129h-1.6v-7.95h-2.85v-1.3h7.3v1.3zm8.6 3.57c0 .9-.17 1.7-.48 2.38-.32.7-.76 1.2-1.35 1.58-.6.36-1.3.55-2.1.55s-1.4-.2-2-.55c-.6-.37-1.1-.9-1.4-1.57-.3-.6-.5-1.4-.5-2.3v-.5c0-.9.1-1.7.4-2.4.3-.7.8-1.2 1.3-1.5.6-.3 1.2-.5 2-.5s1.4.2 2 .6c.6.4 1 .9 1.3 1.6.3.7.5 1.5.5 2.4v.6zm-1.62-.48c0-1.03-.2-1.8-.58-2.36-.4-.54-.94-.82-1.65-.82-.7 0-1.24.28-1.63.82-.4.54-.6 1.3-.6 2.3v.54c0 1.02.2 1.8.6 2.36.4.55.94.83 1.64.83.72 0 1.26-.2 1.65-.8.38-.5.57-1.3.57-2.3v-.5zm9.88-3.1h-2.88V129H435v-7.95h-2.85v-1.3h7.33v1.3zm6.4 5.8h-3.6l-.74 2.16h-1.67l3.5-9.24h1.43l3.5 9.24h-1.68l-.75-2.15zm-3.14-1.3h2.68l-1.34-3.82-1.34 3.83zm8.2 2.18h4.2V129h-5.8v-9.24h1.6v7.96zM461.3 129h-1.6v-9.24h1.6V129zm8.67-7.95h-2.88V129h-1.6v-7.95h-2.9v-1.3h7.3v1.3zm6.62 3.82h-3.8v2.85h4.4V129h-6.1v-9.24h6v1.3h-4.4v2.54h3.8v1.27zm4-5.1l2.7 7.07 2.6-7.08h2.1V129h-1.6v-3.05l.1-4.07-2.8 7.12h-1.2l-2.8-7.12.1 4.07V129h-1.6v-9.24h2.1zm14.1 6.85c0-.4-.2-.72-.5-.94-.3-.22-.8-.44-1.6-.67-.8-.2-1.4-.4-1.8-.7-.9-.5-1.3-1.2-1.3-2 0-.7.3-1.3.9-1.8.6-.5 1.4-.7 2.3-.7.6 0 1.2.2 1.7.4s.9.6 1.2 1c.2.5.4.9.4 1.5h-1.6c0-.5-.2-.9-.5-1.1-.3-.3-.8-.4-1.3-.4-.6 0-1 .1-1.3.3-.3.2-.46.6-.46 1s.15.6.46.9c.3.2.86.5 1.6.7.7.2 1.3.5 1.7.8.4.3.74.6.94 1 .2.34.3.75.3 1.23 0 .8-.3 1.4-.9 1.8-.6.5-1.4.7-2.4.7-.63 0-1.3-.1-1.8-.4-.56-.2-1-.6-1.3-1-.3-.4-.47-.9-.47-1.5h1.6c0 .6.2 1 .5 1.3.3.3.8.46 1.5.46.5 0 .9-.1 1.2-.36s.4-.5.4-.9zm3.8.75c.3 0 .5.1.6.25.1.16.2.37.2.6 0 .25-.1.45-.3.6-.2.17-.4.25-.7.25s-.5-.08-.7-.24c-.2-.15-.3-.35-.3-.6 0-.24.1-.45.2-.6.1-.17.3-.26.6-.26zm0-5.38c.3 0 .5 0 .6.2.1.1.2.3.2.6s-.1.4-.3.6c-.2.1-.4.2-.7.2s-.5-.1-.7-.3c-.2-.2-.3-.4-.3-.6 0-.3.1-.5.2-.6.1-.2.3-.3.6-.3z"/>
</g>
</g>
<g data-anim="line-group" stroke="#989BAF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path data-anim="line-2" d="M569.66 70.4c0-10.52 2.37-9.6 6.94-9.6"/>
<path data-anim="line-1" d="M581.6 70.4c0-10.52-2.38-9.6-6.94-9.6"/>
</g>
<path data-anim="box-stroke" fill="none" stroke="#989BAF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M563 71h25l1.78 24c.12 1.66-1.12 3-2.77 3h-23c-1.6 0-2.9-1.34-2.7-3l1.7-24z"/>
<g data-anim="num-group" fill="#999CAF" stroke='none'>
<path data-anim="num-2" d="M579.63 90h-8.44v-1.83l3.8-4.07c.9-1.1 1.4-2 1.4-2.6 0-.6-.1-.98-.4-1.2-.3-.3-.6-.4-1-.4s-.8.12-1 .5-.4.8-.4 1.34h-2.8c0-.75.2-1.44.5-2.07.3-.6.8-1.1 1.5-1.47.6-.34 1.4-.52 2.2-.52 1.3 0 2.3.3 3 .9.7.6 1 1.5 1 2.6 0 .5-.1.96-.3 1.4-.2.46-.5.94-.9 1.4-.4.5-1 1.2-1.8 2l-1.6 1.8h4.7V90z"/>
<path data-anim="num-3" class='hidden' d="M573.75 82.8h1.32c1.04 0 1.57-.53 1.57-1.55 0-.4-.13-.72-.38-.97-.25-.26-.6-.38-1.05-.38-.3 0-.6.1-.9.32-.2.22-.4.5-.4.8h-2.8c0-.63.2-1.2.5-1.7s.9-.88 1.5-1.16c.7-.28 1.3-.42 2.1-.42 1.4 0 2.4.3 3.2.92.8.62 1.2 1.46 1.2 2.53 0 .5-.1 1-.4 1.4-.3.4-.8.8-1.4 1.1.7.2 1.2.6 1.5 1 .4.4.6 1 .6 1.7 0 1.1-.4 1.9-1.2 2.6-.8.6-1.9.9-3.2.9-.8 0-1.5-.2-2.2-.5-.7-.3-1.2-.7-1.5-1.3-.3-.5-.5-1.1-.5-1.8h2.8c0 .4.2.7.4.9.3.2.7.4 1.1.4.5 0 .9-.2 1.2-.4.3-.3.4-.7.4-1.1 0-.6-.1-1-.4-1.3-.3-.2-.7-.4-1.2-.4H574v-2z"/>
</g>
<rect class='clickable' data-click='btn' fill="rgba(255,255,255,0.01)" width="219" height="60" x="225" y="448" rx="8"/>
<path class='clickable' data-click='icon' fill="rgba(255,255,255,0.01)" d="M549 47h52v52h-52z" opacity="0.01" transform='translate(0 7)'/>
<path id="Oval-3" fill="#7682CE" d="M55.95 56.76c4.42 0 4.66-3.12 4.66-7.53C60.6 44.8 58.5 42 54 42s-8 3.58-8 8 5.53 6.76 9.95 6.76z"/>
<path id="Oval-3-Copy" fill="#7682CE" d="M75.94 56.33c-4.42 0-6.56-2.7-6.56-7.1 0-4.42 3.08-6.93 7.5-6.93S84 45.58 84 50s-3.64 6.33-8.06 6.33z"/>
<path id="Oval-3-Copy-2" fill="#7682CE" d="M100.68 56.52c-4.42 0-7.38-2.53-7.38-6.95s2.55-7.27 6.97-7.27c4.4 0 6.36 3.3 6.36 7.73 0 4.42-1.53 6.5-5.95 6.5z"/>
</g>
</svg>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script>
<script >/*
Read this codepen blog post:
https://blog.codepen.io/documentation/editor/adding-external-resources/
and learn how to use pens as external resources. So useful!
I learned this and the clever technique of dynamic injection
by studying this pen by @shshaw: https://codepen.io/shshaw/pen/epmrgO
Thanks for sharing, Shaw!
*/
;(function () {
var menu = {
charPos: [288, 271, 241, 214, 184, 154, 118, 89, 58, 32, 0],
init: function init() {
this.inject();
this.cacheDOM();
this.setStart();
this.makeTimeline();
this.bindEvents();
},
inject: function inject() {
document.head.insertAdjacentHTML('beforeend', '<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">');
document.body.insertAdjacentHTML('beforeend', '<div class="menu" data-menu="target" data-link="menu" style="position: absolute; top: 10px; left: 10px; opacity: 0; overflow: hidden; z-index: 9999"> <svg id="icon-menu" data-menu="svg" xmlns="http://www.w3.org/2000/svg" width="300" viewbox="0 0 340 397"> <g id="menu" fill="none" fill-rule="evenodd"> <g data-menu="boxes"> <g data-menu="boxes"> <g data-menu="boxes"> <g id="box-3" transform="translate(10 239)"> <path id="bg" fill="#0F1B23" d="M0 0h317v148c0 5.52-4.48 10-10 10H0V0z"></path> <g id="hearts" data-menu="hearts" fill-rule="nonzero"> <g transform="translate(134 109)"> <path id="Shape" fill="#83213E" d="M9.94 3.18C10.74 1.3 12.6 0 14.74 0c2.9 0 4.97 2.42 5.23 5.3 0 0 .14.72-.17 2-.43 1.76-1.42 3.3-2.76 4.5L9.94 18l-6.98-6.2C1.62 10.6.62 9.06.2 7.3c-.3-1.3-.17-2-.17-2C.3 2.42 2.37 0 5.26 0 7.4 0 9.13 1.3 9.94 3.18z"></path> <path id="Combined-Shape" fill="#6E1B34" d="M14 .05c-1.82.26-3.35 1.48-4.06 3.13-.18-.4-.4-.8-.67-1.15-.7.9-1.13 2.04-1.24 3.27 0 0-.14.7.17 2 .42 1.76 1.42 3.3 2.76 4.5l3 2.68 3.08-2.68c1.34-1.2 2.33-2.74 2.76-4.5.3-1.28.17-2 .17-2-.12-1.26-.58-2.42-1.3-3.34-.3.37-.54.78-.73 1.22C17.24 1.53 15.8.3 14 .05z"></path> <path id="Shape-Copy" fill="#AA2347" d="M19.44 3.18C20.24 1.3 22.1 0 24.24 0c2.9 0 4.97 2.42 5.23 5.3 0 0 .14.72-.17 2-.43 1.76-1.42 3.3-2.76 4.5l-7.1 6.2-6.98-6.2c-1.34-1.2-2.34-2.74-2.76-4.5-.3-1.3-.17-2-.17-2C9.8 2.42 11.87 0 14.76 0c2.15 0 3.87 1.3 4.68 3.18z"></path> <path id="Combined-Shape-Copy" fill="#8F1D3B" d="M23.5.05c-1.82.26-3.35 1.48-4.06 3.13-.18-.4-.4-.8-.67-1.15-.7.9-1.13 2.04-1.24 3.27 0 0-.14.7.17 2 .42 1.76 1.42 3.3 2.76 4.5l3 2.68 3.08-2.68c1.34-1.2 2.33-2.74 2.76-4.5.3-1.28.17-2 .17-2-.12-1.26-.58-2.42-1.3-3.34-.3.37-.54.78-.73 1.22C26.74 1.53 25.3.3 23.5.05z"></path> <path id="Shape-Copy-2" fill="#D12550" d="M28.74 3.18C29.54 1.3 31.4 0 33.54 0c2.9 0 4.97 2.42 5.23 5.3 0 0 .14.72-.17 2-.43 1.76-1.42 3.3-2.76 4.5l-7.1 6.2-6.98-6.2c-1.34-1.2-2.34-2.74-2.76-4.5-.3-1.3-.17-2-.17-2C19.1 2.42 21.17 0 24.06 0c2.15 0 3.87 1.3 4.68 3.18z"></path> </g> </g> <text id="message" data-menu="message" fill="#FFEECC" font-family="OpenSans-Light, Open Sans" font-size="14" font-weight="300" letter-spacing="1.2"> <tspan x="20" y="39">Under the MIT License –</tspan> <tspan x="204.5" y="39" font-family="OpenSans-Bold, Open Sans" font-weight="bold">take what</tspan> <tspan x="20" y="60" font-family="OpenSans-Bold, Open Sans" font-weight="bold">you want</tspan> <tspan x="94.79" y="60">. Thanks for hearting! </tspan> </text> <path id="Line" stroke="#0B141A" d="M1 12h277" stroke-linecap="square"></path> </g> </g> <g id="box-2" transform="translate(10 179)"> <path id="bg" fill="#0F1B23" d="M0 0h317v70H0z"></path> <g id="social" data-menu="social" transform="translate(29 20)"><a xlink:href="https://dribbble.com/Stromqvist" target="_blank"> <g id="dribbble" data-menu="dribbble" fill="#FFEECC" fill-rule="nonzero" transform="translate(55.765 .902)"> <path id="Shape" d="M17.32 14.77c-1.66-2.96-3.43-5.37-3.56-5.54-2.67 1.26-4.66 3.73-5.28 6.7.25.02 4.24.06 8.84-1.16z"></path> <path id="Shape" d="M15.55 8.6h-.03.03z"></path> <path id="Shape" d="M24.17 10.7c-1.7-1.48-3.9-2.4-6.33-2.4-.77 0-1.53.1-2.25.28.13.2 1.93 2.6 3.57 5.6 3.6-1.35 4.97-3.44 5-3.47z"></path> <path id="Shape" d="M19.48 19.5c-5.66 1.98-7.5 5.97-7.52 6 1.63 1.27 3.67 2.04 5.88 2.04 1.33 0 2.6-.27 3.74-.76-.14-.84-.7-3.8-2.04-7.3-.02 0-.04 0-.06.02z"></path> <path id="Shape" d="M18.5 18l.38-.12c-.24-.54-.5-1.1-.77-1.63-4.92 1.48-9.65 1.37-9.82 1.37v.3c0 2.47.92 4.72 2.44 6.43 0 0 2.62-4.67 7.8-6.35z"></path> <path id="Shape" d="M17.84 0C8 0 0 8.04 0 17.92c0 9.9 8 17.93 17.84 17.93S35.7 27.8 35.7 17.92C35.7 8.04 27.7 0 17.83 0zm11 20.2c-.16.72-.38 1.43-.67 2.1-.28.68-.62 1.32-1.03 1.92-.4.6-.86 1.16-1.37 1.67-.5.5-1.06.96-1.66 1.36-.58.4-1.23.76-1.9 1.04-.67.28-1.38.5-2.1.65-.73.16-1.5.23-2.25.23-.76 0-1.52-.07-2.26-.23-.73-.14-1.44-.37-2.12-.65-.66-.3-1.3-.63-1.9-1.04-.6-.4-1.15-.86-1.66-1.37-.5-.52-.97-1.08-1.37-1.68-.4-.6-.75-1.25-1.03-1.9-.3-.7-.5-1.4-.66-2.13-.15-.75-.22-1.5-.22-2.28 0-.76.07-1.52.22-2.26.15-.73.37-1.44.66-2.12.28-.67.63-1.3 1.03-1.9.4-.6.86-1.17 1.37-1.68.5-.5 1.06-.97 1.66-1.37.6-.42 1.24-.77 1.9-1.05.68-.3 1.4-.5 2.1-.66.75-.16 1.5-.23 2.27-.23.76 0 1.52.07 2.25.22.72.14 1.43.36 2.1.65.68.28 1.32.63 1.9 1.04.6.4 1.17.85 1.67 1.36.5.5.97 1.07 1.37 1.67.4.6.75 1.24 1.03 1.9.3.7.5 1.4.66 2.13.15.74.22 1.5.22 2.26 0 .77-.07 1.53-.22 2.27z"></path> <path id="Shape" d="M21.33 19.03c1.26 3.47 1.77 6.3 1.86 6.87 2.14-1.46 3.67-3.77 4.1-6.45-.2-.07-2.88-.9-5.97-.42z"></path> <path id="Shape" d="M19.9 15.62c.23.46.44.92.64 1.4l.2.5c3.3-.42 6.54.28 6.67.3 0-2.27-.82-4.37-2.16-6-.02.02-1.55 2.25-5.34 3.8z"></path> <circle data-link="dribbble" cx="18" cy="18" r="18" fill="#FFFFFF" opacity="0.01"></circle> </g></a><a xlink:href="https://github.com/nerdmanship" target="_blank"> <g id="github" data-menu="github" fill="#FFEECC" fill-rule="nonzero" transform="translate(223 1)"> <path id="Shape" d="M33.55 9.8c-1.6-2.76-3.78-4.94-6.53-6.55-2.75-1.6-5.75-2.42-9-2.42-3.27 0-6.27.8-9.02 2.42-2.75 1.6-4.93 3.8-6.53 6.54-1.6 2.75-2.4 5.76-2.4 9.02 0 3.92 1.13 7.45 3.4 10.58 2.3 3.13 5.25 5.3 8.86 6.5.42.08.73.02.94-.17.2-.18.3-.42.3-.7v-1.26c-.02-.8-.02-1.5-.02-2.1l-.54.1c-.33.07-.77.1-1.3.1-.5-.02-1.05-.07-1.6-.18-.57-.1-1.1-.34-1.58-.7-.48-.37-.82-.86-1.03-1.45L7.25 29c-.16-.35-.4-.74-.74-1.18-.33-.44-.67-.74-1-.9l-.18-.1c-.1-.1-.2-.18-.3-.3-.1-.1-.16-.2-.2-.32-.06-.1-.02-.2.1-.27.13-.07.36-.1.68-.1l.47.07c.3.06.7.25 1.15.56.46.3.83.72 1.13 1.22.36.64.8 1.13 1.3 1.46.5.34 1 .5 1.53.5.52 0 .97-.03 1.34-.1.38-.1.73-.2 1.05-.36.13-1.05.52-1.85 1.14-2.42-.9-.1-1.7-.23-2.4-.42-.7-.2-1.44-.5-2.2-.9-.75-.43-1.38-.96-1.88-1.58-.5-.63-.9-1.45-1.22-2.46-.32-1.02-.48-2.2-.48-3.5 0-1.9.6-3.5 1.84-4.84-.57-1.42-.52-3 .17-4.78.45-.14 1.12-.03 2 .32.9.35 1.55.65 1.96.9l1 .63c1.44-.4 2.94-.6 4.48-.6 1.55 0 3.05.2 4.5.6l.9-.56c.6-.37 1.3-.72 2.14-1.03.82-.3 1.45-.4 1.9-.26.7 1.77.75 3.36.18 4.78 1.23 1.33 1.84 2.94 1.84 4.83 0 1.3-.16 2.5-.47 3.5-.33 1.03-.75 1.85-1.25 2.47-.5.62-1.14 1.14-1.9 1.56-.75.42-1.48.72-2.2.9-.7.2-1.5.34-2.4.43.82.7 1.23 1.82 1.23 3.33v4.93c0 .28.1.52.3.7.18.2.5.25.9.17 3.63-1.2 6.58-3.37 8.86-6.5 2.28-3.13 3.42-6.66 3.42-10.58 0-3.26-.8-6.27-2.4-9.03z"></path> <circle data-link="github" cx="18" cy="18" r="18" fill="#FFFFFF" opacity="0.01"></circle> </g></a><a xlink:href="https://www.instagram.com/nerdmanship/" target="_blank"> <g id="instagram" data-menu="instagram" fill="#FFEECC" fill-rule="nonzero" transform="translate(111.53)"> <path id="Shape" d="M17.84 21.5c1.97 0 3.58-1.6 3.58-3.58 0-.78-.26-1.5-.68-2.1-.65-.9-1.7-1.48-2.9-1.48s-2.24.6-2.9 1.5c-.4.58-.67 1.3-.67 2.08 0 1.98 1.6 3.6 3.57 3.6z"></path> <path id="Shape" d="M25.65 13.53v-3.45H22.2l.02 3.47z"></path> <path id="Shape" d="M17.84 0C8 0 0 8.04 0 17.92c0 9.9 8 17.93 17.84 17.93S35.7 27.8 35.7 17.92C35.7 8.04 27.7 0 17.83 0zM28 15.83v8.35c0 2.17-1.77 3.94-3.93 3.94H11.62c-2.16 0-3.92-1.77-3.92-3.94V11.67c0-2.17 1.76-3.94 3.92-3.94h12.45c2.16 0 3.92 1.77 3.92 3.94v4.16z"></path> <path id="Shape" d="M23.4 17.92c0 3.08-2.5 5.58-5.56 5.58-3.06 0-5.55-2.5-5.55-5.58 0-.74.14-1.44.4-2.1H9.67v8.36c0 1.08.87 1.95 1.95 1.95h12.45c1.07 0 1.94-.87 1.94-1.95v-8.35H23c.27.65.42 1.35.42 2.1z"></path> <circle data-link="instagram" cx="18" cy="18" r="18" fill="#FFFFFF" opacity="0.01"></circle> </g></a><a xlink:href="https://www.linkedin.com/in/johanstromqvist" target="_blank"> <g id="linkedin" data-menu="linkedin" fill="#FFEECC" fill-rule="nonzero" transform="translate(167.295)"> <path id="Shape" d="M21.1 15.38c-1.53 0-2.2.84-2.6 1.43V15.6h-2.87c.04.82 0 8.7 0 8.7h2.88V19.4c0-.26.02-.52.1-.7.2-.53.68-1.07 1.48-1.07 1.04 0 1.45.8 1.45 1.97v4.65h2.88V19.3c0-2.68-1.4-3.92-3.3-3.92zm-2.6 1.46v-.03.04z"></path> <path id="Rectangle-path" d="M11.16 15.58h2.88v8.7h-2.88z"></path> <path id="Shape" d="M17.84 0C8 0 0 8.04 0 17.92c0 9.9 8 17.93 17.84 17.93S35.7 27.8 35.7 17.92C35.7 8.04 27.7 0 17.83 0zm9.47 26.03c0 .76-.62 1.38-1.4 1.38H9.67c-.78 0-1.4-.6-1.4-1.37V9.53c0-.75.62-1.37 1.4-1.37H25.9c.78 0 1.4.62 1.4 1.38v16.5z"></path> <path id="Shape" d="M12.62 11.4c-1 0-1.63.64-1.63 1.5 0 .83.6 1.5 1.58 1.5h.02c1 0 1.62-.67 1.62-1.5-.02-.86-.62-1.5-1.6-1.5z"></path> <circle data-link="linkedin" cx="18" cy="18" r="18" fill="#FFFFFF" opacity="0.01"></circle> </g></a><a xlink:href="https://twitter.com/Stromqvist" target="_blank"> <g id="twitter" data-menu="twitter" fill="#FFEECC" fill-rule="nonzero"> <path id="Shape" d="M17.84.9C8 .9 0 8.94 0 18.83c0 9.88 8 17.92 17.84 17.92S35.7 28.7 35.7 18.83C35.7 8.93 27.7.9 17.83.9zm7.97 13.82.02.54C25.82 20.7 21.7 27 14.12 27c-2.3 0-4.47-.7-6.3-1.86.34.04.66.06 1 .06 1.92 0 3.7-.66 5.1-1.77-1.8-.03-3.32-1.22-3.84-2.86.25.05.5.07.77.07.38 0 .74-.05 1.08-.14-1.88-.38-3.3-2.05-3.3-4.05v-.05c.56.3 1.2.5 1.87.52-1.1-.74-1.83-2-1.83-3.43 0-.77.2-1.48.56-2.1 2.02 2.5 5.05 4.15 8.46 4.32-.08-.3-.1-.6-.1-.94 0-2.28 1.83-4.12 4.1-4.12 1.18 0 2.24.5 3 1.3.93-.2 1.8-.53 2.6-1-.3.96-.96 1.77-1.8 2.28.83-.1 1.62-.32 2.35-.65-.55.82-1.24 1.54-2.04 2.12z"></path> <circle data-link="twitter" cx="18" cy="18" r="18" fill="#FFFFFF" opacity="0.01"></circle> </g></a></g> </g> </g> <g id="box-1" transform="translate(10 41)"> <path id="bg" fill="#0F1B23" d="M0 0h317v148H0z"></path> <path id="Line" stroke="#0B141A" d="M1 142h277" stroke-linecap="square"></path> <path id="shadow" fill="#0B1319" d="M0 0h317v16L0 10z"></path> <g id="links" data-menu="links" transform="translate(23 27)"><a xlink:href="https://www.facebook.com/nerdmanship" target="_blank"> <g id="link-3" fill="#FFEECC" transform="translate(0 73)"> <text id="Animation-on-Faceboo" data-menu="textLinks" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="700" letter-spacing="1.2"> <tspan x="23" y="17">Animation on Facebook</tspan> </text> <path id="arrow" data-menu="arrows" fill-rule="nonzero" d="M14 11c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7 7-3.13 7-7zm-8.4 3.08c-.2-.2-.2-.48 0-.68l2.13-2.13L5.37 8.9c-.18-.18-.18-.5 0-.67l.22-.2c.18-.2.5-.2.68 0l3.25 3.24L6.5 14.3c-.2.2-.5.2-.68 0l-.23-.22z"></path> <rect data-link="facebook" x="0" y="0" width="250" height="20" fill="#FFFFFF" opacity="0.01"></rect> </g></a><a xlink:href="http://nerdmanship.com" target="_blank"> <g id="link-2" fill="#FFEECC" transform="translate(0 37)"> <text data-menu="textLinks" id="Nerdmanship.com" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="700" letter-spacing="1.2"> <tspan x="23" y="17">Nerdmanship.com</tspan> </text> <path id="arrow" data-menu="arrows" fill-rule="nonzero" d="M14 11c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7 7-3.13 7-7zm-8.4 3.08c-.2-.2-.2-.48 0-.68l2.13-2.13L5.37 8.9c-.18-.18-.18-.5 0-.67l.22-.2c.18-.2.5-.2.68 0l3.25 3.24L6.5 14.3c-.2.2-.5.2-.68 0l-.23-.22z"></path> <rect data-link="website" x="0" y="0" width="250" height="20" fill="#FFFFFF" opacity="0.01"></rect> </g></a><a xlink:href="https://codepen.io/nerdmanship" target="_blank"> <g id="link-1" fill="#FFEECC"> <text id="Experimental-Pens" data-menu="textLinks" font-family="OpenSans-Bold, Open Sans" font-size="18" font-weight="700" letter-spacing="1.2"> <tspan x="23" y="17">Experimental Pens</tspan> </text> <path id="arrow" data-menu="arrows" fill-rule="nonzero" d="M14 11c0-3.87-3.13-7-7-7s-7 3.13-7 7 3.13 7 7 7 7-3.13 7-7zm-8.4 3.08c-.2-.2-.2-.48 0-.68l2.13-2.13L5.37 8.9c-.18-.18-.18-.5 0-.67l.22-.2c.18-.2.5-.2.68 0l3.25 3.24L6.5 14.3c-.2.2-.5.2-.68 0l-.23-.22z"></path> <rect data-link="codepen" x="0" y="0" width="250" height="20" fill="#FFFFFF" opacity="0.01"></rect> </g></a></g> </g> </g> <g id="title" transform="translate(1 1)"> <rect id="bg" data-menu="iconBox" width="337" height="50" fill="#192D3A" rx="8" stroke-width="2px"></rect> <g id="nerdmanship" fill="#F6C155" transform="translate(12.5 6.5)"> <g id="char-11" data-menu="chars" transform="translate(288)"> <path d="M13.8 27.15h-2.04c-.85 0-1.3.1-1.6.35-.4.4-.6 1-.6 1.55 0 .3.05.6.05.85.1 1.05.06 2.1.1 3.1.06.4.1.85.1 1.25 0 .75-.04 1.65-1.6 1.65-.5 0-2.64-.15-3.1-.15l-2 .15c-.2.05-.7.1-1.04.1-1.05 0-1.4-.75-1.4-1.95 0-.5.1-1 .1-1.45L.7 31.35c0-.2.06-.5.1-1.2.06-.25.1-.75.1-1.65 0-.6-.1-3.7-.1-4.45l.06-4.65c0-1.5-.05-3.05-.05-4.55 0-1.7.1-3.45.1-5.2C.9 8.7.7 3.9.7 2.8c0-1.25.86-1.8.96-1.9.4-.25.85-.35 1.75-.35L5.5.6C6.37.6 7.17.5 7.97.5c.3 0 1.7.1 2.05.1.36 0 2.1-.1 2.5-.1 4.4 0 6.36 1.45 7.1 2 .6.45 1.66 1.3 2.4 2.95.1.25.9 2.4 1 2.8.46 1.4.6 2.8.6 4.05 0 1.1-.2 3.3-.34 4.95-.15 1.25-.3 2.95-1.9 5.3-1.5 2.2-3.8 4.5-7.55 4.6zm-4.04-13.1v1.3c0 2.4 1.5 2.95 2.05 2.95.4 0 2.36-.35 2.36-2.9l-.05-1.5.06-1.6c0-2.6-1.55-3.4-2.4-3.4-1.8 0-1.95 1.85-2 2.9-.05.35 0 1.9 0 2.25z"></path> </g> <g id="char-10" data-menu="chars" transform="translate(271)"> <path d="M9.74 18.9c0-.5.1-2.65.1-3.05L9.8 12.1c0-5.15 0-5.7.04-6.9 0-.45.15-2.35.15-2.75C10 2.2 10 .6 8.8.6l-.86.05c-.6.05-1.2.05-1.8.05L3.04.65c-.95 0-1.2 0-1.5.15-.25.15-.8.55-.8 1.45 0 .35.15 2.05.15 2.4v3.4c0 .85-.16 4.6-.16 5.35v6.25c0 .8.15 4.4.15 5.15v3.65c0 .5-.16 2.7-.16 3.15 0 .45 0 3.05.05 3.25.24 1.1 1.54 1.1 1.84 1.1h.3c.5 0 2.9-.15 3.4-.15.35 0 1.8.1 2.1.1 1.2 0 1.55-.7 1.55-1.3 0-.65-.2-3.6-.2-4.2 0-.6.14-3.25.14-3.8 0-.85-.2-4.5-.2-5.25V18.9z"></path> </g> <g id="char-9" data-menu="chars" transform="translate(241)"> <path d="M.27 30.4c0 .6-.25 3.15-.25 3.65s0 2.05 1.9 2.05c.2 0 .75-.05 1.25-.1.5 0 1.05-.05 1.2-.05h.75c.7 0 1.35 0 2 .1.2.05.4.05.55.05.65 0 1.5-.55 1.5-1.5 0-.3-.1-1.45-.1-1.65 0-.5.1-2.6.1-3.05 0-.45-.1-2.55-.1-3 0-.8.05-1.3.2-2.65.15-1.4 1.15-1.6 1.75-1.6.35 0 1.4 0 1.7.1 1.1.4 1.25 1.7 1.25 2.9 0 .35-.1 1.75-.1 2.05-.05.75-.05 2.25-.05 3.05l.05 1.45c-.05.35-.2 1.8-.2 2.05 0 1.5 1.05 1.8 1.65 1.8.45 0 2.95-.2 3.5-.2.5 0 1.05.05 1.6.1.2 0 .45.05.65.05 1.4 0 1.7-1.2 1.7-2.05 0-.35-.15-1.85-.2-2.15V31l.05-3.1V27c-.05-1-.15-1.95-.2-2.95-.05-.75-.05-1.55-.05-2.35s.1-4.5.1-5.25c0-.7-.1-3.7-.1-4.35 0-.4.15-2.25.15-2.6l-.05-1.35c0-.5.1-2.7.1-3.45.05-.6.1-1.15.1-1.7 0-.8 0-1.05-.1-1.25 0-.05-.4-1.05-1.9-1.05-.15 0-.7.05-1.2.05-.5.05-1 .1-1.2.1-.7 0-1.45-.05-2.2-.1-.25-.05-.5-.05-.8-.05-1.45 0-1.8.95-1.8 1.65 0 .35.1 1.85.15 2.15v.35c0 .65-.05 1.3-.05 1.95 0 .5.15 2.65.15 3.05 0 .55-.1 2-.2 2.55-.2 1.35-1.2 1.4-2.05 1.4-1.4 0-2.45-.1-2.45-1.85l.05-3.55c0-.5-.1-2.75-.1-3.2 0-.4.25-2.35.25-2.75 0-.75-.2-1.75-1.8-1.75-.2 0-.35 0-1.35.1-.5.05-1 .05-1.5.05-.2 0-.8-.05-1.4-.05-.6-.05-1.2-.05-1.4-.05C.17.75.12 2.05.12 2.35c0 .5.15 2.75.15 3.2 0 .5-.1 2.85-.1 3.35 0 .4 0 2.45.1 4.4.05.7.1 1.65.1 2.1 0 .75-.2 4.15-.2 4.8 0 .95.2 5.05.2 5.9 0 .45-.1 2.5-.1 2.9v1.4z"></path> </g> <g id="char-8" data-menu="chars" transform="translate(214)"> <path d="M1.15 10.85c0 2.05 0 3.3 1.15 5.35.8 1.45 1.55 2.2 2.8 3.35.4.3 1.95 1.9 2.25 2.2 3.1 2.95 3.5 3.3 3.5 4.4C10.85 27.7 9.3 28 7.9 28c-1 0-1.95-.2-2.4-.5-.3-.2-.6-.5-.9-.75-.6-.5-1.1-.6-1.95-.6-1.8 0-1.8 1.65-1.8 2.25 0 .35.1 1.95.1 2.25 0 .5-.15 2.7-.15 3.15 0 .5 0 .95.85 1.55 1.05.75 4.3 1.15 6.45 1.15 1.55 0 4.2-.2 5.55-.55 1.1-.3 3.7-1.25 5.35-3.75 1.3-1.95 1.35-4.3 1.35-6.6 0-3.15-.7-5.2-4.05-8.45-.3-.3-.6-.55-.95-.85-.5-.45-1.3-1.25-1.85-1.75-2.15-1.95-2.95-2.65-2.95-4 0-1.75 1.6-1.8 2.2-1.8.4 0 1 0 1.75.2.7.2 1.35.45 2 .55h.35c1.7 0 1.9-1.35 1.9-1.9l-.05-1.75c0-.55.1-3.4.1-3.5C18.8.2 16 .2 11.85.2 10.1.2 8 .35 5.75 1.35c-1.7.8-3 2.3-3.75 4.05-.5 1.15-.85 2.7-.85 5.45z"></path> </g> <g id="char-7" data-menu="chars" transform="translate(184)"> <path d="M.28 27.4c.05.2.1 1.15.1 1.35 0 .25-.35 4.75-.35 5.65 0 .35 0 1.6 1.35 1.6.25 0 .45 0 .65-.05.6-.05 1.2-.1 1.8-.1.6 0 3.2.1 3.7.1.8 0 1.5-.35 1.5-1.4 0-.65-.25-3.65-.25-4.25 0-1.45.15-2.9.15-4.35 0-1.15-.2-3.5-.25-3.85-.05-.45-.15-1.05-.15-1.35 0-.2.1-.45.2-.45.2 0 .4.6 1 2.35.25.7.45 1.4.75 2.1.2.5.5 1.05.75 1.55.35.7.65 1.45.9 2.15.15.5.3 1 .5 1.55.3.75.75 1.6 1.15 2.4.25.6.55 1.2.7 1.8.2.65.55 1.65 1.4 1.65.5 0 2.95-.1 3.45-.1.4 0 2.1.1 2.5.1.85 0 .95 0 1.2-.15.65-.35.65-.9.65-1.05 0-.25-.15-1.35-.15-1.6-.05-.85-.1-1.7-.1-2.55 0-.9.25-4.95.25-5.75 0-.95-.2-5.2-.2-6.05 0-.75.05-1.5.05-2.25.05-1.65.1-3.3.1-4.35 0-.95-.15-5.05-.15-5.85 0-.45.1-3.05.2-3.55 0-.25.05-.45.05-.65 0-.75-.5-1.15-.7-1.25-.15-.1-.35-.1-.65-.1l-1.6.05c-.55 0-2.5 0-2.95-.05-.3 0-.6-.05-.85-.05-1.2 0-1.75.8-1.85 1-.2.4-.2 1.85-.2 2.3 0 .95.25 5 .25 5.85 0 .35-.1 1.85-.1 2.15 0 .1.05.6.1.9 0 .35.05.7.05 1.05 0 .45 0 1.95-.25 1.95-.1 0-.3-.2-.45-.75-.3-.85-.9-2.8-1.35-3.85-.15-.3-.35-.6-.45-.9l-.55-1.45c-.15-.35-.35-.7-.55-1.05-.05-.1-.95-2.1-.95-2.2-.1-.2-.15-.45-.25-.65-.45-1.3-1.5-3.35-1.7-3.65-.1-.2-.45-.7-1.25-.7-.25 0-2.45.15-2.9.15-.2 0-1.75 0-1.95-.05-.35 0-.65-.1-1-.1-1.15 0-1.4.95-1.4 1.4 0 .8.15 4.3.15 5 0 .35 0 1.2-.05 2.25-.05 1-.05 2-.05 3 0 .45 0 2.25.05 3.15 0 .25.1 1.85.1 1.95 0 .7-.05 1.4-.1 2.1-.05 1.15-.1 2.5-.1 3.7l.05 2.65v1.55z"></path> </g> <g id="char-6" data-menu="chars" transform="translate(154)"> <path d="M2.2 21.1c.2-1.5.56-3 .76-4.45.15-.9.2-1.75.35-2.65.2-1.25.56-2.5.8-3.8.4-1.95.5-3.95.9-5.9C5.8.8 6.3.55 8.4.55c.56 0 1.1.05 1.66.1 1 .05 2 .1 3 .1 1.25 0 2.5-.05 3.75-.1 1.9 0 2.4.45 2.76 2.3.15.6.7 3.35.75 3.85.1.6.5 3.8.6 4.5.2 1.2 1.36 6.9 1.6 8.25.26 1.35.3 1.6.5 4.1.2 2.1.6 4.2 1 6.3.2.8.36 1.65.56 2.45.1.5.15 1 .15 1.5 0 1.1-.64 2.1-1.54 2.1-.5 0-2.85-.15-3.4-.15-.35 0-2.2.15-2.6.15-1.6 0-1.65-1.25-1.65-1.8 0-.7-.1-1.45-.2-2.2-.1-1.1-.2-1.65-.74-1.9-.2-.1-1.2-.1-3.2-.1-1.05 0-1.45.1-1.7.5s-.4 3.05-.45 3.65C9.17 35.65 8.37 36 7.5 36c-.34 0-2-.15-2.4-.15l-3.04.05c-.4 0-.8 0-1.2-.1-.65-.2-.85-.9-.85-1.25 0-.25 1.1-6.5 1.16-6.9.1-.55.25-1.15.35-1.75.16-.7.56-4.05.7-4.8zm8.66-3.65c-.15.75-.3 1.5-.3 2.2 0 1.35.4 1.85 1.5 1.85.6 0 1.95 0 1.95-1.7 0 0 0-1.95-.3-3.8-.1-.8-.3-1.6-.4-2.4-.1-.65-.14-1.25-.24-1.85-.1-.8-.5-.95-.6-.95-.35 0-.55.85-.6 1.25-.1.6-.3 1.5-.45 2.05-.3 1.15-.34 2.25-.54 3.35z"></path> </g> <g id="char-5" data-menu="chars" transform="translate(118)"> <path d="M9.83 28.45c.05-.2.1-1.85.1-1.85 0-.7-.05-1.35-.05-2 0-.7.15-3.7.15-4.3 0-.25 0-.75.2-.75.45 0 1.55 2.8 1.8 3.2.15.3.35.6.55.9.35.5 1.55 2.8 1.85 3.25.4.55.6.65 1.5.65.8 0 1.15-.75 1.6-1.75.25-.65 1.5-3.4 1.7-4 .4-1.25.45-1.4.65-1.7.2-.35.35-.4.45-.4.2 0 .2.2.2.45l.05.75-.05 1.5c0 .5.15 2.65.15 3.05 0 .35-.2 1.75-.2 2 0 .45.05.85.05 1.25v2.55c0 .55 0 1.1-.1 1.65-.1.9-.1 1-.1 1.3 0 .65.1 1 .65 1.4.3.2.6.3 1.2.3.3 0 .65 0 .95-.05.55-.05 1.1-.05 1.65-.05.95 0 1.85.05 2.8.1.25.05.55.05.85.05 1.2 0 1.2-.85 1.2-2.2 0-.6-.2-3.05-.2-3.55 0-.95.15-5 .15-5.8 0-.85-.1-4.55-.1-5.35 0-1.35.1-7.45.1-8.65l-.05-3.45.2-3.45c.05-.35.1-1.45.1-1.75 0-.9-.65-1.3-1.15-1.3-.2 0-.35.05-.55.05-.1.05-2.25.1-2.45.1-.2 0-.75-.05-1.25-.05C23.88.5 23.38.5 23.18.5c-.15 0-1.55.1-1.7.15-.6.2-.9.9-1.25 1.65l-.9 1.8c-.4.95-.7 1.9-1.15 2.85-.25.55-1.45 2.95-1.7 3.45-.15.35-.6 1.45-1 1.45-.45 0-1.1-1.45-1.5-2.35-.15-.4-.35-.8-.6-1.2-.4-.7-.8-1.3-1.15-2-.95-1.7-1.4-2.75-1.8-3.8-.5-1.45-.95-1.95-2.1-1.95-.25 0-1.45.1-1.65.1-.65 0-3.45-.1-4-.1C2.03.55.88.55.88 2c0 .2 0 1.35.05 1.6 0 1 .2 2 .2 3 0 .5-.1 2.65-.1 3.05 0 1 .1 5.25.1 6.1 0 1.05-.15 5.8-.15 6.75 0 1.05.15 5.6.15 6.55 0 .8 0 1.9-.05 2.6 0 .45-.15 2.3-.15 2.7 0 1.55 1 1.65 1.8 1.65.2 0 .3 0 1.1-.05.35-.05.65-.05 2.15-.05l2.25.05c1.6 0 1.7-.95 1.7-1.8 0-.4-.05-.8-.05-1.2-.05-.8-.05-1.5-.05-2.75v-1.75z"></path> </g> <g id="char-4" data-menu="chars" transform="translate(89)"> <path d="M6.2.75C6.87.75 10 .6 10.7.6c2.16 0 4.36.2 6.2 1.3.6.35 3.66 2.35 5.26 6.15 1.45 3.55 1.7 8.65 1.7 10.7 0 1.05-.05 3.05-.7 5.7-.45 1.9-1.15 3.7-2.1 5.4-3.5 5.8-7.95 6-11 6-.4 0-2.25-.15-2.7-.15-.55 0-3.2.25-3.8.25-1.45 0-3.1 0-3.1-2.3 0-.35.05-.7.05-1.05.06-.4 0-.85.06-1.25 0-.35.15-2.15.15-2.55 0-.95-.1-1.9-.1-2.8-.1-1.45-.14-4.2-.14-5.05 0-.5.1-2.95.1-3.5 0-.7-.15-4.2-.15-5 0-.7.1-4 .1-4.75 0-.6-.14-3.5-.14-4.15C.36 2.6.36.7 2.56.7L6.2.75zm4.7 8.45c-1.7 0-1.7 1.75-1.7 2.4 0 .55.06 1.05.06 1.55.05.95.1 2.3.1 3.65l-.05 3.5c0 .35.1 2.1.16 2.5l-.05 2.15c0 .85.06 1.25.16 1.7.35 1.2 1.4 1.2 1.6 1.2.15 0 2 0 2.45-2.9.7-4.95.7-5.15.7-6.15 0-1.15-.1-2.25-.2-3.4-.14-1.9-.54-6.2-3.2-6.2z"></path> </g> <g id="char-3" data-menu="chars" transform="translate(58)"> <path d="M6.9.6c.9 0 5.34-.15 6.34-.15C20.14.45 22.1 3.9 23.3 7c.7 1.75.74 5.9.74 6.45 0 2.25-.3 4.35-1.5 6.7-.2.35-.95 1.85-2.3 2.95-.5.45-.75.65-.75 1.05 0 .75 2 4 2.3 4.75.2.45.34.9.5 1.3l.6 1.2c1.4 2.6 1.5 2.95 1.5 3.4 0 .6-.5 1.05-1.26 1.05-.4 0-2.2-.1-2.6-.1-.65 0-2.55.05-3.15.1-.3 0-.6.05-.96.05-.95 0-1.25-.3-1.55-.8-.16-.3-.8-1.9-.96-2.25-.4-.85-.95-1.7-1.35-2.6l-.46-1.05c-.5-1.2-1.1-2.45-1.6-2.45-.7 0-.7.85-.7 1.15 0 .35.1 2.3.1 2.75L9.9 32.7c0 .25.1 1.7.1 2 0 1.05-.9 1.25-1.2 1.25-.2 0-.36-.05-.56-.05-.45-.05-1.85-.1-2.35-.1-.46 0-3 .2-3.5.2-1 0-1.6-.8-1.6-1.7 0-.15 0-.35.04-.5.15-2.5.2-4 .2-4.85 0-1-.2-5.8-.2-6.9 0-.95.15-5.8.15-6.85 0-.65-.1-3.75-.1-4.45 0-.7.1-4.1.1-4.85C1 5.45.9 3.45.9 3 .9 1.25 2 .55 3.6.55L6.9.6zm4.94 8.2c-1.95 0-2 1.75-2 2.55 0 .45-.1 2.9-.1 3.45 0 1.05.7 2.35 2.1 2.35 1.45 0 2.15-.8 2.4-1.85.1-.45.2-2.4.2-2.9 0-1.85-.9-3.6-2.6-3.6z"></path> </g> <g id="char-2" data-menu="chars" transform="translate(32)"> <path d="M14.72.65c-.3 0-1.65.1-1.9.1-.65 0-3.6-.1-4.2-.1h-2.6c-.2 0-.85-.05-1.45-.1C3.92.55 3.32.5 3.07.5.52.5.52 1.9.52 4.35l.05 3.8c0 1.75-.1 3.55-.1 5.3 0 .75.1 4.15.1 4.8l-.05 4.3.05 2.3c0 .35-.15 2-.15 2.35l.05 3.1c0 .85 0 2.1-.1 3.15 0 .2-.05.4-.05.6 0 1.05.85 1.95 2.05 1.95l1.9-.05 3.1-.05 1.7.05 1.8-.05c1.05 0 2.1.1 3.15.1l1.7-.05c.25 0 1.5.1 1.75.1.6 0 1.8-.35 1.8-2l-.05-2.15c0-.35 0-.9.05-1.45.05-.3.05-.6.05-.9 0-1.4-1.2-1.8-1.85-1.8-.35 0-.65.05-1 .1s-.75.05-1.15.05c-.35 0-.7 0-1.05-.05-.45-.05-.95-.15-1.45-.2-.65 0-1.45 0-2-.15-1.25-.35-1.25-1.25-1.25-2.25 0-1.4 0-2.15.25-2.6.5-.9 1.55-.95 2.35-.95.6 0 3.5.2 4.05.2.75 0 1.5 0 2-1.15.1-.2.15-.45.15-.9 0-.35-.1-1.8-.1-2.1 0-.35.1-1.8.1-2.1 0-1.4-.45-2-1.95-2l-1.6.05c-.35 0-1.75-.1-2.05-.1-.25 0-1.3.1-1.5.1-1.75 0-1.75-1.95-1.75-2.45 0-1.4 0-1.55.2-1.85.3-.45.85-.85 2.75-.85.35 0 1.8.15 2.1.15.25 0 1.35-.1 1.55-.1.15 0 .7.05.85 0 1.7-.15 1.8-1.3 1.8-2l-.05-1.7c0-.45.15-2.35.15-2.75 0-.95-.6-1.55-1.5-1.55l-1.6.05h-1.05z"></path> </g> <g id="char-1" data-menu="chars"> <path d="M.9 27.4c.05.2.1 1.15.1 1.35C1 29 .65 33.5.65 34.4c0 .35 0 1.6 1.35 1.6.25 0 .45 0 .65-.05.6-.05 1.2-.1 1.8-.1.6 0 3.2.1 3.7.1.8 0 1.5-.35 1.5-1.4 0-.65-.25-3.65-.25-4.25 0-1.45.15-2.9.15-4.35 0-1.15-.2-3.5-.25-3.85-.05-.45-.15-1.05-.15-1.35 0-.2.1-.45.2-.45.2 0 .4.6 1 2.35.25.7.45 1.4.75 2.1.2.5.5 1.05.75 1.55.35.7.65 1.45.9 2.15.15.5.3 1 .5 1.55.3.75.75 1.6 1.15 2.4.25.6.55 1.2.7 1.8.2.65.55 1.65 1.4 1.65.5 0 2.95-.1 3.45-.1.4 0 2.1.1 2.5.1.85 0 .95 0 1.2-.15.65-.35.65-.9.65-1.05 0-.25-.15-1.35-.15-1.6-.05-.85-.1-1.7-.1-2.55 0-.9.25-4.95.25-5.75 0-.95-.2-5.2-.2-6.05 0-.75.05-1.5.05-2.25.05-1.65.1-3.3.1-4.35 0-.95-.15-5.05-.15-5.85 0-.45.1-3.05.2-3.55 0-.25.05-.45.05-.65 0-.75-.5-1.15-.7-1.25C23.5.7 23.3.7 23 .7l-1.6.05c-.55 0-2.5 0-2.95-.05-.3 0-.6-.05-.85-.05-1.2 0-1.75.8-1.85 1-.2.4-.2 1.85-.2 2.3 0 .95.25 5 .25 5.85 0 .35-.1 1.85-.1 2.15 0 .1.05.6.1.9 0 .35.05.7.05 1.05 0 .45 0 1.95-.25 1.95-.1 0-.3-.2-.45-.75-.3-.85-.9-2.8-1.35-3.85-.15-.3-.35-.6-.45-.9L12.8 8.9c-.15-.35-.35-.7-.55-1.05-.05-.1-.95-2.1-.95-2.2-.1-.2-.15-.45-.25-.65-.45-1.3-1.5-3.35-1.7-3.65-.1-.2-.45-.7-1.25-.7-.25 0-2.45.15-2.9.15C5 .8 3.45.8 3.25.75c-.35 0-.65-.1-1-.1-1.15 0-1.4.95-1.4 1.4 0 .8.15 4.3.15 5C1 7.4 1 8.25.95 9.3c-.05 1-.05 2-.05 3 0 .45 0 2.25.05 3.15 0 .25.1 1.85.1 1.95 0 .7-.05 1.4-.1 2.1-.05 1.15-.1 2.5-.1 3.7l.05 2.65v1.55z"></path> </g> <g id="char-0" data-menu="icon"> <path d="M.9 27.4c.05.2.1 1.15.1 1.35C1 29 .65 33.5.65 34.4c0 .35 0 1.6 1.35 1.6.25 0 .45 0 .65-.05.6-.05 1.2-.1 1.8-.1.6 0 3.2.1 3.7.1.8 0 1.5-.35 1.5-1.4 0-.65-.25-3.65-.25-4.25 0-1.45.15-2.9.15-4.35 0-1.15-.2-3.5-.25-3.85-.05-.45-.15-1.05-.15-1.35 0-.2.1-.45.2-.45.2 0 .4.6 1 2.35.25.7.45 1.4.75 2.1.2.5.5 1.05.75 1.55.35.7.65 1.45.9 2.15.15.5.3 1 .5 1.55.3.75.75 1.6 1.15 2.4.25.6.55 1.2.7 1.8.2.65.55 1.65 1.4 1.65.5 0 2.95-.1 3.45-.1.4 0 2.1.1 2.5.1.85 0 .95 0 1.2-.15.65-.35.65-.9.65-1.05 0-.25-.15-1.35-.15-1.6-.05-.85-.1-1.7-.1-2.55 0-.9.25-4.95.25-5.75 0-.95-.2-5.2-.2-6.05 0-.75.05-1.5.05-2.25.05-1.65.1-3.3.1-4.35 0-.95-.15-5.05-.15-5.85 0-.45.1-3.05.2-3.55 0-.25.05-.45.05-.65 0-.75-.5-1.15-.7-1.25C23.5.7 23.3.7 23 .7l-1.6.05c-.55 0-2.5 0-2.95-.05-.3 0-.6-.05-.85-.05-1.2 0-1.75.8-1.85 1-.2.4-.2 1.85-.2 2.3 0 .95.25 5 .25 5.85 0 .35-.1 1.85-.1 2.15 0 .1.05.6.1.9 0 .35.05.7.05 1.05 0 .45 0 1.95-.25 1.95-.1 0-.3-.2-.45-.75-.3-.85-.9-2.8-1.35-3.85-.15-.3-.35-.6-.45-.9L12.8 8.9c-.15-.35-.35-.7-.55-1.05-.05-.1-.95-2.1-.95-2.2-.1-.2-.15-.45-.25-.65-.45-1.3-1.5-3.35-1.7-3.65-.1-.2-.45-.7-1.25-.7-.25 0-2.45.15-2.9.15C5 .8 3.45.8 3.25.75c-.35 0-.65-.1-1-.1-1.15 0-1.4.95-1.4 1.4 0 .8.15 4.3.15 5C1 7.4 1 8.25.95 9.3c-.05 1-.05 2-.05 3 0 .45 0 2.25.05 3.15 0 .25.1 1.85.1 1.95 0 .7-.05 1.4-.1 2.1-.05 1.15-.1 2.5-.1 3.7l.05 2.65v1.55z"></path> </g> </g> <rect data-link="menu" data-menu="titleBox" width="50" height="50" fill="#FFFFFF" opacity="0.01" rx="8"></rect> </g> </g> </svg></div>');
},
cacheDOM: function cacheDOM() {
this.target = document.querySelector("[data-menu=target]");
this.svg = document.querySelector("[data-menu=svg]");
this.singles = ["icon", "iconBox", "titleBox", "social", "links", "twitter", "dribbble", "instagram", "linkedin", "github", "message", "hearts"];
this.multiples = ["chars", "boxes", "textLinks", "arrows"];
this.s = {};
this.m = {};
for (var i = 0; i < this.singles.length; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
this.s[this.singles[i]] = this.svg.querySelector("[data-menu=" + this.singles[i] + "]");
}
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
for (var i = 0; i < this.multiples.length; i++) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;}
this.m[this.multiples[i]] = this.svg.querySelectorAll("[data-menu=" + this.multiples[i] + "]");
}
window.CP.exitedLoop(2);
window.CP.exitedLoop(2);
this.social = [menu.s.twitter, menu.s.dribbble, menu.s.instagram, menu.s.linkedin, menu.s.github];
},
bindEvents: function bindEvents() {
this.target.addEventListener("mouseover", menu.show);
this.target.addEventListener("mouseout", menu.hide);
this.s.links.addEventListener("mouseover", function (e) {
menu.animateLinkIn(e);
});
this.s.links.addEventListener("mouseout", function (e) {
menu.animateLinkOut(e);
});
this.s.social.addEventListener("mouseover", function (e) {
menu.animateSocialIn(e);
});
this.s.social.addEventListener("mouseout", function (e) {
menu.animateSocialOut(e);
});
this.svg.addEventListener("click", function (e) {
menu.trackEvent(e);
});
},
setStart: function setStart() {
TweenMax.set(menu.target, { width: "55", height: "55" });
TweenMax.set(menu.s.icon, { attr: { fill: "rgba(246, 193, 85, 0.7)" } });
TweenMax.set(menu.s.iconBox, { attr: { fill: "rgba(25, 45, 58, 0.5)", stroke: "rgba(55, 95, 108, 0.5)", width: "50" } });
TweenMax.set(menu.m.chars, { x: 0, autoAlpha: 0 });
TweenMax.set(menu.m.textLinks, { x: -30, autoAlpha: 0 });
TweenMax.set(menu.m.arrows, { x: -30, autoAlpha: 0 });
TweenMax.set(menu.social, { y: -50 });
TweenMax.set(menu.s.message, { y: -120 });
TweenMax.set(menu.s.hearts, { y: -130 });
TweenMax.set(menu.m.boxes[0], { y: -150, autoAlpha: 0 });
TweenMax.set(menu.m.boxes[1], { y: -60 });
TweenMax.set(menu.m.boxes[2], { y: -150 });
TweenMax.to(menu.target, 1, { autoAlpha: 1, delay: 0 });
},
show: function show() {
menu.tl.play().timeScale(1);
},
hide: function hide() {
menu.tl.reverse().timeScale(2);
},
animateLinkIn: function animateLinkIn(e) {
var group = e.target.parentNode;
var arrow = group.querySelector("[data-menu=arrows]");
var text = group.querySelector("[data-menu=textLinks]");
TweenMax.to(arrow, 0.3, { x: 8, ease: Back.easeOut.config(2) });
TweenMax.to(text, 0.3, { x: 5, ease: Back.easeOut.config(2), delay: 0.1 });
TweenMax.to([arrow, text], 0.3, { attr: { fill: "#F6C155" } });
},
animateLinkOut: function animateLinkOut(e) {
var group = e.target.parentNode;
var arrow = group.querySelector("[data-menu=arrows]");
var text = group.querySelector("[data-menu=textLinks]");
TweenMax.to(arrow, 0.3, { x: 0, ease: Back.easeOut.config(2) });
TweenMax.to(text, 0.3, { x: 0, ease: Back.easeOut.config(2), delay: 0.1 });
TweenMax.to([arrow, text], 0.3, { attr: { fill: "#FFEECC" } });
},
animateSocialIn: function animateSocialIn(e) {
var target = e.target.parentNode;
var id = target.getAttribute("data-menu");
var colors = {
dribbble: "#EA4C89",
twitter: "#1DA1F2",
linkedin: "#1985BD",
github: "#af49a9",
instagram: "#F98C46"
};
var color = colors[id] ? colors[id] : "yellow";
TweenMax.to(target, 0.3, { fill: color });
TweenMax.to(target, 0.3, { scale: 1.2, transformOrigin: "center", ease: Back.easeOut.config(5) });
},
animateSocialOut: function animateSocialOut(e) {
var target = e.target.parentNode;
TweenMax.to(target, 0.3, { fill: "#FFEECC", scale: 1, transformOrigin: "center" });
},
makeTimeline: function makeTimeline() {
this.tl = new TimelineMax({ paused: true });
this.tl.to(menu.target, 0.2, { width: "300", height: "360", ease: Power1.easeInOut }, 0).to(menu.s.iconBox, 0.2, { attr: { fill: "rgba(25, 45, 58, 1)", stroke: "rgba(25, 45, 58, 1)", width: "337" }, ease: Power1.easeInOut }, 0).staggerTo(menu.m.chars, 0.3, { cycle: { x: menu.charPos }, ease: Back.easeOut.config(1) }, 0.01, 0).staggerTo(menu.m.chars, 0.2, { autoAlpha: 1, ease: Back.easeOut.config(1) }, 0.01, 0.1).to(menu.m.boxes[0], 0.3, { y: 0, autoAlpha: 1, ease: Back.easeOut.config(1) }, 0.2).to(menu.m.boxes[1], 0.3, { y: 0, ease: Back.easeOut.config(1) }, 0.2).to(menu.m.boxes[2], 0.3, { y: 0, ease: Back.easeOut.config(1) }, 0.2).staggerTo(menu.m.textLinks, 0.3, { x: 0, autoAlpha: 1, ease: Back.easeOut.config(1) }, -0.1, 0.25).staggerTo(menu.m.arrows, 0.4, { x: 0, autoAlpha: 1, ease: Back.easeOut.config(1) }, -0.1, 0.25).staggerTo(menu.social, 0.3, { y: 0, ease: Back.easeOut.config(1) }, 0.05, 0.4).to(menu.s.message, 0.5, { y: 0, ease: Back.easeOut.config(1) }, 0.55).to(menu.s.hearts, 1, { y: 0, ease: Back.easeOut.config(1) }, 0.55).from(menu.s.hearts, 0.5, { autoAlpha: 0, ease: Back.easeOut.config(1) }, 0.75);
},
trackEvent: function trackEvent(e) {
var label = e.target.getAttribute("data-link");
if (label) {
ga('send', 'event', {
eventCategory: 'Menu links',
eventAction: 'clicked a link',
eventLabel: label,
transport: 'beacon'
});
}
}
};
menu.init();
})();
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments);
}, i[r].l = 1 * new Date();a = s.createElement(o), m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m);
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-91322471-1', 'auto');
ga('send', 'pageview');;
// Animatables
var shadow = document.querySelector('[data-anim=shadow]'),
rpl = document.querySelector('[data-anim=ripple]'),
carrot = document.querySelector('[data-anim=carrot]'),
icon = document.querySelector('[data-anim=icon]'),
box = document.querySelector('[data-anim=box]'),
boxStroke = document.querySelector('[data-anim=box-stroke]'),
boxMask = document.querySelector('[data-anim=box-mask]'),
lineGroup = document.querySelector('[data-anim=line-group]'),
line1 = document.querySelector('[data-anim=line-1]'),
line2 = document.querySelector('[data-anim=line-2]'),
cartContent = document.querySelector('[data-anim=cart-content]'),
cartItems = document.querySelectorAll('[data-anim=cart-item]'),
cartItemsCarrot = document.querySelectorAll('[data-anim=cart-item-carrot]'),
cartItemsInfo = document.querySelectorAll('[data-anim=cart-item-info]'),
coins = document.querySelectorAll('[data-anim=coin]'),
totItems = document.querySelector('[data-anim=total-items]'),
numGroup = document.querySelector('[data-anim=num-group]'),
num2 = document.querySelector('[data-anim=num-2]'),
num3 = document.querySelector('[data-anim=num-3]');
// Paths
var boxOpen = document.querySelector('[data-path=box-open]'),
line1Open = document.querySelector('[data-path=line-1-open]'),
line2Open = document.querySelector('[data-path=line-2-open]');
// Interactive
var iconArea = document.querySelector('[data-click=icon]'),
btnArea = document.querySelector('[data-click=btn]');
// Storage
var clickOrig, itemDest;
// Flags
var isOpen = false;
// Listeners
iconArea.addEventListener('click', iconHandler);
btnArea.addEventListener('click', btnHandler);
// Handlers
function iconHandler(e) {
isOpen ? toggleCartTl.reverse() : toggleCartTl.play();
isOpen = !isOpen;
}
function btnHandler(e) {
var delay = 0.4;
isOpen ? iconHandler() : delay = 0;
getAddToCartTl(getClickCoords(e)).delay(delay).play();
}
// Timelines
function getAddToCartTl(coords) {
var addToCartTl = new TimelineMax({ paused: true }),
btnTl = new TimelineMax({ paused: true }),
itemTl = new TimelineMax({ paused: true }),
iconTl = new TimelineMax({ paused: true });
addToCartTl.add(btnTl.play(), 0).add(itemTl.play(), 0).add(iconTl.play(), 0.5);
btnTl.to(shadow, 0, { autoAlpha: 0 }, 0).to(shadow, 0.5, { autoAlpha: 1 }, 0).to(ripple, 0, { x: coords.x, y: coords.y }, 0).fromTo(ripple, 0.5, { autoAlpha: 0.5, scale: 0 }, { autoAlpha: 0, scale: 20, transformOrigin: 'center' }, 0);
itemTl.fromTo(carrot, 0.5, { x: 0 }, { x: 242, ease: Power1.easeInOut }, 0).fromTo(carrot, 0.5, { y: 0 }, { y: -240, ease: Back.easeIn }, 0).fromTo(carrot, 0.5, { rotation: 0, scale: 1 }, { rotation: -80, scale: 0.25, transformOrigin: 'center', ease: Power1.easeInOut }, 0).fromTo(carrot, 0.05, { autoAlpha: 1 }, { autoAlpha: 0 }, 0.45);
iconTl.fromTo(num2, 0.15, { y: 0, autoAlpha: 1 }, { y: -10, autoAlpha: 0 }, 0).fromTo(num3, 0.15, { y: 15, autoAlpha: 0 }, { y: 0, autoAlpha: 1 }, 0).fromTo([icon, numGroup, lineGroup, boxStroke], 0.15, { y: 0 }, { y: -5, ease: Power1.easeOut, repeat: 1, yoyo: true }, 0);
return addToCartTl;
}
var toggleCartTl = new TimelineMax({ paused: true }),
linesTl = new TimelineMax({ paused: true }),
boxTl = new TimelineMax({ paused: true }),
numTl = new TimelineMax({ paused: true }),
contentTl = new TimelineMax({ paused: true }),
toggleDur = 0.4,
staggerDur = toggleDur * 0.05,
startY = [-300, -250, -200, -150, -100, -50].reverse();
toggleCartTl.add(linesTl.play(), 0).add(boxTl.play(), 0).add(numTl.play(), 0).add(contentTl.play(), 0);
linesTl.fromTo(line1, toggleDur, { morphSVG: line1 }, { morphSVG: line1Open, ease: Power3.easeInOut }, 0).fromTo(line2, toggleDur, { morphSVG: line2 }, { morphSVG: line2Open, ease: Power4.easeInOut }, 0);
boxTl.fromTo(box, toggleDur, { morphSVG: box }, { morphSVG: boxOpen, ease: Power3.easeInOut }, 0).fromTo(boxStroke, toggleDur, { strokeWidth: 3, autoAlpha: 1, morphSVG: box }, { strokeWidth: 2, autoAlpha: 0.5, morphSVG: boxOpen, ease: Power3.easeInOut }, 0).fromTo(boxMask, toggleDur, { morphSVG: box }, { morphSVG: boxOpen, ease: Power3.easeInOut }, 0);
numTl.fromTo(numGroup, toggleDur * 0.75, { x: 0 }, { x: -8, ease: Power3.easeInOut }, toggleDur * 0.25).fromTo(numGroup, toggleDur, { y: 0 }, { y: 40, ease: Power3.easeInOut }, 0);
contentTl.fromTo(cartContent, toggleDur * 0.6, { autoAlpha: 0 }, { autoAlpha: 1, ease: Power3.easeInOut }, toggleDur * 0.4).staggerFromTo(cartItems, toggleDur, { cycle: { y: startY } }, { y: 0, ease: Power3.easeInOut }, -staggerDur, 0).staggerFromTo(cartItems, toggleDur, { x: 120 }, { x: 0, ease: Power3.easeInOut }, -staggerDur, toggleDur * 0.15);
// Functions
function getClickCoords(e) {
var svgRect = document.querySelector('#add-to-cart').getBoundingClientRect(),
btnRect = document.querySelector('[data-anim=btn-bg]').getBoundingClientRect(),
pixelCoordSample = btnRect.left - svgRect.left,
svgCoordSample = 225.5,
normFactor = pixelCoordSample / svgCoordSample,
src = {
x: e.clientX,
y: e.clientY,
xMin: btnRect.left,
xMax: btnRect.left + btnRect.width,
yMin: btnRect.top,
yMax: btnRect.top + btnRect.height
},
rpl = {
xMin: -btnRect.width / 2 / normFactor,
xMax: btnRect.width / 2 / normFactor,
yMin: -btnRect.height / 2 / normFactor,
yMax: btnRect.height / 2 / normFactor,
offset: parseInt(ripple.getAttribute('r'))
};
var coords = {
x: map(src.x, src.xMin, src.xMax, rpl.xMin, rpl.xMax) + rpl.offset,
y: map(src.y, src.yMin, src.yMax, rpl.yMin, rpl.yMax) + rpl.offset
};
return coords;
}
// Returns a value on destination range based on the input value on source range
function map(value, sourceMin, sourceMax, destinationMin, destinationMax) {
return destinationMin + (destinationMax - destinationMin) * ((value - sourceMin) / (sourceMax - sourceMin)) || 0;
}
//# sourceURL=pen.js
</script>
</body></html>
