cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!--

THIS IS ONE PART OF THREE

Check out the others here:
https://codepen.io/collection/DgggNa/

-->


<svg id='ship-it' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<mask id='btn-mask'>
			<use fill="#FFFFFF" xlink:href="#path-1"/>
		</mask>
		<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>
	</defs>
	<g id="Page-1" fill="none" fill-rule="evenodd">
		<g id="truck">
			<g id="truck-shipping">
				<g data-anim="list">
					<path data-anim="list-bg" fill="#FFFFFF" d="M96.16 46.1h202.86v202.85H96.16z"/>
					<path id="list-label" fill="#52C1BC" d="M113.8 66.17c0-.38-.13-.67-.4-.88-.26-.22-.73-.44-1.4-.67-.66-.22-1.2-.44-1.64-.65-1.38-.68-2.07-1.6-2.07-2.8 0-.6.16-1.1.5-1.56.35-.45.84-.8 1.47-1.05s1.34-.38 2.12-.38c.76 0 1.45.13 2.05.4.6.27 1.08.66 1.42 1.17.34.5.5 1.08.5 1.73h-2.56c0-.43-.12-.77-.4-1-.25-.25-.6-.37-1.07-.37-.46 0-.82.1-1.08.3-.27.2-.4.46-.4.78 0 .28.14.53.44.75.28.22.8.45 1.53.7.74.23 1.34.48 1.82.75 1.15.67 1.73 1.58 1.73 2.75 0 .93-.35 1.67-1.06 2.2-.7.53-1.67.8-2.9.8-.86 0-1.64-.16-2.34-.47-.7-.3-1.23-.73-1.58-1.27-.35-.53-.53-1.15-.53-1.86h2.58c0 .57.14 1 .44 1.27.3.28.77.4 1.43.4.42 0 .76-.08 1-.26.25-.18.38-.44.38-.77zM128 69h-2.57v-4.45h-3.78V69h-2.57V58.34h2.57v4.23h3.78v-4.23H128V69zm12.03-5.1c0 1.03-.2 1.95-.58 2.75-.4.8-.94 1.42-1.65 1.85-.7.43-1.52.65-2.43.65-.9 0-1.7-.2-2.4-.63-.72-.42-1.26-1-1.66-1.8-.38-.77-.6-1.66-.6-2.66v-.6c0-1.05.2-1.97.57-2.77.38-.8.93-1.42 1.65-1.86.7-.43 1.53-.65 2.44-.65.9 0 1.7.2 2.42.63.7.43 1.26 1.05 1.65 1.84.4.8.6 1.7.6 2.73v.5zm-2.62-.46c0-1.06-.17-1.86-.52-2.4-.35-.56-.86-.84-1.52-.84-1.3 0-1.97.97-2.04 2.9v.8c0 1.03.16 1.84.5 2.4.36.56.87.84 1.55.84.65 0 1.15-.28 1.5-.83.36-.54.54-1.33.54-2.37v-.5zm7.9 1.94V69h-2.57V58.34H147c.8 0 1.52.15 2.15.45.63.3 1.1.7 1.46 1.27.35.55.52 1.18.52 1.88 0 1.04-.37 1.88-1.1 2.5-.76.62-1.78.93-3.08.93h-1.64zm0-1.98h1.7c.48 0 .86-.13 1.13-.38.26-.25.4-.6.4-1.05 0-.5-.15-.9-.42-1.2-.25-.3-.62-.44-1.08-.45h-1.72v3.08zm11.15 1.98V69h-2.58V58.34h4.26c.82 0 1.54.15 2.16.45.62.3 1.1.7 1.45 1.27.35.55.52 1.18.52 1.88 0 1.04-.37 1.88-1.12 2.5-.74.62-1.77.93-3.06.93h-1.65zm0-1.98h1.68c.5 0 .88-.13 1.14-.38.26-.25.4-.6.4-1.05 0-.5-.14-.9-.4-1.2-.28-.3-.65-.44-1.1-.45h-1.72v3.08zm11.3 5.6h-2.56V58.34h2.56V69zm12.08 0h-2.56l-3.78-6.64V69h-2.58V58.34h2.57l3.77 6.63v-6.63h2.56V69zm11.74-1.32c-.4.44-.98.8-1.74 1.06-.76.27-1.6.4-2.5.4-1.4 0-2.52-.42-3.35-1.28-.84-.85-1.28-2.04-1.34-3.56v-.92c0-1.05.18-1.97.55-2.76.36-.78.9-1.38 1.58-1.8.7-.43 1.5-.64 2.4-.64 1.33 0 2.36.3 3.1.9.73.62 1.16 1.53 1.28 2.73h-2.48c-.08-.58-.27-1-.57-1.26-.28-.25-.7-.38-1.23-.38-.65 0-1.15.27-1.5.82-.35.55-.53 1.33-.53 2.34v.65c0 1.06.18 1.86.54 2.4.37.53.94.8 1.72.8.67 0 1.17-.15 1.5-.45v-1.65h-1.8V63.3h4.37v4.38zm10.56-.66h4.47V69h-7.04V58.34h2.57v8.68zM211.8 69h-2.56V58.34h2.57V69zm8.67-2.83c0-.38-.13-.67-.4-.88-.26-.22-.73-.44-1.4-.67-.67-.22-1.2-.44-1.64-.65-1.38-.68-2.07-1.6-2.07-2.8 0-.6.17-1.1.5-1.56.36-.45.85-.8 1.48-1.05s1.33-.38 2.12-.38c.77 0 1.45.13 2.06.4.6.27 1.08.66 1.42 1.17.34.5.5 1.08.5 1.73h-2.56c0-.43-.13-.77-.4-1-.26-.25-.63-.37-1.08-.37-.46 0-.82.1-1.1.3-.25.2-.4.46-.4.78 0 .28.16.53.45.75.3.22.8.45 1.55.7.74.23 1.34.48 1.82.75 1.15.67 1.72 1.58 1.72 2.75 0 .93-.35 1.67-1.05 2.2-.7.53-1.68.8-2.9.8-.87 0-1.65-.16-2.35-.47-.7-.3-1.23-.73-1.58-1.27-.36-.53-.53-1.15-.53-1.86h2.57c0 .57.16 1 .46 1.27.3.28.77.4 1.44.4.42 0 .76-.08 1-.26.25-.18.37-.44.37-.77zm13.64-5.85h-3.2V69h-2.56v-8.68h-3.14v-1.98h8.9v1.98z"/>
					<g data-anim="list-item">
						<g transform="translate(104.59 193.5)">
							<rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
							<g id="carrot">
								<path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-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.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
								<path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
							</g>
							<g id="item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
								<path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
								<path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
							</g>
						</g>
					</g>
					<g data-anim="list-item">
						<g transform="translate(104.59 143.5)">
							<rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
							<g id="carrot">
								<path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-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.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
								<path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
							</g>
							<g id="item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
								<path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
								<path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
							</g>
						</g>
					</g>
					<g data-anim="list-item">
						<g transform="translate(104.59 93.5)">
							<rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
							<g id="carrot">
								<path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-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.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
								<path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
							</g>
							<g id="item-info" stroke="#989BAF" stroke-linecap="round" stroke-linejoin="round">
								<path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
								<path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
							</g>
						</g>
					</g>
				</g>
				<g data-anim="btn-shipped" transform="translate(93.09 271.165)" class='hidden'>
					<rect id="btn-fill" width="205.88" height="56.4" x="1.56" y="1.8" fill="#4EB7B2" rx="8"/>
					<path id="btn-dash" fill="#44A29E" fill-rule="nonzero" d="M3.06 9.8c0 .82-.67 1.5-1.5 1.5S.06 10.6.06 9.8c0-2.9 1.3-5.55 3.47-7.34.64-.53 1.58-.44 2.1.2.54.64.44 1.6-.2 2.1C3.93 6 3.06 7.83 3.06 9.8zm8.02-6.5h7c.83 0 1.5-.67 1.5-1.5S18.9.3 18.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S32.9.3 32.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S46.9.3 46.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S60.9.3 60.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S74.9.3 74.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S88.9.3 88.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h6.35c.18 0 .35 0 .53.02.83.07 1.55-.55 1.6-1.38.08-.82-.53-1.55-1.36-1.6-.26-.03-.5-.04-.77-.04h-6.35c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm11.7 2.8c.75 1.07 1.16 2.35 1.16 3.7v2.15c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V9.8c0-1.97-.6-3.84-1.7-5.42-.47-.68-1.4-.84-2.08-.37-.68.48-.85 1.42-.38 2.1zm1.16 12.85v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.82-.67-1.5-1.5-1.5s-1.5.68-1.5 1.5zm0 14v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.82-.67-1.5-1.5-1.5s-1.5.68-1.5 1.5zm0 14v3.26c0 1.05-.25 2.06-.7 2.97-.4.73-.1 1.64.64 2 .74.4 1.64.1 2.02-.64.68-1.32 1.04-2.8 1.04-4.32v-3.25c0-.82-.67-1.5-1.5-1.5s-1.5.68-1.5 1.5zm-5.14 9.6c-.44.1-.9.15-1.37.15h-5.25c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h5.25c.68 0 1.35-.07 2-.2.8-.18 1.33-.98 1.15-1.8-.17-.8-.97-1.3-1.78-1.14zm-13.62.15h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-13.04-.97C4.5 54.7 3.37 53 3.12 51.07c-.1-.82-.86-1.4-1.7-1.3-.8.12-1.38.87-1.28 1.7.38 2.82 2 5.3 4.4 6.8.72.44 1.64.22 2.08-.48.44-.7.22-1.64-.48-2.07zM3.06 44.3v-7c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5zm0-14v-7c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5zm0-14c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V9.8c0-.84.67-1.5 1.5-1.5s1.5.66 1.5 1.5v6.5z"/>
					<path id="label" fill="#309490" d="M51.47 32.62c0-.42-.15-.76-.45-1-.3-.23-.83-.48-1.6-.73-.75-.27-1.37-.5-1.85-.75-1.57-.77-2.35-1.83-2.35-3.17 0-.67.2-1.26.6-1.77.38-.5.93-.9 1.64-1.2.72-.27 1.52-.42 2.4-.42.88 0 1.66.16 2.35.47.7.3 1.23.75 1.6 1.32.4.57.6 1.23.6 1.97h-2.92c0-.5-.15-.88-.45-1.15-.3-.28-.7-.42-1.23-.42-.52 0-.93.12-1.23.35-.3.23-.45.52-.45.87 0 .3.16.6.5.85.33.25.9.5 1.75.78.83.26 1.52.55 2.06.86 1.3.75 1.96 1.78 1.96 3.1 0 1.06-.4 1.9-1.2 2.5-.8.6-1.9.9-3.3.9-.97 0-1.85-.17-2.65-.53-.8-.35-1.4-.83-1.8-1.44-.4-.6-.6-1.32-.6-2.1h2.93c0 .63.17 1.1.5 1.42.34.3.88.46 1.63.46.5 0 .87-.1 1.15-.3.28-.2.42-.5.42-.88zm18.5 3.22H67.1V30.8h-4.3v5.04h-2.92v-12.1h2.9v4.8h4.3v-4.8H70v12.1zm8.96 0h-2.9v-12.1h2.9v12.1zm8.94-4.1v4.1h-2.92v-12.1h4.83c.92 0 1.74.18 2.45.52.7.34 1.26.82 1.65 1.45.4.64.6 1.35.6 2.15 0 1.18-.43 2.12-1.28 2.83-.84.7-2 1.05-3.47 1.05h-1.86zm0-2.25h1.9c.57 0 1-.16 1.3-.44.3-.28.44-.68.44-1.2 0-.56-.14-1-.44-1.35-.3-.32-.72-.5-1.25-.5h-1.93v3.5zm15.06 2.23v4.1h-2.9V23.76h4.8c.94 0 1.75.17 2.47.5.7.35 1.26.83 1.65 1.46.4.64.58 1.35.58 2.15 0 1.18-.42 2.12-1.26 2.83-.85.7-2 1.05-3.48 1.05h-1.87zm0-2.24h1.9c.58 0 1-.16 1.3-.44.3-.28.45-.68.45-1.2 0-.56-.15-1-.46-1.35-.3-.32-.72-.5-1.24-.5h-1.95v3.5zm19.65 1.2H118v2.9h5.4v2.24h-8.32v-12.1h8.35V26H118v2.55h4.58v2.16zm6.02 5.14v-12.1h3.9c1.06 0 2.02.25 2.87.74.85.48 1.52 1.16 2 2.05.48.88.72 1.87.72 2.96v.55c0 1.1-.24 2.1-.7 2.98-.48.87-1.13 1.56-1.98 2.05-.85.5-1.8.75-2.85.76h-3.97zm2.9-9.84v7.6h1.02c.84 0 1.48-.3 1.93-.9.45-.6.67-1.48.67-2.65v-.52c0-1.17-.22-2.05-.67-2.64-.45-.6-1.1-.9-1.96-.9h-1z"/>
					<path id="check" stroke="#319490" stroke-width="3" d="M153.47 28.46L157.8 35l8.56-13.13" opacity=".7" stroke-linecap="round" stroke-linejoin="round"/>
				</g>
				<g data-anim="truck-btn">
					<g id="truck">
						<g id="wheels">
							<g data-anim="back-wheel-back" class='hidden'>
								<g fill="#3B454F" transform="translate(135 326)">
									<circle id="wheel-part-12" cx="16.91" cy="17.31" r="16.43"/>
								</g>
							</g>
							<g data-anim="back-wheel-back" class='hidden'>
								<g fill="#3B454F" transform="translate(96 326)">
									<circle id="wheel-part-11" cx="16.91" cy="17.31" r="16.43"/>
								</g>
							</g>
							<g data-anim="back-wheel" class='hidden'>
								<g transform="translate(115.982 328.368)">
									<circle id="wheel-part-5" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
									<circle id="wheel-part-4" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
									<circle id="wheel-part-3" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
									<path id="wheel-part-2" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
									<path id="wheel-part-1" fill="#3B454F" d="M2.5 16.93c0-3.45 1.07-6.65 2.9-9.3h27.06c1.82 2.65 2.9 5.85 2.9 9.3H2.5z" opacity=".3"/>
								</g>
							</g>
							<g data-anim="back-wheel" class='hidden'>
								<g transform="translate(154.982 328.368)">
									<circle id="wheel-part-10" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
									<circle id="wheel-part-9" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
									<circle id="wheel-part-8" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
									<path id="wheel-part-7" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
									<path id="wheel-part-6" fill="#3B454F" d="M2.5 16.93c0-3.45 1.07-6.65 2.9-9.3h27.06c1.82 2.65 2.9 5.85 2.9 9.3H2.5z" opacity=".3"/>
								</g>
							</g>
						</g>
						<g data-anim="front-group" class='hidden'>
							<g transform="translate(293 281)">
								<g data-anim="front-wheel-back" class='hidden'>
									<circle cx="16.91" cy="62.31" r="16.43" fill="#3B454F"/>
								</g>
								<g data-anim="front-wheel" class='hidden'>
									<g transform="translate(19.982 47.368)">
										<circle id="front-wheel-part-5" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
										<circle id="front-wheel-part-4" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
										<circle id="front-wheel-part-3" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
										<path id="front-wheel-part-2" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
										<path id="front-wheel-part-1" fill="#485E69" d="M18.93.5c6.42 0 12 3.7 14.7 9.08.66 1.35-1.42-4-14.7-4-13.3 0-15.46 5.6-14.87 4.36C6.7 4.37 12.36.5 18.93.5z"/>
									</g>
								</g>
								<g id="front-base">
									<path id="base-back" fill="#36474F" d="M10 2c0-1.1.9-2 2-2h23.5C49.58 0 61 11.4 61 25.5V52c0 4.42-3.6 8-8 8H12c-1.1 0-2-.9-2-2V2z"/>
									<path id="base-front" fill="#FFC14C" d="M17 2c0-1.1.9-2 2-2h23.56C56.6 0 68 11.4 68 25.45V42.9c0 4.42-3.6 8-8 8H19c-1.1 0-2-.9-2-2V2z"/>
									<g id="window">
										<path id="window-piece-4" fill="#A2DCED" d="M23 5.95h22.12c5.13 0 9.92 2.33 11.97 4.76C62.87 17.57 62 27 62 27H23V5.95z"/>
										<path id="window-piece-3" fill="#7ED0ED" d="M52.48 7.5c2 .9 3.62 2.04 4.6 3.2C62.9 17.57 62 27 62 27H23S50.34 6.57 52.48 7.5z"/>
										<path id="window-piece-2" fill="#468698" d="M61.72 21.45L62 27H23v-5.55z" opacity=".42"/>
										<path id="window-piece-1" stroke="#FFC14C" d="M19.26 3.3h16.86c4.6 0 9.4 2.52 11.56 5.7 1.16 1.7 2.1 3.62 2.83 5.7 1.7 4.77 2.2 9.74 2.03 13.8H19.5V3.3h-.24z" opacity=".5"/>
									</g>
									<path id="patch" fill="#FFC14C" d="M20 4h11.34v26H20z"/>
									<path id="detail" stroke="#FBB638" d="M28.7.3v47.37h3.9v-18.1h28.8V46.3"/>
									<g id="bumber">
										<path id="bumper-detail-3" fill="#8DA3AE" d="M64.68 47c0-1.1-.9-2-2-2H19c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h39.67c3.32 0 6-2.7 6-6v-4z"/>
										<path id="bumper-detail-2" fill="#36474F" d="M17 45h47.68v6.3c0 1.66-1.35 3-3 3H17V45z" opacity=".3"/>
										<path id="bumper-detail-1" fill="#CFD7DC" d="M69.68 47c0-1.1-.9-2-2-2h-20.3s-4.86-2.18-9.52-2.18C33.2 42.82 28.9 45 28.9 45H18c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h47.1c2.52 0 4.58-2.06 4.58-4.6V47z"/>
									</g>
									<path id="front-wheel-shadow" fill="#728691" d="M55.02 57H20.8c2.6-6.9 9.28-11.83 17.1-11.83 7.83 0 14.5 4.92 17.12 11.83z"/>
								</g>
								<g data-anim="front-wheel" class='hidden'>
									<g transform="translate(19.982 47.368)">
										<circle id="front-wheel-part-5" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
										<circle id="front-wheel-part-4" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
										<circle id="front-wheel-part-3" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
										<path id="front-wheel-part-2" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
										<path id="front-wheel-part-1" fill="#485E69" d="M18.93.5c6.42 0 12 3.7 14.7 9.08.66 1.35-1.42-4-14.7-4-13.3 0-15.46 5.6-14.87 4.36C6.7 4.37 12.36.5 18.93.5z"/>
									</g>
								</g>
							</g>
						</g>
						<g data-anim="container" class='hidden'>
							<path data-anim="container-part" class='hidden' fill="#36474F" d="M91 329h216v12H91z"/>
							<path data-anim="container-part" class='hidden' fill="#8DA3AE" d="M89 326h218v7c0 2.76-2.23 5-5 5H94c-2.76 0-5-2.23-5-5v-7z"/>
							<path data-anim="container-lip" class='hidden' fill="#CFD7DC" d="M89 329h11.16v11c0 1.66-1.35 3-3 3H92c-1.66 0-3-1.34-3-3v-11z"/>
							<path data-anim="container-part" class='hidden' fill="#36474F" d="M89 326h217.96l.07 9.3H89z" opacity=".3"/>
							<path fill="#ECAC34" d="M83.9 281c0-4.42 3.57-8.02 8-8.04l207.1-.92c4.42-.02 8 3.55 8 7.97v45c0 4.42-3.57 8-8 8H91.9c-4.42 0-8-3.57-8-8v-44z"/>
						</g>
					</g>
					<g id="btn" transform="translate(88.09 271.165)">
						<g id="btn-fill">
							<use data-anim='btn-shadow' filter="url(#filter-2)" xlink:href="#path-1"/>
							<use data-anim='btn-bg' fill="#FFC14C" xlink:href="#path-1"/>
						</g>
						<g mask='url(#btn-mask)'>
							<circle data-anim="ripple" class='hidden' cx="109.5" cy="30" r="10" fill="#E8A933" transform="matrix(1 0 0 1 219 0)"/>
						</g>
						<path data-anim="btn-label" fill="#FFFFFF" d="M73.34 32.62c0-.42-.15-.76-.46-1-.3-.23-.83-.48-1.6-.73-.74-.27-1.36-.5-1.84-.75-1.57-.77-2.35-1.83-2.35-3.17 0-.67.18-1.26.57-1.77.4-.5.94-.9 1.66-1.2.7-.27 1.5-.42 2.4-.42.87 0 1.65.16 2.34.47.7.3 1.23.75 1.6 1.32.4.57.58 1.23.58 1.97h-2.9c0-.5-.16-.88-.46-1.15-.3-.28-.72-.42-1.23-.42-.52 0-.93.12-1.23.35-.3.23-.46.52-.46.87 0 .3.17.6.5.85.33.25.92.5 1.75.78.84.26 1.52.55 2.06.86 1.3.75 1.95 1.78 1.95 3.1 0 1.06-.4 1.9-1.2 2.5-.8.6-1.88.9-3.27.9-.98 0-1.87-.17-2.66-.53-.8-.35-1.4-.83-1.8-1.44-.4-.6-.6-1.32-.6-2.1h2.92c0 .63.17 1.1.5 1.42.34.3.88.46 1.64.46.48 0 .86-.1 1.14-.3.28-.2.42-.5.42-.88zm18.5 3.22h-2.9V30.8h-4.28v5.04h-2.92v-12.1h2.92v4.8h4.3v-4.8h2.9v12.1zm8.95 0h-2.9v-12.1h2.9v12.1zm8.93-4.1v4.1h-2.9v-12.1h4.8c.94 0 1.75.18 2.46.52.7.34 1.26.82 1.65 1.45.4.64.58 1.35.58 2.15 0 1.18-.42 2.12-1.26 2.83-.85.7-2 1.05-3.48 1.05h-1.87zm0-2.25h1.9c.58 0 1-.16 1.3-.44.3-.28.45-.68.45-1.2 0-.56-.16-1-.46-1.35-.3-.32-.72-.5-1.24-.5h-1.95v3.5zm23.5 6.34h-2.9v-12.1h2.9v12.1zM148.48 26h-3.63v9.84h-2.92V26h-3.56v-2.25h10.1V26z"/>
					</g>
				</g>

			</g>
			<g transform="translate(88.09 271.165)">
				<use data-click='btn' fill="#FFF" xlink:href="#path-1" class='clickable'/>
			</g>
		</g>
	</g>
