Skip to content

Instantly share code, notes, and snippets.

@haiueom

haiueom/dismantling-text-w-greensock.markdown

Created January 8, 2021 04:06
Show Gist options
  • Save haiueom/692abff7abf74bed7d05e69201b2abab to your computer and use it in GitHub Desktop.
Save haiueom/692abff7abf74bed7d05e69201b2abab to your computer and use it in GitHub Desktop.
Download ZIP
Dismantling Text w/ GreenSock 🍏
Raw
dismantling-text-w-greensock.markdown

Dismantling Text w/ GreenSock 🍏

Inspired by the recent adverts from a certain fruit named company 😅

Love these types of advert. Whenever I see them, I'm inspired by the challenge of trying to recreate them. This one's a little tricky and requires calculating the positions of various pieces that need to be duplicated etc.

That's because we can't animate part of the SVG outside of its view box. That means we have some options. Here we duplicate the SVG and remove the parts that won't be moving. That way we can layer all of the SVG on top of each other and move them separately. The crane strings are then positioned against the nested moving parts of those duplicate SVGs.

The trickiest part is keeping things responsive to viewport changes. To do this we invalidate and kill the current timeline on window resize. We then generate a new timeline resetting all of the DOM elements and calculating new positions.

Enjoy! 😎

A Pen by Jhey on CodePen.

License.

