<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="819.999px" height="356px" viewBox="170.473 138.068 819.999 356">
<defs>
<mask id="mask">
<rect fill="#FFFFFF" x="401.6" y="183.5" width="225" height="265"/>
</mask>
</defs>
<rect id="bg" x="170.473" y="138.068" fill="#BCE2E8" width="819.999" height="356"/>
<g id="sock-wrapper">
<path id="sock-shadow" fill="#ABCCD2" d="M783.5,452.5h-66.158c-1.994,0-3.625-1.631-3.625-3.625l0,0
c0-1.994,1.631-3.625,3.625-3.625H783.5c1.994,0,3.625,1.631,3.625,3.625l0,0C787.125,450.869,785.494,452.5,783.5,452.5z"/>
<g id="sock">
<g id="sock-bottom">
<path id="sock-bottom-main" class="sock-body" fill="#393839" d="M768.946,447.464h-38.854c-9.834,0-17.879-8.087-17.879-17.973l0,0
c0-9.886,8.045-17.971,17.879-17.971h38.854c9.832,0,17.879,8.087,17.879,17.971l0,0
C786.823,439.377,778.778,447.464,768.946,447.464z"/>
<path id="sock-bottom-end" class="sock-patch" fill="#A3A3A3" d="M768.946,411.519h-3.5v35.945h3.5c9.832,0,17.879-8.089,17.879-17.973l0,0
C786.823,419.607,778.778,411.519,768.946,411.519z"/>
<path id="sock-bottom-corner" class="sock-patch" fill="#A3A3A3" d="M730.09,447.464h0.178v-17.973h-18.057l0,0
C712.211,439.377,720.258,447.464,730.09,447.464z"/>
</g>
<g id="sock-top">
<rect id="sock-top-main" class="sock-body" x="712.447" y="357.399" fill="#393839" width="35.791" height="71.99"/>
<rect id="sock-top-stripe-top" class="sock-stripe" x="713.447" y="363" fill="#636363" width="35.723" height="3"/>
<rect id="sock-top-stripe-bottom" class="sock-stripe" x="712.447" y="371.001" fill="#636363" width="35.723" height="3"/>
<circle id="sock-top-eye-right" class="sock-eye" fill="#A3A3A3" cx="739.017" cy="383.971" r="1.708"/>
<circle id="sock-top-eye-left" class="sock-eye" fill="#A3A3A3" cx="721.531" cy="383.971" r="1.708"/>
<g id="sock-symbol">
<polygon fill="#5B9200" points="747.123,404.072 730.275,420.979 713.425,404.072 720.888,397.776 739.66,397.776 "/>
<polygon fill="#BDF255" points="717.554,404.25 721.912,400.575 738.638,400.575 742.994,404.25 730.275,417.015 "/>
<polygon fill="#5B9200" points="732.625,406.978 732.625,409.891 728.312,409.891 728.312,404.24 732.625,404.24 732.625,405.221
734.955,405.221 734.955,403.367 733.498,401.911 727.441,401.911 725.984,403.367 725.984,410.764 727.441,412.22
733.498,412.22 734.955,410.764 734.955,406.978 "/>
<rect x="730.468" y="406.432" fill="#5B9200" width="4.486" height="2.119"/>
</g>
<g id="sock-glasses">
<g id="frames">
<path fill="#221F1F" d="M754.851,379.438c-0.773-1.913-7.928-2.384-10.791-2.384
c-3.424,0-9.641,0.734-11.211,3.484c-1.242,2.171-0.604,5.086-0.111,6.629c0.639,2.008,1.961,4.62,3.584,5.376
c1.281,0.597,3.23,0.899,5.793,0.899c2.617,0,5.318-0.319,6.836-0.639c1.809-0.378,3.467-2.007,4.551-4.468
C754.468,386.143,755.343,380.611,754.851,379.438z M752.027,387.688c-0.859,1.95-2.133,3.273-3.406,3.54
c-1.436,0.303-4.004,0.604-6.506,0.604c-2.896,0-4.379-0.407-5.113-0.749c-0.889-0.414-2.061-2.307-2.729-4.402
c-0.33-1.041-0.994-3.645-0.023-5.342c0.953-1.673,5.738-2.672,9.811-2.672c4.02,0,7.805-0.136,8.773,1.677
C753.707,382.424,752.875,385.762,752.027,387.688z"/>
<polygon id="edge-right" fill="#221F1F" points="752.021,377.885 757.792,379.537 757.792,382.76 754.144,382.424"/>
<path id="detail-right" fill="#D7D7D6" d="M755.65,380.631c0,0-0.332,0.445-0.742,0.445s-0.742-0.445-0.742-0.445
s0.332-0.446,0.742-0.446C755.318,380.186,755.65,380.631,755.65,380.631z"/>
<path fill="#221F1F" d="M707.41,388.338c1.084,2.461,2.744,4.09,4.553,4.468
c1.516,0.317,4.219,0.639,6.836,0.639c2.562,0,4.51-0.305,5.793-0.899c1.623-0.756,2.945-3.368,3.584-5.376
c0.49-1.543,1.129-4.458-0.111-6.629c-1.566-2.75-7.783-3.484-11.213-3.484c-2.857,0-10.016,0.47-10.791,2.386
C705.568,380.611,706.445,386.143,707.41,388.338z M708.078,380.342c0.975-1.812,4.758-1.677,8.773-1.677
c4.072,0,8.857,1,9.812,2.672c0.971,1.697,0.307,4.301-0.025,5.342c-0.666,2.099-1.84,3.989-2.729,4.402
c-0.734,0.342-2.217,0.749-5.111,0.749c-2.504,0-5.072-0.303-6.508-0.604c-1.273-0.267-2.547-1.59-3.406-3.537
C708.039,385.762,707.205,382.424,708.078,380.342z"/>
<polygon id="edge-left" fill="#221F1F" points="706.767,382.424 703.119,382.76 703.119,379.537 708.89,377.885"/>
<path id="detail-left" fill="#D7D7D6" d="M705.261,380.631c0,0,0.334,0.445,0.742,0.445c0.41,0,0.744-0.445,0.744-0.445
s-0.334-0.446-0.744-0.446C705.595,380.186,705.261,380.631,705.261,380.631z"/>
<path id="middle" fill="#221F1F" d="M730.457,379.669c-2.354-0.008-4.252-0.734-4.252-0.734s2.186,7.484,2.561,5.216
c0.162-0.983,0.873-2.062,1.691-2.062s1.529,1.076,1.691,2.062c0.373,2.271,2.559-5.216,2.559-5.216
S732.808,379.662,730.457,379.669z"/>
</g>
<path id="lens-right" opacity="0.5" fill="#BCE2E8" d="M752.027,387.688
c-0.859,1.95-2.133,3.273-3.406,3.54c-1.436,0.303-4.004,0.604-6.506,0.604c-2.896,0-4.379-0.407-5.113-0.749
c-0.889-0.414-2.061-2.307-2.729-4.402c-0.33-1.041-0.994-3.645-0.023-5.342c0.953-1.673,5.738-2.672,9.811-2.672
c4.02,0,7.805-0.136,8.773,1.677C753.707,382.424,752.875,385.762,752.027,387.688z"/>
<path id="lens-left" opacity="0.5" fill="#BCE2E8" d="M708.078,380.342
c0.975-1.812,4.758-1.677,8.773-1.677c4.072,0,8.857,1,9.812,2.672c0.971,1.697,0.307,4.301-0.025,5.342
c-0.666,2.099-1.84,3.989-2.729,4.402c-0.734,0.342-2.217,0.749-5.111,0.749c-2.504,0-5.072-0.303-6.508-0.604
c-1.273-0.267-2.547-1.59-3.406-3.537C708.039,385.762,707.205,382.424,708.078,380.342z"/>
</g>
<g id="sock-hair">
<path id="sock-hair-main" fill="#393839" d="M738,343.833c-15.5,0-16.809,6.816-17.701,7.299c-0.66-0.472-8.395,0.562-8.395,5.312
v4.013c0,0.038,0.01,0.073,0.012,0.11c-0.004,0.068-0.012,0.146-0.012,0.222v8.969c0,0.904,0.184,1.771,0.516,2.554l2-11.187
c0-2.049,1.676-3.726,3.725-3.726h24.346c2.049,0,3.725,1.676,3.725,3.726l2,11.187c0.332-0.781,0.516-1.646,0.516-2.554v-2.095
v-6.874v-7.075C748.718,350.228,746.167,343.833,738,343.833z"/>
<path id="sock-hair-fringe" fill="#393839" d="M726.492,355.374c0,0-1.789,1.988,0.291,3.7c2.078,1.712,6.223,0.307,4.77,4.281
c-0.828,2.266,3.334-2.479,1.689-5.917C731.421,353.638,727.837,353.951,726.492,355.374z"/>
</g>
</g>
</g>
</g>
<g id="phone-booth-door-back" class="phone-booth-door phone-booth-part">
<rect id="door" x="373.038" y="248.879" fill="#DD5858" width="103.157" height="198.39"/>
<rect x="381.855" y="256.805" fill="#D9D9D9" width="85.521" height="165.368"/>
</g>
<g id="phone-booth" class="phone-booth-part">
<path id="shadow" fill="#ABCCD2" d="M376.689,452.5h-128.25c-1.994,0-3.625-1.631-3.625-3.625l0,0
c0-1.994,1.631-3.625,3.625-3.625h128.25c1.994,0,3.625,1.631,3.625,3.625l0,0C380.314,450.869,378.683,452.5,376.689,452.5z"/>
<rect id="section" x="252.247" y="211.699" fill="#DD5858" width="120.791" height="29.255"/>
<rect id="label" x="266.076" y="217.846" fill="#EFEFEF" width="93.132" height="16.961"/>
<path id="top-outline" fill="#F26762" d="M252.246,211.699c0-15.077,27.041-27.299,60.396-27.299s60.396,12.222,60.396,27.299
H252.246z"/>
<path id="top" fill="#C94F4F" d="M261.063,212.018c0-11.9,23.093-21.547,51.579-21.547s51.579,9.646,51.579,21.547H261.063z"/>
<rect id="line" x="277.362" y="224.902" fill="#C94F4F" width="70.56" height="2.846"/>
<rect id="glass" x="269.881" y="256.805" fill="#D9D9D9" width="85.522" height="165.368"/>
</g>
<g id="silhouette-sock" mask="url(#mask)">
<g id="silhouette-inner">
<path id="silhouette-sock-bottom" fill="#777777" d="M768.97,445.935h-38.854c-9.834,0-17.895-8.045-17.895-17.879l0,0
c0-9.833,8.045-17.877,17.895-17.877h38.854c9.834,0,17.881,8.045,17.881,17.877l0,0
C786.851,437.89,778.804,445.935,768.97,445.935z"/>
<rect id="silhouette-sock-top" x="712.207" y="356.065" fill="#777777" width="35.791" height="71.985"/>
<path id="silhouette-sock-glasses" fill="#777777" d="M752.402,376.098c-0.199-0.062-0.416-0.125-0.639-0.183l-0.104-0.031v0.002
c-2.561-0.64-6.141-0.833-7.973-0.833c-2.676,0-7.049,0.453-9.586,1.961c-0.559,0.188-2.133,0.648-4.02,0.654
c-1.885-0.006-3.459-0.469-4.021-0.654c-2.523-1.508-6.896-1.961-9.586-1.961c-1.83,0-5.412,0.194-7.961,0.833v-0.002
l-0.104,0.031c-0.229,0.057-0.438,0.118-0.645,0.183l-5.021,1.438v3.223l2.932-0.27c0.242,2.049,0.783,4.539,1.359,5.848
c1.084,2.461,2.744,4.09,4.549,4.468c1.521,0.317,4.219,0.646,6.836,0.646c2.562,0,4.512-0.312,5.793-0.899
c1.623-0.756,2.945-3.368,3.584-5.376c0.24-0.755,0.521-1.839,0.586-3.002c0-0.006,0.002-0.01,0.006-0.016
c0.16-0.983,0.871-2.062,1.689-2.062c0.816,0,1.529,1.076,1.688,2.062c0,0.006,0.004,0.009,0.006,0.015
c0.068,1.164,0.348,2.249,0.588,3.003c0.639,2.008,1.961,4.62,3.584,5.376c1.275,0.599,3.229,0.899,5.793,0.899
c2.615,0,5.312-0.319,6.836-0.646c1.809-0.378,3.467-2.007,4.551-4.468c0.576-1.309,1.117-3.798,1.357-5.848l2.934,0.27v-3.223
L752.402,376.098z M707.716,383.265c-0.096-0.391-0.184-0.788-0.244-1.188C707.533,382.477,707.621,382.874,707.716,383.265z
M708.521,385.688c-0.043-0.101-0.084-0.215-0.127-0.312C708.437,385.477,708.478,385.591,708.521,385.688
c0.215,0.483,0.455,0.938,0.715,1.345C708.976,386.624,708.734,386.175,708.521,385.688z M722.843,389.343
c0.287-0.086,0.52-0.176,0.701-0.261C723.361,389.167,723.132,389.257,722.843,389.343z M746.625,376.672
c0.467,0.008,0.922,0.021,1.354,0.045C747.546,376.693,747.091,376.68,746.625,376.672c-0.473-0.008-0.947-0.01-1.439-0.01
C745.677,376.662,746.156,376.664,746.625,376.672z M733.5,382.979c0.074,0.474,0.178,0.896,0.271,1.238
C733.677,383.872,733.574,383.445,733.5,382.979z M736.636,389.082c0.186,0.085,0.414,0.175,0.701,0.261
C737.052,389.257,736.82,389.167,736.636,389.082z M741.75,389.831L741.75,389.831c0.311,0,0.627-0.005,0.938-0.014
C742.376,389.826,742.062,389.831,741.75,389.831z M743.621,389.778c0.611-0.033,1.217-0.08,1.779-0.146
C744.837,389.698,744.234,389.745,743.621,389.778z M751.662,385.688c-0.219,0.483-0.455,0.938-0.719,1.345
C751.207,386.624,751.445,386.175,751.662,385.688c0.424-0.967,0.846-2.272,1.051-3.608
C752.507,383.409,752.085,384.725,751.662,385.688z"/>
<path id="silhouette-sock-hair" fill="#777777" d="M737.794,343.499c-15.5,0-16.812,6.816-17.701,7.299
c-0.662-0.472-8.402,0.562-8.402,5.312v4.013c0,0.038,0.021,0.073,0.021,0.11c-0.004,0.062-0.021,0.146-0.021,0.222v8.969
c0,0.904,0.189,1.771,0.521,2.554l2-11.187c0-2.049,1.676-3.727,3.725-3.727h24.34c2.061,0,3.73,1.677,3.73,3.727l2,11.187
c0.332-0.775,0.516-1.646,0.516-2.554v-2.095v-6.874v-7.075C748.511,349.894,745.96,343.499,737.794,343.499z"/>
</g>
</g>
<g id="phone-bottom-door-front" class="phone-booth-door phone-booth-part">
<path fill="#ABCCD2" d="M480.253,452.666H365.394c-1.786,0-3.247-1.631-3.247-3.625l0,0c0-1.994,1.46-3.625,3.247-3.625
h114.859c1.786,0,3.246,1.631,3.246,3.625l0,0C483.5,451.035,482.04,452.666,480.253,452.666z"/>
<path fill="#DD5858" d="M467.381,283.717v-3.13h-18.551V256.82h-3.479v23.767h-41.813V256.82h-3.473v23.767h-18.161v3.13h18.161
v25.061h-18.161v3.129h18.161v25.06h-18.161v3.131h18.161v25.061h-18.161v3.129h18.161v25.061h-18.161v3.129h18.161v26.04h3.473
v-26.04h41.817v26.04h3.479v-26.04h18.551v-3.129h-18.551v-25.061h18.551v-3.129h-18.551v-25.061h18.551v-3.131h-18.551v-25.06
h18.551v-3.129h-18.551v-25.061H467.381z M445.356,393.346h-41.817v-25.062h41.817V393.346z M445.356,365.156h-41.817v-25.061
h41.817V365.156z M445.356,336.966h-41.817v-25.06h41.817V336.966z M445.356,308.777h-41.817v-25.061h41.817V308.777z"/>
<path fill="#DD5858" d="M373.75,248.918v198.416h102.527V248.918H373.75z M467.946,422.285h-85.288V256.293h85.288V422.285z"/>
<path id="handle" fill="#C6C6C6" d="M471.67,360.051L471.67,360.051c-0.734,0-1.334-0.601-1.334-1.336v-13.08
c0-0.735,0.6-1.335,1.334-1.335l0,0c0.731,0,1.331,0.6,1.331,1.335v13.08C473.001,359.45,472.402,360.051,471.67,360.051z"/>
</g>
<g id="phone-booth-front" class="phone-booth-part">
<path fill="#777777" d="M302.224,320.801c-1.721-12.786-8.935-12.643-10.652-12.412
c-0.062,0.014-0.115,0.021-0.174,0.027v-4.934H269.88v13.358v29.037h21.518h0.326c-0.076,28.105,1.201,34.271,3.281,35.048
c0.125,0.046,0.292,0.088,0.49,0.088c0.39,0,0.896-0.164,1.425-0.772c3.943-4.578,1.988-36.898,1.368-45.812
C300.716,332.857,303.356,329.214,302.224,320.801z M291.398,315.34c0.666-0.075,1.662-0.168,2.182-0.298
c0.615-0.154,0.137-1.343,1.187-1.484c1.05-0.142,2.226,7.948,2.226,7.948s1.004,8.112-0.045,8.254
c-1.05,0.146-0.903-1.132-1.538-1.118c-0.482,0.017-1.33,0.153-1.977,0.262l-2.035-12.062V315.34L291.398,315.34z M297.585,354.346
c0.46,19.146-0.995,23.771-1.904,24.826c-0.069,0.08-0.124,0.131-0.164,0.165c-0.354-0.39-1.402-2.476-1.888-13.571
c-0.303-6.904-0.289-14.85-0.272-19.885h2.943l-1.726-10.224c0.208-0.018,0.427-0.037,0.658-0.067
c0.329-0.044,0.85-0.146,1.466-0.369C296.95,339.02,297.398,346.566,297.585,354.346z"/>
<path id="grate" fill="#DD5858" d="M355.403,283.648v-3.123H336.84v-23.721h-3.475v23.721h-41.84v-23.721h-3.475v23.721h-18.17
v3.123h18.17v25.012h-18.17v3.123h18.17v25.011h-18.17v3.124h18.17v25.011h-18.17v3.124h18.17v25.011h-18.17v3.123h18.17v25.989
h3.475v-25.989h41.84v25.989h3.475v-25.989h18.563v-3.123H336.84v-25.011h18.563v-3.124H336.84v-25.011h18.563v-3.124H336.84
v-25.011h18.563v-3.123H336.84v-25.012H355.403z M333.366,393.062h-41.84V368.05h41.84V393.062z M333.366,364.928h-41.84v-25.011
h41.84V364.928z M333.366,336.794h-41.84v-25.011h41.84V336.794z M333.366,308.66h-41.84v-25.012h41.84V308.66z"/>
<path fill="#F26762" d="M252.247,240.954v206.314h120.791V240.954H252.247z M358.501,424.168h-92.333
V253.834h92.333V424.168z"/>
<path id="phone-booth-frame-inner" fill="#DD5858" d="M261.063,248.879v198.39H364.22v-198.39H261.063z M355.25,421.75h-85.5v-165
h85.5V421.75z"/>
</g>
<g id="dust">
<g id="dust-back">
<circle class="dust dust--back" fill="#D9ECED" cx="891.49" cy="424.588" r="10.246"/>
<circle class="dust dust--back" fill="#D9ECED" cx="886.435" cy="435.495" r="10.247"/>
<circle class="dust dust--back" fill="#D9ECED" cx="880.736" cy="416.764" r="12.151"/>
<circle class="dust dust--back" fill="#D9ECED" cx="874.218" cy="432.468" r="10.246"/>
<circle class="dust dust--back" fill="#D9ECED" cx="864.603" cy="418.849" r="10.246"/>
<circle class="dust dust--back" fill="#D9ECED" cx="851.589" cy="417.582" r="10.246"/>
<circle class="dust dust--back" fill="#D9ECED" cx="862.158" cy="430.314" r="10.246"/>
<circle class="dust dust--back" fill="#D9ECED" cx="848.914" cy="430.129" r="6.579"/>
<circle class="dust dust--back" fill="#D9ECED" cx="900.523" cy="431.354" r="6.579"/>
<circle class="dust dust--back" fill="#D9ECED" cx="841.994" cy="422.614" r="6.579"/>
</g>
<g id="dust-front">
<circle class="dust dust--front" fill="#E8F6F7" cx="849.994" cy="424.496" r="10.247"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="852.66" cy="436.219" r="10.247"/>
<circle class="dust dust--ront" fill="#E8F6F7" cx="862.144" cy="419.091" r="12.151"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="865.24" cy="435.808" r="10.246"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="877.486" cy="424.496" r="10.246"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="890.476" cy="425.972" r="10.246"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="877.486" cy="436.218" r="10.246"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="890.476" cy="438.801" r="6.579"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="839.748" cy="429.229" r="6.579"/>
<circle class="dust dust--front" fill="#E8F6F7" cx="898.812" cy="432.896" r="6.578"/>
</g>
</g>
</svg>@aqua: #BCE2E8;
body {
background-color: @aqua;
}
svg{
max-width: 100%;
margin: 0 auto;
display: block;
}// Create timeline instance
var tl = new TimelineMax({
repeat:-1
});
// Change default ease
TimelineMax.defaultEase = Expo.easeout;
// Socks superhero apperance colors
var superEyeColor = '#393839',
superStripeColor = '#5B9200',
superBodyColor = '#82D100',
superPatchColor = '#5B9200',
// Silhouette sock parts
silhouetteSock = document.getElementById("silhouette-inner"),
silhouetteHair = document.getElementById("silhouette-sock-hair"),
silhouetteGlasses = document.getElementById("silhouette-sock-glasses"),
silhouetterBottom = document.getElementById("silhouette-sock-bottom"),
// Sock parts
sockWrapper = document.getElementById("sock-wrapper"),
sock = document.getElementById("sock"),
sockHair = document.getElementById("sock-hair"),
sockFringe = document.getElementById("sock-hair-fringe"),
sockGlasses = document.getElementById("sock-glasses"),
sockSymbol = document.getElementById("sock-symbol"),
sockBody = document.getElementsByClassName("sock-body"),
sockBodyTop = document.getElementById("sock-top"),
sockBodyBottom = document.getElementById("sock-bottom"),
sockStripe = document.getElementsByClassName("sock-stripe"),
sockEyes = document.getElementsByClassName("sock-eye"),
sockPatches = document.getElementsByClassName("sock-patch"),
sockShadow = document.getElementById("sock-shadow"),
// Phone booth parts
phoneBooth = document.getElementsByClassName("phone-booth-part"),
phoneBoothDoor = document.getElementsByClassName("phone-booth-door"),
phoneBoothGlass = document.getElementById("glass"),
// Dust parts
dust = document.getElementsByClassName("dust"),
dustCloudsBack = document.getElementsByClassName("dust--back"),
dustCloudsFront = document.getElementsByClassName("dust--front");
// Start svg elements in certian states
// .set() is same as using .to() transition with a 0 second duration
// Silhouette hair hide
tl.set(silhouetteHair, {
transformOrigin: "50% 50%",
scale: 0
});
tl.set(sockFringe, {
transformOrigin: "50% 0"
});
// Remove superhero apperance
tl.set(sockHair, {
transformOrigin: "50% 50%",
scale: 0
});
tl.set(sockSymbol, {
transformOrigin: "50% 50%",
opacity: 0,
scale: 0
});
// Position sock offscreen
tl.set([sockWrapper, silhouetteSock], {
x: 300
});
// Hide dust
tl.set(dust, {
opacity: 0,
x: -200,
y: 15,
transformOrigin: "50% 50%"
});
// Move phone booth in
for (var i = 0; i < phoneBooth.length; i++) {
tl.set(phoneBooth[i], {
x: 150
});
}
// Close phone booth door by default
for (var i = 0; i < phoneBoothDoor.length; i++) {
tl.set(phoneBoothDoor[i], {
transformOrigin: "left 50%",
rotationY: 90
});
}
// Move sock into view
tl.to([sockWrapper, silhouetteSock], 0.65, {
x: 0
});
// Move eyes left and right
tl.to(sockEyes, 0.35, {
x: -2
}, "+=0.75");
tl.to(sockEyes, 0.35, {
x: 2
}, "+=0.3");
tl.to(sockEyes, 0.35, {
x: 0
}, "+=0.3");
tl.to(sockEyes, 0.35, {
x: -2
}, "+=0.3");
// Open phone booth door
// Use label so they animate at same time
for (var i = 0; i < phoneBoothDoor.length; i++) {
tl.to(phoneBoothDoor[i], 0.5, {
rotationY: -10,
}, "open-door+=0.25");
}
for (var i = 0; i < phoneBoothDoor.length; i++) {
tl.to(phoneBoothDoor[i], 0.3, {
rotationY: 0,
ease: Bounce.easeInOut
}, "open-door-swing-slightly");
}
// Move sock into phone booth
tl.to([sockWrapper, silhouetteSock], 1.5, {
x: -275
}, "open-door+=0.25");
// Close phone booth door
for (var i = 0; i < phoneBoothDoor.length; i++) {
tl.to(phoneBoothDoor[i], 0.3, {
rotationY: 90
}, "shut-door");
}
// Shrink glasses
tl.to(silhouetteGlasses, 0.5, {
transformOrigin: "50% 50%",
scale: 0
}, "transformation");
// Grow hair
tl.to(silhouetteHair, 0.5, {
scale: 1
}, "transformation+=0.35");
// Move eyes to right
tl.to(sockEyes, 0.35, {
x: 2
});
// Flash yellow
tl.to(phoneBoothGlass, 0.1, {
fill: "#98ed0c",
yoyo: true,
repeat: 2,
ease: RoughEase.ease.config({
template: Power0.easeNone,
strength: 1,
points: 20,
taper: "none",
randomize: true,
clamp: false
})
}, "transformation+=0.35");
tl.to(phoneBoothGlass, 0.35, {
fill: "#D9D9D9"
});
for (var i = 0; i < phoneBoothDoor.length; i++) {
tl.to(phoneBoothDoor[i], 0.5, {
rotationY: -10,
}, "re-open-door+=0.25");
}
for (var i = 0; i < phoneBoothDoor.length; i++) {
tl.to(phoneBoothDoor[i], 0.3, {
rotationY: 0,
ease: Bounce.easeInOut
}, "re-open-door-swing-slightly");
}
// Transform into super hero
for (var i = 0; i < sockBody.length; i++) {
tl.set(sockBody[i], {
fill: superBodyColor
});
}
for (var i = 0; i < sockStripe.length; i++) {
tl.set(sockStripe[i], {
fill: superStripeColor
});
}
for (var i = 0; i < sockEyes.length; i++) {
tl.set(sockEyes[i], {
fill: superEyeColor
});
}
for (var i = 0; i < sockPatches.length; i++) {
tl.set(sockPatches[i], {
fill: superPatchColor
});
}
tl.set(sockHair, {
scale: 1
});
tl.set(sockSymbol, {
opacity: 1,
scale: 1
});
tl.set(sockGlasses,{
transformOrigin: "50% 50%",
scale: 0,
opacity: 0
}, "change-to-superhero");
// Move socks out booth
tl.to([sockWrapper, silhouetteSock], 1, {
x: 0
}, "move-out");
// Move fringe
tl.to(sockFringe, 1.15, {
rotation: 65,
ease: Bounce.easeOut
}, "move-out+=0.25");
// Close phone booth door
for (var i = 0; i < phoneBoothDoor.length; i++) {
tl.to(phoneBoothDoor[i], 0.3, {
rotationY: 90
}, "re-shut-door");
}
// Stand sock up
tl.to(sock, 0.2, {
rotation: 35
}, "stand-up+=0.15");
tl.to(sockBodyBottom, 0.2, {
transformOrigin: "50% 0",
rotation: 90,
x: -1
}, "stand-up+=0.15");
tl.to(sockFringe, 1, {
rotation: 0,
ease: Bounce.easeOut
}, "stand-up-=0.35");
tl.to(sockShadow, 0.5, {
transformOrigin: "50% 50%",
scaleX: 0.5,
ease: RoughEase.ease.config({
template: Power0.easeNone,
strength: 1,
points: 20,
taper: "none",
randomize: true,
clamp: false
})
}, "stand-up+=0.25");
tl.to(sockShadow, 0.3, {
x: -77
}, "stand-up+=0.25");
tl.to(sockBodyTop, 0.2, {
y: -20
}, "stand-up+=0.35");
// Move top down for bounce effect
tl.to(sockBodyTop, 0.2, {
y: 5
}, "fly-away+=-0.6");
tl.staggerFromTo(dustCloudsFront, 0.25, {
opacity: 1,
immediateRender: false
},{
opacity: 0,
y: 20,
repeat: 2,
ease: SlowMo.ease.config(0.7, 0.7, false)
}, 0.15, "fly-away+=0.9");
// Take off Dust
tl.staggerFromTo(dustCloudsBack, 0.35, {
opacity: 1,
immediateRender: false
},{
opacity: 0,
scale: 1.5,
y: 10,
repeat: 2,
ease: SlowMo.ease.config(0.5, 0.7, false)
}, 0.2, "fly-away+=1");
tl.to(sockBodyTop, 0.2, {
y: 0
}, "fly-away+=1.2");
// Fly away
tl.to(sock, 2, {
y: -400,
x: 400
}, "fly-away+=1.5");
tl.to(sockShadow, 0.5, {
opacity: 0
}, "fly-away+=1.5");
// Uncomment to start the animation from the stand-up label
// tl.seek("stand-up");
// Uncomment to slow down the animation
// tl.timeScale(0.2);
External CSS
This Pen doesn't use any external CSS resources.