</svg>
            
          
!
            
              body {
	background:#52C1BC;
}

#ship-it {
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 600px;
	overflow: visible;
}

.hidden {
	visibility: hidden;
}

.wip {
	opacity:0.5;
}

.clickable {
	cursor: pointer;
	opacity: 0.01;
}
            
          
!
            
              // Animatables
var list = document.querySelector('[data-anim=list]'),
	listBg = document.querySelector('[data-anim=list-bg]'),
	items = document.querySelectorAll('[data-anim=list-item]'),
	ripple = document.querySelector('[data-anim=ripple]'),
	ripple = document.querySelector('[data-anim=ripple]'),
	btnBg = document.querySelector('[data-anim=btn-bg]'),
	btnLabel = document.querySelector('[data-anim=btn-label]'),
	btnShadow = document.querySelector('[data-anim=btn-shadow]'),
	frontGroup = document.querySelector('[data-anim=front-group]'),
	frontWheels = document.querySelectorAll('[data-anim=front-wheel]'),
	frontWheelBack = document.querySelector('[data-anim=front-wheel-back]'),
	backWheels = document.querySelectorAll('[data-anim=back-wheel]'),
	backWheelsBack = document.querySelectorAll('[data-anim=back-wheel-back]'),
	containerParts = document.querySelectorAll('[data-anim=container-part]'),
	containerLip = document.querySelector('[data-anim=container-lip]'),
	container = document.querySelector('[data-anim=container]'),
	truckBtn = document.querySelector('[data-anim=truck-btn]'),
	shippedBtn = document.querySelector('[data-anim=btn-shipped]');