Raw
index.pug
//- include dismantle.pug
svg.dismantle(viewbox='0 0 162.80969 60.440757')
g.text.text--two(transform='translate(-5.2030773,-108.61135)' style='display:inline')
g.word
path#path996(d='m 32.347673,125.56949 h -3.150195 l -0.917773,5.9614 h -0.132292 l -1.265039,-5.9614 h -2.960026 l -1.256771,5.9614 h -0.124023 l -0.917774,-5.9614 h -3.191536 l 2.199349,8.88835 h 3.398242 l 1.30638,-5.65547 h 0.107487 l 1.30638,5.65547 h 3.365169 z')
path#path998(d='m 33.339861,134.45784 h 3.150195 v -8.88835 h -3.150195 z m -0.06615,-11.17038 c 0,0.90951 0.735872,1.46348 1.645378,1.46348 0.901237,0 1.637109,-0.55397 1.637109,-1.46348 0,-0.89297 -0.735872,-1.44694 -1.637109,-1.44694 -0.909506,0 -1.645378,0.55397 -1.645378,1.44694 z')
path#path1000(d='m 38.987061,125.56949 h -1.422136 v 2.34818 h 1.331185 v 3.99356 c 0,1.90169 1.116211,2.55488 3.464388,2.55488 0.628386,0 1.116211,-0.0496 1.347721,-0.0827 V 132.151 c -0.09095,0.008 -0.355533,0.0165 -0.587044,0.0165 -0.694531,0 -1.099674,-0.26458 -1.099674,-0.92604 v -3.32383 h 1.67845 v -2.34818 h -1.67845 v -2.00091 h -3.03444 z')
path#path1002(d='m 45.229574,134.45784 h 3.150195 v -4.9444 c 0,-1.00872 0.587044,-1.48001 1.223698,-1.48001 0.529167,0 1.182357,0.25631 1.182357,1.4552 v 4.96921 h 3.158463 v -5.75469 c 0,-2.17454 -1.16582,-3.25768 -2.918685,-3.25768 -1.513085,0 -2.273763,0.92604 -2.488736,1.57923 h -0.157097 v -4.4483 h -3.150195 z')
g.word
path#path1004(d='m 28.941163,148.1831 c -0.0083,-1.99264 -1.562695,-4.0349 -4.845182,-4.0349 -3.40651,0 -5.208984,2.16628 -5.208984,5.14284 v 1.28985 c 0,2.81119 1.471744,5.24205 5.184179,5.24205 3.480924,0 4.878255,-2.18281 4.878255,-4.39043 v -2.14147 h -4.62194 v 2.19108 h 1.554427 v 0.23151 c 0,0.73588 -0.570508,1.48002 -1.719791,1.48002 -1.570964,0 -1.967839,-1.24024 -1.967839,-2.6293 v -1.24023 c 0,-1.63711 0.644922,-2.54662 1.885156,-2.54662 1.050065,0 1.628841,0.66146 1.711524,1.4056 z')
path#path1006(d='m 30.30542,155.62451 h 3.265951 v -4.50619 c 0,-1.19062 0.51263,-1.90169 1.802474,-1.90169 0.438216,0 0.876432,0.0413 1.083138,0.13229 v -2.64583 c -0.173633,-0.0661 -0.446485,-0.0909 -0.901237,-0.0909 -1.149284,0 -1.810742,0.9095 -1.934766,1.51308 h -0.157096 v -1.38906 H 30.30542 Z')
path#path1008(d='m 41.467528,155.79814 c 2.902149,0 4.043164,-1.81901 4.092773,-3.19154 h -2.819465 c -0.03307,0.58705 -0.595313,0.92604 -1.289844,0.92604 -0.694531,0 -1.331185,-0.47955 -1.331185,-1.38079 v -0.35553 h 5.473567 v -0.92605 c 0,-2.68717 -1.703255,-4.30774 -4.249869,-4.30774 -2.339909,0 -4.291211,1.37252 -4.291211,4.29948 v 0.58704 c 0,2.96003 1.835547,4.34909 4.415234,4.34909 z m -1.347721,-5.68027 c 0,-0.81029 0.51263,-1.37253 1.256771,-1.37253 0.74414,0 1.215429,0.56224 1.215429,1.37253 z')
path#path1010(d='m 50.959456,155.79814 c 2.902149,0 4.043164,-1.81901 4.092774,-3.19154 h -2.819466 c -0.03307,0.58705 -0.595313,0.92604 -1.289844,0.92604 -0.694531,0 -1.331185,-0.47955 -1.331185,-1.38079 v -0.35553 h 5.473568 v -0.92605 c 0,-2.68717 -1.703256,-4.30774 -4.24987,-4.30774 -2.339909,0 -4.291211,1.37252 -4.291211,4.29948 v 0.58704 c 0,2.96003 1.835547,4.34909 4.415234,4.34909 z m -1.347721,-5.68027 c 0,-0.81029 0.51263,-1.37253 1.256771,-1.37253 0.74414,0 1.215429,0.56224 1.215429,1.37253 z')
path#path1012(d='m 56.399949,155.62451 h 3.150195 v -4.94441 c 0,-1.00872 0.562239,-1.48001 1.198893,-1.48001 0.504362,0 1.174088,0.25632 1.174088,1.45521 v 4.96921 h 3.158464 v -5.75469 c 0,-2.17455 -1.141016,-3.25768 -2.910417,-3.25768 -1.546159,0 -2.348177,0.91777 -2.571419,1.57923 h -0.148828 v -1.45521 h -3.050976 z')
path#path1014(d='m 66.321825,152.20973 c 0.01654,1.71152 1.132748,3.61321 4.7625,3.61321 3.208073,0 4.820377,-1.56269 4.820377,-3.76204 0,-2.28203 -1.579231,-3.08405 -3.158463,-3.34037 l -1.496549,-0.24804 c -0.93431,-0.1571 -1.488281,-0.43822 -1.488281,-0.95912 0,-0.55397 0.438216,-0.98392 1.372526,-0.98392 1.058333,0 1.554427,0.62012 1.579231,1.15756 h 2.968294 c -0.0083,-1.81075 -1.488281,-3.53881 -4.547525,-3.53881 -2.736784,0 -4.613672,1.31465 -4.613672,3.62976 0,2.05879 1.347721,2.98483 3.150195,3.31556 l 1.430404,0.26458 c 1.041796,0.19844 1.604036,0.42995 1.604036,1.05006 0,0.53744 -0.429948,0.99219 -1.537891,0.99219 -1.149283,0 -1.744596,-0.60358 -1.769401,-1.19062 z')
path#path1016(d='m 81.270782,146.56253 c -2.786393,0 -4.398698,1.80247 -4.398698,4.35735 v 0.47129 c 0,2.80293 1.612305,4.40697 4.398698,4.40697 2.769856,0 4.373893,-1.60404 4.373893,-4.4235 v -0.47956 c 0,-2.55488 -1.604037,-4.33255 -4.373893,-4.33255 z m -0.0083,2.29856 c 0.950847,0 1.174089,0.99219 1.174089,1.97611 v 0.66973 c 0,0.89297 -0.198438,1.99264 -1.174089,1.99264 -0.983919,0 -1.182356,-1.11621 -1.182356,-1.99264 v -0.66973 c 0,-0.96738 0.23151,-1.97611 1.182356,-1.97611 z')
path#path1018(d='m 86.595522,151.40771 c 0,2.86081 1.711524,4.39043 4.282943,4.39043 2.182812,0 3.993554,-1.03353 4.043164,-3.60495 h -2.811198 c -0.03307,0.64492 -0.272852,1.24023 -1.099675,1.24023 -0.768945,0 -1.231966,-0.7276 -1.231966,-2.06705 v -0.52917 c 0,-1.16582 0.487826,-1.90169 1.223698,-1.90169 0.636654,0 1.066602,0.57051 1.099675,1.27331 h 2.811197 c -0.0248,-2.14974 -1.53789,-3.64629 -4.018359,-3.64629 -2.687174,0 -4.299479,1.73632 -4.299479,4.28294 z')
path#path1020(d='m 99.353397,152.7885 0.388606,-0.53743 1.926497,3.37344 h 3.64629 l -3.11712,-5.08497 2.90215,-3.80338 h -3.514 l -2.083595,3.29902 h -0.148828 v -6.29212 h -3.166732 v 11.88145 h 3.166732 z')
g.text.text--one(transform='translate(-5.2030773,-108.61135)' style='display:inline')
g.word
path#path837(d='m 22.276971,123.18411 h -3.26595 v 7.40007 c 0,2.4722 1.868619,4.0845 4.919596,4.0845 3.050976,0 4.919596,-1.6123 4.919596,-4.0845 v -7.40007 h -3.265951 v 6.93705 c 0,1.28157 -0.694531,1.85208 -1.653645,1.85208 -0.959115,0 -1.653646,-0.5457 -1.653646,-1.85208 z')
path#path839(d='m 30.330226,128.34349 c 0,1.68672 1.223698,2.39778 2.736784,2.72025 1.000455,0.2067 2.166276,0.24804 2.166276,0.9095 0,0.3638 -0.322461,0.678 -0.942578,0.678 -0.644922,0 -1.066602,-0.34727 -1.107943,-0.81029 h -3.050976 c 0,1.57923 1.30638,2.80293 4.018359,2.80293 2.678906,0 4.125846,-1.19063 4.125846,-3.07578 0,-1.52963 -0.942578,-2.24069 -2.546615,-2.53008 -1.008724,-0.1819 -2.422591,-0.23151 -2.422591,-0.97565 0,-0.35554 0.297657,-0.678 0.901237,-0.678 0.677995,0 0.959115,0.38861 1.025261,0.80202 h 2.720247 c 0,-1.87689 -1.562695,-2.77812 -3.704167,-2.77812 -2.083593,0 -3.91914,0.84336 -3.91914,2.93522 z')
g.i
path#path908(d='m 39.64025,125.5819 v 8.88835 h 3.15019 v -8.88835 z')
g.i__dot
path#path910(d='m 41.219476,121.85293 c -0.909501,0 -1.645371,0.55397 -1.645371,1.44694 0,0.9095 0.73587,1.46348 1.645371,1.46348 0.90125,0 1.63711,-0.55398 1.63711,-1.46348 0,-0.89297 -0.73586,-1.44694 -1.63711,-1.44694 z')
path#path843(d='m 44.543311,134.47025 h 3.150195 v -4.94441 c 0,-1.00872 0.562239,-1.48001 1.198893,-1.48001 0.504362,0 1.174088,0.25632 1.174088,1.45521 v 4.96921 h 3.158464 v -5.75469 c 0,-2.17455 -1.141016,-3.25768 -2.910417,-3.25768 -1.546158,0 -2.348177,0.91777 -2.571419,1.57923 h -0.148828 v -1.45521 h -3.050976 z')
path#path845(d='m 58.97137,135.58646 c -0.644922,0 -1.182357,-0.19844 -1.30638,-0.69453 h -2.960026 c 0.03307,1.48828 1.265039,2.82773 4.191992,2.82773 2.025716,0 4.580599,-0.66973 4.580599,-3.29076 v -8.847 H 60.32736 v 1.38906 h -0.157097 c -0.305924,-0.8847 -1.215429,-1.47174 -2.4722,-1.47174 -1.943034,0 -3.175,1.43867 -3.175,4.24987 v 0.30592 c 0,2.8112 1.231966,4.24987 3.175,4.24987 1.289844,0 2.166276,-0.59531 2.4722,-1.39733 h 0.148828 v 1.20716 c 0,0.95085 -0.438216,1.47175 -1.347721,1.47175 z m 0.09095,-7.68946 c 0.735872,0 1.25677,0.62012 1.25677,1.87689 v 0.47129 c 0,1.26504 -0.51263,1.88516 -1.25677,1.88516 -0.752409,0 -1.265039,-0.62012 -1.265039,-1.88516 v -0.47129 c 0,-1.25677 0.51263,-1.87689 1.265039,-1.87689 z')
g.word
path#path847(d='m 67.810107,130.43535 c 0,2.1084 1.248502,4.23333 4.357356,4.23333 2.720247,0 4.398698,-1.4056 4.398698,-4.22506 v -7.25951 h -3.282487 v 7.2099 c 0,0.89297 -0.305924,1.41387 -1.149284,1.41387 -0.768945,0 -1.198893,-0.52917 -1.207161,-1.37253 z')
path#path849(d='m 83.05672,133.42845 h 0.148828 v 1.0418 h 2.951758 v -5.83737 c 0,-2.33164 -1.769401,-3.175 -4.001823,-3.175 -3.092318,0 -3.91914,1.66191 -3.952213,3.06751 h 2.943489 c 0.0083,-0.49609 0.37207,-0.84336 0.975651,-0.84336 0.570508,0 0.93431,0.30592 0.93431,0.84336 v 0.67799 h -1.951302 c -2.083594,0 -3.224609,1.05007 -3.224609,2.69545 0,1.71152 1.215429,2.69544 2.951757,2.69544 1.314649,0 1.984375,-0.60358 2.224154,-1.16582 z m -1.083138,-0.94258 c -0.51263,0 -1.000456,-0.30592 -1.000456,-0.8599 0,-0.51263 0.42168,-0.84335 1.091406,-0.84335 h 0.992188 v 0.81855 c 0,0.53743 -0.529167,0.8847 -1.083138,0.8847 z')
path#path851(d='m 89.505938,134.47025 h 3.695899 l 2.960025,-8.88835 h -3.299023 l -1.380794,6.13503 H 91.358022 L 90.20047,125.5819 h -3.398242 z')
path#path853(d='m 101.67677,133.42845 h 0.14883 v 1.0418 h 2.95175 v -5.83737 c 0,-2.33164 -1.7694,-3.175 -4.00182,-3.175 -3.092316,0 -3.919139,1.66191 -3.952212,3.06751 h 2.94349 c 0.0083,-0.49609 0.372072,-0.84336 0.975652,-0.84336 0.57051,0 0.93431,0.30592 0.93431,0.84336 v 0.67799 h -1.951304 c -2.083593,0 -3.224609,1.05007 -3.224609,2.69545 0,1.71152 1.21543,2.69544 2.951758,2.69544 1.314645,0 1.984375,-0.60358 2.224155,-1.16582 z m -1.08314,-0.94258 c -0.51263,0 -1.000455,-0.30592 -1.000455,-0.8599 0,-0.51263 0.421675,-0.84335 1.091405,-0.84335 h 0.99219 v 0.81855 c 0,0.53743 -0.52917,0.8847 -1.08314,0.8847 z')
path#path855(d='m 106.13334,128.34349 c 0,1.68672 1.2237,2.39778 2.73679,2.72025 1.00045,0.2067 2.16627,0.24804 2.16627,0.9095 0,0.3638 -0.32246,0.678 -0.94257,0.678 -0.64493,0 -1.06661,-0.34727 -1.10795,-0.81029 h -3.05097 c 0,1.57923 1.30638,2.80293 4.01836,2.80293 2.6789,0 4.12584,-1.19063 4.12584,-3.07578 0,-1.52963 -0.94258,-2.24069 -2.54661,-2.53008 -1.00873,-0.1819 -2.42259,-0.23151 -2.42259,-0.97565 0,-0.35554 0.29765,-0.678 0.90123,-0.678 0.678,0 0.95912,0.38861 1.02526,0.80202 h 2.72025 c 0,-1.87689 -1.56269,-2.77812 -3.70416,-2.77812 -2.0836,0 -3.91915,0.84336 -3.91915,2.93522 z')
path#path857(d='m 114.98862,130.25345 c 0,2.86081 1.71152,4.39043 4.28294,4.39043 2.18281,0 3.99356,-1.03353 4.04317,-3.60495 h -2.8112 c -0.0331,0.64492 -0.27285,1.24023 -1.09968,1.24023 -0.76894,0 -1.23196,-0.7276 -1.23196,-2.06705 v -0.52917 c 0,-1.16582 0.48782,-1.90169 1.2237,-1.90169 0.63665,0 1.0666,0.57051 1.09967,1.27331 h 2.8112 c -0.0248,-2.14974 -1.53789,-3.64629 -4.01836,-3.64629 -2.68718,0 -4.29948,1.73632 -4.29948,4.28294 z')
path#path859(d='m 124.57977,134.47025 h 3.26595 v -4.50619 c 0,-1.19062 0.51263,-1.90169 1.80247,-1.90169 0.43822,0 0.87644,0.0413 1.08314,0.13229 v -2.64583 c -0.17363,-0.0661 -0.44648,-0.0909 -0.90124,-0.0909 -1.14928,0 -1.81074,0.9095 -1.93476,1.51308 h -0.1571 v -1.38906 h -3.15846 z')
g.i
path#path906(d='m 131.88065,125.5819 v 8.88835 h 3.15019 v -8.88835 z')
g.i__dot
path#path898(d='m 133.45988,121.85293 c -0.9095,0 -1.64537,0.55397 -1.64537,1.44694 0,0.9095 0.73587,1.46348 1.64537,1.46348 0.90125,0 1.63711,-0.55398 1.63711,-1.46348 0,-0.89297 -0.73586,-1.44694 -1.63711,-1.44694 z')
path#path863(d='m 142.58797,134.55293 c 1.9513,0 3.19154,-1.44694 3.19154,-4.20026 v -0.66973 c 0,-2.76986 -1.24851,-4.18372 -3.19154,-4.18372 -1.24023,0 -2.12494,0.57877 -2.48874,1.48001 h -0.14883 v -1.39733 h -3.16673 v 11.8401 h 3.16673 v -4.35735 h 0.1571 c 0.3638,0.90123 1.24024,1.48828 2.48047,1.48828 z m -1.34772,-2.38952 c -0.74414,0 -1.28985,-0.62839 -1.28985,-1.88516 v -0.50436 c 0,-1.25677 0.54571,-1.87689 1.28158,-1.87689 0.76068,0 1.27331,0.62012 1.27331,1.87689 v 0.50436 c 0,1.27331 -0.5209,1.88516 -1.26504,1.88516 z')
g.t
g.t__cross
rect#rect944(ry='0' y='125.58167' x='146.58987' height='2.348175' width='6.1350183')
path#path946(d='m 148.01184,125.58187 -0.0909,2.34818 v 3.99355 c 0,1.90169 1.11621,2.55488 3.46439,2.55488 0.62838,0 1.11621,-0.0496 1.34772,-0.0827 v -2.23242 c -0.091,0.008 -0.35553,0.0165 -0.58705,0.0165 -0.69453,0 -1.09967,-0.26459 -1.09967,-0.92605 v -1.01957 -2.30425 -2.34818 -2.00091 h -3.03444 z')
g.word
g.t
g.t__cross
rect#rect938(ry='0' y='146.74834' x='18.432337' height='2.348175' width='6.1350183')
path#path940(d='m 19.854295,146.74854 -0.09095,2.34818 v 3.99355 c 0,1.90169 1.116209,2.55488 3.464388,2.55488 0.628381,0 1.116211,-0.0496 1.347722,-0.0827 v -2.23242 c -0.091,0.008 -0.355534,0.0165 -0.587044,0.0165 -0.694532,0 -1.099675,-0.26459 -1.099675,-0.92605 v -1.01957 -2.30425 -2.34818 -2.00091 h -3.03444 z')
path#path869(d='m 30.024301,146.57493 c -2.786393,0 -4.398697,1.80248 -4.398697,4.35736 v 0.47129 c 0,2.80293 1.612304,4.40696 4.398697,4.40696 2.769857,0 4.373893,-1.60403 4.373893,-4.4235 v -0.47956 c 0,-2.55488 -1.604036,-4.33255 -4.373893,-4.33255 z m -0.0083,2.29857 c 0.950846,0 1.174088,0.99219 1.174088,1.97611 v 0.66972 c 0,0.89297 -0.198437,1.99265 -1.174088,1.99265 -0.983919,0 -1.182357,-1.11621 -1.182357,-1.99265 v -0.66972 c 0,-0.96739 0.231511,-1.97611 1.182357,-1.97611 z')
g.word
path#path871(d='m 41.856136,146.66588 c -1.95957,0 -3.199804,1.48002 -3.199804,4.18373 v 0.66972 c 0,2.69545 1.231966,4.20026 3.199804,4.20026 1.240235,0 2.166276,-0.59531 2.497005,-1.49655 h 0.148829 v 1.41387 h 3.158463 v -11.88144 h -3.166732 v 4.38216 h -0.148828 c -0.322461,-0.89297 -1.248502,-1.47175 -2.488737,-1.47175 z m 1.347722,2.39779 c 0.74414,0 1.289843,0.62012 1.289843,1.87689 v 0.51263 c 0,1.26504 -0.537435,1.87689 -1.289843,1.87689 -0.735873,0 -1.273308,-0.61185 -1.273308,-1.87689 v -0.51263 c 0,-1.26504 0.537435,-1.87689 1.273308,-1.87689 z')
path#path873(d='m 49.462907,155.63691 h 3.150195 v -8.88834 h -3.150195 z m -0.06615,-11.17038 c 0,0.90951 0.735872,1.46348 1.645378,1.46348 0.901236,0 1.637109,-0.55397 1.637109,-1.46348 0,-0.89296 -0.735873,-1.44694 -1.637109,-1.44694 -0.909506,0 -1.645378,0.55398 -1.645378,1.44694 z')
path#path875(d='m 54.142725,149.51015 c 0,1.68672 1.223698,2.39779 2.736784,2.72025 1.000455,0.20671 2.166276,0.24805 2.166276,0.90951 0,0.3638 -0.322461,0.67799 -0.942578,0.67799 -0.644922,0 -1.066602,-0.34727 -1.107943,-0.81029 h -3.050976 c 0,1.57924 1.30638,2.80293 4.018359,2.80293 2.678906,0 4.125846,-1.19062 4.125846,-3.07578 0,-1.52962 -0.942578,-2.24069 -2.546615,-2.53008 -1.008723,-0.1819 -2.422591,-0.23151 -2.422591,-0.97565 0,-0.35553 0.297657,-0.67799 0.901237,-0.67799 0.677995,0 0.959115,0.38861 1.025261,0.80202 h 2.720247 c 0,-1.87689 -1.562695,-2.77813 -3.704166,-2.77813 -2.083594,0 -3.919141,0.84336 -3.919141,2.93522 z')
path#path877(d='m 63.361798,155.63691 h 3.150195 v -5.08496 c 0,-1.08314 0.51263,-1.41387 1.083138,-1.41387 0.496094,0 1.07487,0.24805 1.07487,1.41387 v 5.08496 h 2.993098 v -5.06842 c 0,-1.017 0.454753,-1.43041 1.083138,-1.43041 0.512631,0 1.066602,0.28112 1.066602,1.4056 v 5.09323 h 3.158463 v -6.11022 c 0,-1.70326 -0.992187,-2.90215 -2.769856,-2.90215 -1.546159,0 -2.455664,0.90124 -2.678906,1.63711 h -0.124024 c -0.248047,-0.95085 -1.058333,-1.63711 -2.397786,-1.63711 -1.529623,0 -2.248958,0.93431 -2.430859,1.63711 h -0.157097 v -1.51308 h -3.050976 z')
path#path879(d='m 83.38745,154.59511 h 0.148828 v 1.0418 h 2.951758 v -5.83737 c 0,-2.33164 -1.769401,-3.175 -4.001823,-3.175 -3.092317,0 -3.91914,1.66192 -3.952213,3.06751 h 2.94349 c 0.0083,-0.49609 0.37207,-0.84335 0.975651,-0.84335 0.570507,0 0.934309,0.30592 0.934309,0.84335 v 0.678 h -1.951302 c -2.083593,0 -3.224609,1.05006 -3.224609,2.69544 0,1.71153 1.21543,2.69544 2.951758,2.69544 1.314648,0 1.984375,-0.60358 2.224153,-1.16582 z m -1.083138,-0.94257 c -0.51263,0 -1.000455,-0.30593 -1.000455,-0.8599 0,-0.51263 0.421679,-0.84336 1.091406,-0.84336 h 0.992187 v 0.81856 c 0,0.53743 -0.529166,0.8847 -1.083138,0.8847 z')
path#path881(d='m 88.067265,155.63691 h 3.150195 v -4.9444 c 0,-1.00872 0.56224,-1.48001 1.198893,-1.48001 0.504362,0 1.174089,0.25631 1.174089,1.45521 v 4.9692 h 3.158463 v -5.75469 c 0,-2.17454 -1.141015,-3.25768 -2.910416,-3.25768 -1.546159,0 -2.348177,0.91777 -2.571419,1.57923 h -0.148829 v -1.4552 h -3.050976 z')
path#path883(d='m 99.163233,146.74857 h -1.422135 v 2.34817 h 1.331185 v 3.99356 c 0,1.90169 1.116207,2.55488 3.464387,2.55488 0.62839,0 1.11621,-0.0496 1.34772,-0.0827 v -2.23242 c -0.0909,0.008 -0.35553,0.0165 -0.58704,0.0165 -0.69453,0 -1.09968,-0.26458 -1.09968,-0.92604 v -3.32383 h 1.67845 v -2.34817 h -1.67845 v -2.00092 h -3.034437 z')
path#path885(d='m 105.44708,155.63691 h 3.15847 v -11.88144 h -3.15847 z')
path#path887(d='m 114.40984,155.81054 c 2.90215,0 4.04317,-1.81901 4.09278,-3.19153 h -2.81947 c -0.0331,0.58704 -0.59531,0.92604 -1.28984,0.92604 -0.69454,0 -1.33119,-0.47956 -1.33119,-1.3808 v -0.35553 h 5.47357 v -0.92604 c 0,-2.68717 -1.70326,-4.30775 -4.24987,-4.30775 -2.33991,0 -4.29121,1.37253 -4.29121,4.29948 v 0.58705 c 0,2.96002 1.83555,4.34908 4.41523,4.34908 z m -1.34772,-5.68027 c 0,-0.81029 0.51263,-1.37253 1.25677,-1.37253 0.74414,0 1.21543,0.56224 1.21543,1.37253 z')
g.word
path#path889(d='m 124.00099,146.74857 h -1.42214 v 2.34817 h 1.33119 v 3.99356 c 0,1.90169 1.11621,2.55488 3.46438,2.55488 0.62839,0 1.11621,-0.0496 1.34772,-0.0827 v -2.23242 c -0.0909,0.008 -0.35553,0.0165 -0.58704,0.0165 -0.69453,0 -1.09967,-0.26458 -1.09967,-0.92604 v -3.32383 h 1.67845 v -2.34817 h -1.67845 v -2.00092 h -3.03444 z')
path#path891(d='m 134.18745,155.81054 c 2.90214,0 4.04316,-1.81901 4.09277,-3.19153 h -2.81947 c -0.0331,0.58704 -0.59531,0.92604 -1.28984,0.92604 -0.69453,0 -1.33119,-0.47956 -1.33119,-1.3808 v -0.35553 h 5.47357 v -0.92604 c 0,-2.68717 -1.70325,-4.30775 -4.24987,-4.30775 -2.33991,0 -4.29121,1.37253 -4.29121,4.29948 v 0.58705 c 0,2.96002 1.83555,4.34908 4.41524,4.34908 z m -1.34773,-5.68027 c 0,-0.81029 0.51263,-1.37253 1.25678,-1.37253 0.74414,0 1.21542,0.56224 1.21542,1.37253 z')
path#path893(d='m 144.61368,155.63691 h 3.41478 l -2.6293,-4.45657 2.77813,-4.43177 h -3.41478 l -1.23197,2.57968 h -0.12402 l -1.2237,-2.57968 h -3.58014 l 2.66237,4.43177 -2.51354,4.45657 h 3.25768 l 1.24023,-2.59622 h 0.12403 z')
g.t
g.t__cross
rect#rect919(width='6.1350183' height='2.348175' x='148.6404' y='146.74834' ry='0')
path#path932(d='m 150.06236,146.74854 -0.091,2.34818 v 3.99355 c 0,1.90169 1.11621,2.55488 3.46439,2.55488 0.62838,0 1.11621,-0.0496 1.34772,-0.0827 v -2.23242 c -0.091,0.008 -0.35553,0.0165 -0.58705,0.0165 -0.69453,0 -1.09967,-0.26459 -1.09967,-0.92605 v -1.01957 -2.30425 -2.34818 -2.00091 h -3.03444 z')
//- include dot-one.pug
svg.dot.dot--one(viewbox='0 0 162.80969 60.440757')
g(transform='translate(-5.2030773,-108.61135)' style='display:inline')
g
g.i
g.i__dot
path#path910(d='m 41.219476,121.85293 c -0.909501,0 -1.645371,0.55397 -1.645371,1.44694 0,0.9095 0.73587,1.46348 1.645371,1.46348 0.90125,0 1.63711,-0.55398 1.63711,-1.46348 0,-0.89297 -0.73586,-1.44694 -1.63711,-1.44694 z')
//- include dot-two.pug
svg.dot(viewbox='0 0 162.80969 60.440757')
g(transform='translate(-5.2030773,-108.61135)' style='display:inline')
g.word
g.i
g.i__dot
path#path898(d='m 133.45988,121.85293 c -0.9095,0 -1.64537,0.55397 -1.64537,1.44694 0,0.9095 0.73587,1.46348 1.64537,1.46348 0.90125,0 1.63711,-0.55398 1.63711,-1.46348 0,-0.89297 -0.73586,-1.44694 -1.63711,-1.44694 z')
//- include cross-two.pug
svg.cross(viewbox='0 0 162.80969 60.440757')
g(transform='translate(-5.2030773,-108.61135)' style='display:inline')
g
g.t
g.t__cross
rect#rect944(ry='0' y='125.58167' x='146.58987' height='2.348175' width='6.1350183')
//- include cross-one.pug
svg.cross(viewbox='0 0 162.80969 60.440757')
g(transform='translate(-5.2030773,-108.61135)' style='display:inline')
g
g.t
g.t__cross
rect#rect938(ry='0' y='146.74834' x='18.432337' height='2.348175' width='6.1350183')
//- include cross-three.pug
svg.cross(viewbox='0 0 162.80969 60.440757')
g(transform='translate(-5.2030773,-108.61135)' style='display:inline')
g
g.t
g.t__cross
rect#rect919(width='6.1350183' height='2.348175' x='148.6404' y='146.74834' ry='0')
//- include dot-three.pug
svg.dot(viewbox='0 0 162.80969 60.440757')
g(transform='translate(-5.2030773,-108.61135)' style='display:inline')
path.i__dot(d='m 34.919085,121.84052 c -0.909501,0 -1.645371,0.55397 -1.645371,1.44694 0,0.9095 0.73587,1.46348 1.645371,1.46348 0.90125,0 1.63711,-0.55398 1.63711,-1.46348 0,-0.89297 -0.73586,-1.44694 -1.63711,-1.44694 z')
//- include dot-four.pug
svg.dot(viewbox='0 0 162.80969 60.440757')
g(transform='translate(-5.2030773,-108.61135)' style='display:inline')
path.i__dot(d='m 106.40619,154.11969 c 0,0.93431 0.76895,1.70325 1.71153,1.70325 0.93431,0 1.70325,-0.76894 1.70325,-1.70325 0,-0.94258 -0.76894,-1.71153 -1.70325,-1.71153 -0.94258,0 -1.71153,0.76895 -1.71153,1.71153 z')
.crane.crane--vertical
.crane.crane--vertical
.crane.crane--horizontal.crane--horizontal-right
.crane.crane--horizontal.crane--horizontal-left
.crane.crane--horizontal.crane--horizontal-right
.crane.crane--vertical
.logo-container
.crane.crane--horizontal.crane--horizontal-left
img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg')
Raw
script.babel
// eslint-disable-next-line
;(function() {
const {
gsap: { set, to, timeline },
} = window
const $TEXT_ONE = document.querySelector('.text--one')
const $TEXT_TWO = document.querySelector('.text--two')
const $LOGO = document.querySelector('img')
const $LOGO_CONTAINER = document.querySelector('.logo-container')
const $CRANES = [...document.querySelectorAll('.crane')]
const $LINE_ONE = [...$TEXT_ONE.querySelectorAll('.word')]
const $LINE_TWO = [...$TEXT_TWO.querySelectorAll('.word')]
const $DOTS = [...document.querySelectorAll('.dot')]
const $CROSSES = [...document.querySelectorAll('.cross')]
const $MOVING_PARTS = [$DOTS[0], $DOTS[1], ...$CROSSES, $DOTS[3]]
// Only targets the crosses and dots in the actual words, not the duplicates
const $DOUBLE_DOTS_ONE = [...$TEXT_ONE.querySelectorAll('.i__dot')]
const $DOUBLE_CROSSES_ONE = [...$TEXT_ONE.querySelectorAll('.t__cross')]
const FADE_DUR = 0.25
const STAGGER = 0.1
const STEP_DELAY = 1
const STEP_DUR = 0.05
const resetPositions = () => {
set(
[
...$MOVING_PARTS,
...$CRANES,
$LINE_ONE,
...$DOTS,
...$CROSSES,
...$LINE_ONE,
...$LINE_TWO,
$LINE_TWO,
...$DOUBLE_CROSSES_ONE,
...$DOUBLE_DOTS_ONE,
...$CRANES,
$LOGO_CONTAINER,
],
{
clearProps: true,
}
)
for (const CRANE of $CRANES) CRANE.removeAttribute('data-offset')
set([$TEXT_TWO, $LINE_ONE, $DOTS, $CROSSES, $LINE_TWO], {
opacity: 0,
})
}
const movePart = (index, reversed, onStart) => {
const CRANE = $CRANES[index]
// Work out the speed in relation to where the text is in the window
const DURATION = CRANE.dataset.offset / 750
return (
new timeline({ repeatRefresh: true, reversed, onStart })
// .add(set($MOVING_PARTS[index], { opacity: 1 }))
.add(
to(CRANE, {
duration: DURATION,
[CRANE.className.includes('vertical') ? 'y' : 'x']: `${
CRANE.className.includes('right') ? '-' : '+'
}=${CRANE.dataset.offset}`,
})
)
.add(
to($MOVING_PARTS[index], {
duration: DURATION,
[CRANE.className.includes('vertical') ? 'y' : 'x']: `${
CRANE.className.includes('right') ? '+' : '-'
}=${CRANE.dataset.offset}`,
}),
DURATION
)
.add(
to($CRANES[index], {
duration: DURATION,
[CRANE.className.includes('vertical') ? 'y' : 'x']: `${
CRANE.className.includes('right') ? '+' : '-'
}=${CRANE.dataset.offset}`,
}),
DURATION
)
)
}
const setPositions = () => {
/**
* Set up the logo position
*/
const LOGO_BOUNDS = $LOGO.getBoundingClientRect()
// Use the image height as that will be set whereas the image may not have loaded
// and means the rendered width would be 0
$LOGO_CONTAINER.dataset.offset = LOGO_BOUNDS.left + LOGO_BOUNDS.height * 2
set($LOGO_CONTAINER, { x: -$LOGO_CONTAINER.dataset.offset })
/**
* Set up all the moving parts
*/
const BOUNDS = $MOVING_PARTS.map(el => {
return {
pos:
el.tagName.toLowerCase() === 'svg'
? el.querySelector('g').getBoundingClientRect()
: el.getBoundingClientRect(),
el,
}
})
// 0 === UsIng
// 1 === JavaScrIpt
// 2 === JavaScripT
// 3 === To
// 4 === texT
// 5 === . <
for (let b = 0; b < BOUNDS.length; b++) {
const BOUND = BOUNDS[b]
const CRANE = $CRANES[b]
const isH = CRANE.className.includes('horizontal')
CRANE.dataset.offset = isH
? CRANE.className.includes('right')
? BOUND.pos.left + BOUND.pos.width * 2
: BOUND.pos.left + BOUND.pos.width * 2
: BOUND.pos.top + BOUND.pos.height * 2
set(CRANE, {
[isH ? 'top' : 'bottom']: isH
? BOUND.pos.top + BOUND.pos.height / 2 - CRANE.offsetHeight / 2
: window.innerHeight - (BOUND.pos.top + BOUND.pos.height),
[isH
? CRANE.className.includes('right')
? 'left'
: 'right'
: 'left']: isH
? CRANE.className.includes('right')
? BOUND.pos.left + BOUND.pos.width
: window.innerWidth - BOUND.pos.left
: BOUND.pos.left + BOUND.pos.height / 2 - CRANE.offsetWidth / 2,
[isH ? 'x' : 'y']: CRANE.className.includes('right')
? `+=${CRANE.dataset.offset}`
: `-=${CRANE.dataset.offset}`,
transformOrigin: '50% 50%',
})
}
}
const genTL = () => {
resetPositions()
setPositions()
return (
new timeline({
delay: 1,
repeat: -1,
repeatDelay: 1.5,
})
// Fade in all the words
.add(
to($LINE_ONE, { duration: FADE_DUR, stagger: STAGGER, opacity: 1 })
)
// Bring in the duplicates and hide the originals 👍
.add(
set([$DOTS[0], $DOTS[1], $CROSSES], {
opacity: 1,
})
)
.add(set([...$DOUBLE_DOTS_ONE, ...$DOUBLE_CROSSES_ONE], { opacity: 0 }))
// Bring in the crane and take out the dots
.add(movePart(0))
.add(movePart(1))
.add(movePart(2))
.add(movePart(3))
.add(movePart(4))
.add(
new timeline()
.add(to($LINE_ONE, { duration: STEP_DUR, opacity: 0 }))
.add(to($DOTS[2], { duration: STEP_DUR, opacity: 1 }), 0)
)
.add(set($TEXT_TWO, { opacity: 1 }))
.add(
to($LINE_TWO, {
delay: STEP_DELAY,
duration: FADE_DUR,
stagger: STAGGER,
opacity: 1,
})
)
.add(
movePart(5, true, () => set($DOTS[3], { opacity: 1 })),
'-=0.5'
)
.add(
to([$TEXT_TWO, $DOTS[2], $DOTS[3]], {
delay: STEP_DELAY,
duration: STEP_DUR,
opacity: 0,
})
)
.add(
to($LOGO_CONTAINER, {
delay: STEP_DELAY,
duration: $LOGO_CONTAINER.dataset.offset / 500,
x: `+=${$LOGO_CONTAINER.dataset.offset}`,
})
)
.add(
to($CRANES[5], {
duration: $LOGO_CONTAINER.dataset.offset / 1000,
x: `-=${$LOGO_CONTAINER.dataset.offset}`,
})
)
)
}
let TL = genTL()
/**
* When we resize the window, we need to kill the current timeline and
* generate a new one killing and invalidating all of the current timeline settings
*/
window.addEventListener('resize', () => {
TL.kill()
TL.invalidate()
TL = genTL()
})
})()
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.2/gsap.min.js"></script>
Raw
style.stylus
*
box-sizing border-box
:root
--lightness 0
body
text-align center
display flex
align-items center
justify-content center
background 'hsl(0, 0%, %s)' % (calc((100 - var(--lightness)) * 1%))
overflow hidden
@media(prefers-color-scheme dark)
--lightness 100
.dismantle
.dot
.cross
height 30vmin
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
img
position absolute
height 30vmin
top 50%
left 50%
transform translate(-50%, -50%)
.logo-container
position absolute
top 50%
left 50%
transform translate(-50%, -50%)
.crane
right 50%
top 50%
transform translate(0, -50%)
svg
path
rect
fill 'hsl(0, 0%, %s)' % (calc(var(--lightness) * 1%))
.crane
position absolute
z-index -1
background repeating-linear-gradient(60deg, black 2px, white 4px)
&--vertical
height 100vh
width 0.5vmin
&--horizontal
width 100vw
height 0.5vmin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment