<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/Noilhetas_Ava/pen/ObmwPe" />
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">body {
background-color: #222222;
}
#eye-close, #eye-right, #eye-left, #lips, #truck, #good, #big-apple,
#clock1, #clock2, #clock3, #clock4, #clock5, #clock6, #clock7, #clock8, #clock9, #clock10, #clock11, #clock12, .send {
opacity:0;
}
#right-leaf, #ribbon, #label, #box {
visibility:hidden;
}
#account, #paiement, #delivery, #confirmation{
display:none;
}
.svg_content {
width:500px;
margin:auto;
}
.form {
width: 500px;
height: 300px;
margin: auto;
text-align: center;
}
button, .send {
border: none;
background: #1abc9c;
border-radius: 3px;
padding: 10px;
width: 200px;
color: white;
margin: auto;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
font-size: 16px;
font-family:arial;
}</style></head><body>
<div class="svg_content">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="200px" viewBox="-279.386 -82.555 1158.587 924.445"
enable-background="new -279.386 -82.555 1158.587 924.445" xml:space="preserve">
<polygon id="ribbon" fill="#847D61" points="321.655,538.778 315.838,535.945 309.838,538.778 304.005,535.945 297.864,538.778
291.499,536.112 286.499,538.612 280.832,535.945 276.14,538.778 276.332,314.445 321.848,314.445 "/>
<rect id="box" x="116.14" y="314.445" fill="#B89869" width="365.9" height="314"/>
<rect id="label" x="133.14" y="333.445" fill="#FFFFFF" width="115" height="78.667"/>
<g id="big-apple">
<path id="apple" fill="#F2484B" d="M390.938,314.255c-14.999-0.937-29.998,2.344-44.529,8.906
c-29.53,14.062-65.153,14.062-94.682,0c-14.062-7.031-29.061-9.843-44.529-8.906c-61.403,4.219-101.244,77.808-89.058,164.054
s71.715,152.804,133.118,148.585c6.093-0.469,11.718-1.406,17.343-3.281c19.686-6.093,41.248-6.093,60.934,0
c5.625,1.875,11.249,2.812,17.343,3.281c61.403,4.219,120.931-62.34,133.118-148.586
C491.714,392.063,451.872,318.942,390.938,314.255z"/>
<path id="leaf" fill="#3C9990" d="M416.718,213.479L416.718,213.479c-59.528-9.374-100.776,31.405-90.933,90.933l0,0l0,0
C385.313,314.255,426.092,273.476,416.718,213.479z"/>
<path id="light" fill="#FFFFFF" d="M182.486,336.403c0,0-27.652,10.246-40.436,44.597s7.205,5.62,7.205,5.62L182.486,336.403z"/>
<path id="stem" fill="#274B6D" d="M269.538,274.882c20.624,27.655,29.53,66.09,19.218,105.463
c23.436-33.279,32.342-78.277,19.218-123.743C294.849,262.695,282.194,268.789,269.538,274.882z"/>
</g>
<g id="smiley">
<path id="lips" fill="#274B6D" d="M383.363,518.522c-14.387,33.269-48.079,54.765-85.829,54.765
c-38.562,0-72.453-21.604-86.341-55.042c-2.381-5.724,0.333-12.298,6.065-14.682c1.408-0.584,2.868-0.861,4.301-0.861
c4.402,0.004,8.58,2.609,10.373,6.933c10.392,25.026,36.144,41.198,65.598,41.198c28.788,0,54.386-16.18,65.213-41.224
c2.463-5.694,9.074-8.322,14.765-5.851C383.205,506.217,385.826,512.824,383.363,518.522z"/>
<path id="eye-left" fill="#274B6D" d="M205.742,392.75c-0.767,0.217-1.524-0.236-1.726-0.981c-0.206-0.749,0.236-1.52,0.981-1.726
c8.625-2.37,19.878,8.015,26.658,15.506c3.133-2.594,6.971-4.357,11.167-5.016c-2.37-9.598-6.66-20.975-13.11-22.409
c-0.756-0.168-1.232-0.921-1.063-1.677c0.168-0.749,0.868-1.239,1.677-1.063c8.311,1.853,12.979,15.15,15.322,24.88
c0.266-0.008,0.528-0.041,0.794-0.041c2.355,0,4.62,0.359,6.765,1.011c-1.692-9.685-3.444-27.122,4.56-32.606
c0.636-0.431,1.509-0.277,1.95,0.367c0.438,0.64,0.273,1.512-0.367,1.95c-6.63,4.541-5.005,21.402-3.088,31.483
c7.903,3.702,13.391,11.71,13.391,21.009c0,12.825-10.396,23.221-23.21,23.221c-12.814,0-23.21-10.396-23.21-23.221
c0-6.184,2.437-11.796,6.387-15.959C222.727,399.907,212.544,390.897,205.742,392.75z"/>
<path id="eye-right" fill="#274B6D" d="M368.518,409.477c3.949,4.163,6.387,9.774,6.387,15.959
c0,12.825-10.396,23.221-23.21,23.221s-23.21-10.396-23.21-23.221c0-9.299,5.488-17.306,13.391-21.009
c1.917-10.081,3.541-26.942-3.088-31.483c-0.64-0.438-0.805-1.31-0.367-1.95c0.442-0.644,1.314-0.797,1.95-0.367
c8.004,5.484,6.252,22.922,4.56,32.606c2.145-0.651,4.41-1.011,6.765-1.011c0.266,0,0.528,0.034,0.794,0.041
c2.343-9.73,7.012-23.027,15.322-24.88c0.809-0.176,1.509,0.314,1.677,1.063c0.168,0.756-0.307,1.509-1.063,1.677
c-6.45,1.434-10.74,12.81-13.11,22.409c4.197,0.659,8.034,2.422,11.167,5.016c6.78-7.491,18.033-17.875,26.658-15.506
c0.745,0.206,1.187,0.977,0.981,1.726c-0.202,0.745-0.958,1.198-1.726,0.981C385.592,392.897,375.409,401.907,368.518,409.477z"/>
<path id="eye-close" fill="#274B6D" d="M332.867,433.694c2.539-3.008,5.406-5.771,9.006-7.458
c1.92-10.081,3.538-26.942-3.085-31.483c-0.64-0.438-0.805-1.314-0.371-1.95c0.442-0.644,1.321-0.797,1.95-0.367
c8.004,5.484,6.252,22.922,4.56,32.606c2.141-0.651,4.41-1.011,6.765-1.011c0.266,0,0.535,0.034,0.797,0.041
c2.343-9.733,7.008-23.027,15.322-24.88c0.809-0.176,1.505,0.314,1.673,1.063c0.172,0.756-0.303,1.509-1.059,1.677
c-6.458,1.438-10.74,12.81-13.114,22.409c4.204,0.659,8.034,2.418,11.167,5.016c6.783-7.491,18.033-17.872,26.658-15.506
c0.752,0.202,1.19,0.977,0.981,1.722c-0.202,0.741-0.958,1.194-1.726,0.981c-6.798-1.857-16.985,7.158-23.876,14.731
c3.953,4.159,6.387,9.771,6.387,15.959c0,0-1.334,2.693-3.751,0s-6-30.61-34.667-13.693
C336.485,433.551,330.65,436.32,332.867,433.694z"/>
</g>
<path id="basket" fill="#BD946B" d="M558.134,160.933h-21.847V45.309c0-72.407-58.907-131.314-131.312-131.314H191.249
c-72.405,0-131.314,58.907-131.314,131.314v115.624H36.486c-25.726,0-46.657,20.931-46.657,46.657v53.712
c0,6.159,4.993,11.152,11.152,11.152c8.776,0,15.428-2.661,20.719-6.28v228.281c0,73.132,59.49,132.63,132.614,132.63H440.3
c73.132,0,132.63-59.498,132.63-132.63V266.178c5.287,3.618,11.937,6.275,20.708,6.275c6.159,0,11.152-4.993,11.152-11.152V207.59
C604.789,181.864,583.861,160.933,558.134,160.933z M82.24,45.309c0-60.108,48.901-109.01,109.01-109.01h213.726
c60.108,0,109.01,48.901,109.01,109.01v115.624h-31.863V45.309c-0.001-42.538-34.608-77.147-77.147-77.147H191.249
c-42.538,0-77.147,34.608-77.147,77.147v115.624H82.24V45.309L82.24,45.309z M459.816,160.933H136.407V45.309
c0-30.239,24.601-54.843,54.843-54.843h213.726c30.239,0,54.843,24.601,54.843,54.843v115.624H459.816z M550.625,289.978H44.004
V245.14c1.849-0.903,3.866-1.363,6.373-1.363c6.929,0,10.161,3.397,16.249,10.464c6.622,7.686,15.688,18.213,33.148,18.213
s26.526-10.526,33.145-18.213c6.086-7.067,9.319-10.464,16.243-10.464c6.926,0,10.16,3.397,16.245,10.464
c6.619,7.686,15.685,18.213,33.145,18.213s26.526-10.526,33.145-18.213c6.086-7.067,9.319-10.464,16.243-10.464
c6.926,0,10.158,3.397,16.243,10.463c6.618,7.686,15.685,18.214,33.145,18.214c17.459,0,26.522-10.528,33.142-18.214
c6.083-7.067,9.316-10.463,16.239-10.463c6.923,0,10.156,3.397,16.239,10.463c6.618,7.686,15.683,18.214,33.142,18.214
c17.461,0,26.524-10.526,33.145-18.213c6.084-7.067,9.316-10.464,16.242-10.464s10.158,3.397,16.242,10.464
c6.619,7.686,15.685,18.213,33.145,18.213c17.46,0,26.524-10.528,33.144-18.214c6.084-7.067,9.316-10.463,16.241-10.463
c2.506,0,4.521,0.461,6.371,1.363L550.625,289.978L550.625,289.978z M440.3,604.78H154.313
c-60.825,0-110.309-49.491-110.309-110.326V312.283h506.622v182.173C550.625,555.288,501.134,604.78,440.3,604.78z M582.485,245.264
c-1.551-1.503-3.178-3.359-5.087-5.576c-6.618-7.686-15.683-18.214-33.144-18.214s-26.524,10.528-33.144,18.214
c-6.084,7.067-9.316,10.463-16.241,10.463c-6.927,0-10.158-3.397-16.242-10.464c-6.619-7.686-15.685-18.213-33.145-18.213
s-26.524,10.526-33.145,18.213c-6.084,7.067-9.316,10.464-16.242,10.464c-6.924,0-10.156-3.397-16.239-10.463
c-6.618-7.686-15.683-18.214-33.143-18.214c-17.459,0-26.522,10.528-33.142,18.214c-6.083,7.067-9.316,10.463-16.239,10.463
c-6.927,0-10.158-3.397-16.243-10.464c-6.618-7.686-15.683-18.213-33.144-18.213s-26.526,10.526-33.145,18.213
c-6.086,7.067-9.319,10.464-16.243,10.464s-10.16-3.397-16.245-10.464c-6.619-7.686-15.685-18.213-33.145-18.213
s-26.526,10.526-33.145,18.213c-6.086,7.067-9.318,10.464-16.245,10.464c-6.929,0-10.161-3.397-16.247-10.464
C76.91,232,67.843,221.473,50.381,221.473c-17.461,0-26.528,10.526-33.148,18.213c-1.911,2.221-3.543,4.08-5.096,5.584v-37.679
c0-13.429,10.924-24.352,24.352-24.352h521.648c13.429,0,24.351,10.924,24.351,24.352v37.673H582.485z"/>
<path id="good" fill="#010002" d="M463.648,428.073c17.778-13.979,36.219-58.536-18.262-71.404c-39.171-9.172-65.446,18.731-84.079-22.282
c-17.069-37.591,35.585-105.782-21.758-137.959c-21.11-11.869-40.529-4.331-38.488,28.096
c3.842,64.991-35.44,74.287-64.618,135.063c-27.875,16.289-50.563,25.234-78.54,41.895l-40.129,0.421v188.985h37.282l28.778,8.407
c44.122,23.123,98.554,27.957,136.443,27.957c22.813,0,68.817-2.152,83.796-14.137c16.985-13.591,21.896-35.391,23.399-44.529
c29.606-11.875,37.502-36.64,26.655-63.438c12.799-7.048,20.75-16.467,23.641-27.992
C483.695,453.692,468.061,435.719,463.648,428.073z"/>
<g id="clock" transform="matrix(0.9692696,0.2460007,-0.2460007,0.9692696,44.51611,-26.922978)">
<path id="clock1" fill="#b48a58" d="M7.135,287.291l-2.416,8.859l98.37,26.692l2.416-8.859L7.135,287.291z"/>
<path id="clock2" fill="#b48a58" d="M103.319,125.642l-6.443,6.558l72.944,71.333l6.443-6.558L103.319,125.642z"/>
<path id="clock3" fill="#b48a58" d="M268.65,32.564l-8.859,2.301l26.347,98.945l8.974-2.416L268.65,32.564z"/>
<path id="clock4" fill="#b48a58" d="M449.167,32.449l-26.002,98.715l8.859,2.416l26.117-98.715L449.167,32.449z"/>
<path id="clock5" fill="#b48a58" d="M614.383,125.527l-72.368,71.678l6.558,6.558l72.368-71.678L614.383,125.527z"/>
<path id="clock6" fill="#b48a58" d="M710.798,287.866l-98.37,26.117l2.416,8.859l98.255-26.002L710.798,287.866z"/>
<path id="clock7" fill="#b48a58" d="M614.844,450.551l-2.416,8.974l98.255,26.462l2.416-8.859L614.844,450.551z"/>
<path id="clock8" fill="#b48a58" d="M548.343,569.976l-6.558,6.443l72.138,72.023l6.558-6.558L548.343,569.976z"/>
<path id="clock9" fill="#b48a58" d="M431.334,640.273l-8.859,2.301l26.002,98.37l8.859-2.416L431.334,640.273z"/>
<path id="clock10" fill="#b48a58" d="M286.023,640.158l-25.312,98.37l8.859,2.301l25.312-98.37L286.023,640.158z"/>
<path id="clock11" fill="#b48a58" d="M169.014,569.631l-71.793,71.908l6.443,6.443l71.908-71.793L169.014,569.631z"/>
<path id="clock12" fill="#b48a58" d="M103.319,451.241L4.833,476.668l2.301,8.859L105.62,460.1L103.319,451.241z"/>
</g>
<path id="truck" d="M345.024,715.777c0,37.451-30.319,67.81-67.716,67.81s-67.716-30.36-67.716-67.81
c0-37.452,30.319-67.81,67.716-67.81S345.024,678.325,345.024,715.777z M311.164,715.777c0-18.725-15.159-33.905-33.858-33.905
s-33.859,15.18-33.859,33.905c0,18.725,15.16,33.906,33.859,33.906C296.006,749.683,311.164,734.502,311.164,715.777z
M218.984,647.965h-110.33c-4.37,0-7.913,4.879-7.913,10.898v33.064c0,6.019,3.543,10.898,7.913,10.898h88.435
C199.397,681.007,207.394,661.734,218.984,647.965z M699.326,715.777c0,37.451-30.319,67.81-67.716,67.81
c-37.399,0-67.716-30.36-67.716-67.81c0-37.452,30.318-67.81,67.716-67.81C669.007,647.965,699.326,678.325,699.326,715.777z
M665.469,715.777c0-18.725-15.16-33.905-33.859-33.905c-18.701,0-33.858,15.18-33.858,33.905c0,18.725,15.159,33.906,33.858,33.906
S665.469,734.502,665.469,715.777z M819.039,658.863v33.064c0,6.019-4.873,10.898-10.883,10.898h-88.112
c-6.302-43.282-43.5-76.657-88.432-76.657c-44.941,0-82.14,33.376-88.442,76.657H365.745c-3.177-21.818-14.173-41.092-30.113-54.861
h168.231V336.241c0-12.038,9.745-21.796,21.766-21.796h102.744c28.929,0,55.968,14.39,72.155,38.399l66.236,98.239
c9.715,14.41,14.907,31.399,14.907,48.787v148.095h26.486C814.166,647.965,819.039,652.844,819.039,658.863z M703.642,453.599
l-52.965-75.367c-2.039-2.9-5.359-4.626-8.9-4.626H559.16c-6.009,0-10.883,4.879-10.883,10.898v75.367
c0,6.02,4.873,10.898,10.883,10.898h135.585C703.56,470.769,708.716,460.819,703.642,453.599z"/>
</svg>
</div>
<div class="form">
<button type="submit" name="anim" id="anim">
<i class="fa fa-arrow-right"></i> Mon panier
<button type="submit" name="account" id="account">
<i class="fa fa-arrow-right"></i> Mon compte
</button>
<button type="submit" name="delivery" id="delivery">
<i class="fa fa-arrow-right"></i> Livraison
</button>
<button type="submit" name="paiement" id="paiement">
<i class="fa fa-arrow-right"></i> Paiement
</button>
<button type="submit" name="confirmation" id="confirmation">
Let's go !!! <i class="fa fa-smile-o" aria-hidden="true"></i>
</button>
<div class="send">
Colis expédié !
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182'></script>
<script >$( document ).ready(function() {
var tl = new TimelineLite({});
$( "#anim" ).click(function() {
tl.to("#big-apple", 0, {opacity:1, y:-1000,transformOrigin:"50% 50%"})
tl.to("#big-apple", 1, {ease: Bounce.easeOut, y: 0})
$("#anim").hide();
$("#account").show();
});
// my account
$( "#account" ).click(function() {
tl.to("#basket", 0.4, {opacity:0,fill:'#BD946B'})
tl.addLabel("time1", "+=1")
tl.to("#eye-left", 0.4, {opacity:1,fill:'#274B6D'}, "time1")
tl.to("#eye-right", 0.4, {opacity:1,fill:'#274B6D'}, "time1")
tl.to("#lips", 0.4, {opacity:1,fill:'#274B6D'}, "time1")
tl.to("#eye-right", 0.6, {morphSVG:{shape:"#eye-close",fill:'#274B6D'}})
tl.to("#eye-right", 1, {morphSVG:{shape:"#eye-right",fill:'#274B6D'}})
$("#account").hide();
$("#delivery").show();
});
// delivery
$( "#delivery" ).click(function() {
tl.addLabel("time2", "+=1")
tl.to("#eye-left", 0.4, {opacity:0,fill:'#274B6D'}, "time2")
tl.to("#eye-right", 0.4, {opacity:0,fill:'#274B6D'}, "time2")
tl.to("#lips", 0.4, {opacity:0,fill:'#274B6D'}, "time2")
tl.to("#apple", 0.6, {morphSVG:"#box",fill:'#cfb28a'})
tl.to("#stem", 0.6, {morphSVG:"#ribbon",fill:'#b48a58'})
tl.to("#light", 0.6, {morphSVG:"#label",fill:'#FFF'})
tl.to("#leaf", 1, {y:-350, x:-500, rotation:300, fill:'#e58a28'})
$("#delivery").hide();
$("#paiement").show();
});
// paiement
$( "#paiement" ).click(function() {
tl.to("#truck", 0, {x:-2000, opacity:1, fill:'#39619E'})
tl.to("#truck", 2, {x:0, fill:'#39619E'})
$("#paiement").hide();
$("#confirmation").show();
});
// confimation
$( "#confirmation" ).click(function() {
tl.addLabel("time3", "+=1")
tl.to("#truck", 1, {x:1500}, "time3")
tl.to("#apple", 1, {x:1500}, "time3")
tl.to("#stem", 1, {x:1500}, "time3")
tl.to("#light", 1, {x:1500}, "time3")
tl.to("#good", 0, {x:-1000, opacity:1, fill:"#b48a58"})
tl.to("#good", 1, {x:0, fill:"#b48a58"})
tl.to("#clock9", 0.1, {opacity:1})
tl.to("#clock10", 0.1, {opacity:1})
tl.to("#clock11", 0.1, {opacity:1})
tl.to("#clock12", 0.1, {opacity:1})
tl.to("#clock1", 0.1, {opacity:1})
tl.to("#clock2", 0.1, {opacity:1})
tl.to("#clock3", 0.1, {opacity:1})
tl.to("#clock4", 0.1, {opacity:1})
tl.to("#clock5", 0.1, {opacity:1})
tl.to("#clock6", 0.1, {opacity:1})
tl.to("#clock7", 0.1, {opacity:1})
tl.to("#clock8", 0.1, {opacity:1})
tl.to(".send", 0.1, {opacity:1})
$("#confirmation").hide();
});
});
//# sourceURL=pen.js
</script>
</body></html>