// Interactive
var btnArea = document.querySelector('[data-click=btn]');

// Listeners
btnArea.addEventListener('click', btnHandler);

// Handlers
function btnHandler(e) {
	getBtnTl( getClickCoords(e) ).play();
	shipItTl.restart();
}

// Animations
TweenLite.defaultEase = Back.easeOut.config(1);

function getBtnTl(coords) {
	var btnTl = new TimelineMax({ paused:true });

	btnTl
		.fromTo(btnShadow, 0, { autoAlpha:1 }, { autoAlpha:0 }, 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', ease: Power1.easeOut }, 0);

	return btnTl;
}

var shipItTl = new TimelineMax({ paused:true, onComplete:reset }),
	listTl = new TimelineMax({ paused:true }),
	truckTl = new TimelineMax({ paused:true });

shipItTl
	.add( listTl.play(), 0 )
	.add( truckTl.play(), 0.2 );

listTl
	.to(list, 0.3, { y:-10, ease: Power1.easeInOut}, 0)
	.to(list, 0.05, { y:0, ease: Power1.easeIn}, 0.3)
	.fromTo(items[0], 0.15, { y:0 }, { y:85, ease: Linear.easeNone }, 0.35)
	.fromTo(items[1], 0.15, { y:0 }, { y:138, ease: Linear.easeNone }, 0.35)
	.fromTo(items[2], 0.15, { y:0 }, { y:178, ease: Linear.easeNone }, 0.35)
	.fromTo(items, 0, { autoAlpha:1 }, { autoAlpha:0 }, 0.5)
	.to([btnBg, btnLabel], 0.15, { scaleX: 1.05, transformOrigin: 'center', ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5)
	.to([btnBg, btnLabel], 0.15, { scaleY: 0.95, ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5);


truckTl
	.set(frontGroup, { x:-50, scale:0.84, transformOrigin: 'left top', autoAlpha:1 })
	.set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
	.set(frontWheels[1], { autoAlpha:0 })
	.set(container, { scale:0.98, transformOrigin: 'right top', autoAlpha:1 })
	.set([containerParts,containerLip], { y:-15, autoAlpha:1 })
	.set(containerParts[2], { autoAlpha:0.5 })
	.set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
	.to(container, 0.5, { scale:1 }, 0)
	.staggerTo(containerParts, 0.5, { y:0 }, -0.1, 0.2)
	.to(containerLip, 0.5, { y:0 }, 0.6)
	.staggerTo(backWheelsBack, 0.5, { y:0 }, -0.1, 0.55)
	.staggerTo(backWheels, 0.5, { y:0 }, 0.1, 0.6)
	.to(frontGroup, 0.6, { scale:1, x:0, ease: Back.easeOut.config(1.4) }, 0.7)
	.to(frontWheelBack, 0.5, { y:0 }, 0.8)
	.to(frontWheels, 0.5, { y:0, ease:Back.easeOut.config(5.4) }, 0.9)
	.to(frontWheels[1], 0, { autoAlpha:1 }, 1.05)
	.to(shippedBtn, 0, { autoAlpha:1 }, 1.05)
	.fromTo(truckBtn, 1.2, { x:0 }, { x:'+=1000', ease: Back.easeIn.config(0.5) }, 1.4)
	.fromTo(truckBtn, 0.5, { autoAlpha:1 }, { autoAlpha:0, ease: Power1.easeIn }, 2);

function reset() {
	
	var	resetTl = new TimelineMax({ paused:true });
	
	resetTl
		.set(items, { y:0 })
		.set(truckBtn, { x:0 })
		.set(frontGroup, { x:-50, scale:0.84, transformOrigin: 'left top', autoAlpha:1 })
		.set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
		.set(frontWheels[1], { autoAlpha:0 })
		.set(container, { scale:0.98, transformOrigin: 'right top', autoAlpha:1 })
		.set([containerParts,containerLip], { y:-15, autoAlpha:1 })
		.set(containerParts[2], { autoAlpha:0.5 })
		.set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
		.to(items, 0.5, { autoAlpha:1, y:0, ease: Power1.easeInOut }, 0.01)
		.to(truckBtn, 0.5, { autoAlpha:1, ease: Power1.easeInOut }, 0.01);

	resetTl.restart();
};

// Functions
function getClickCoords(e) {

	var svgRect = document.querySelector('#ship-it').getBoundingClientRect(),
		btnRect = document.querySelector('[data-anim=btn-bg]').getBoundingClientRect(),
		pixelCoordSample = btnRect.left-svgRect.left,
		svgCoordSample = 88,
		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;
}
            
          
!
999px
Loading ..................

Console