Skip to content

Instantly share code, notes, and snippets.

@PushoDev

PushoDev/gsap-round-ending-scene.markdown

Created December 12, 2024 14:45
Show Gist options
  • Save PushoDev/c00b07498271820666a15ba0858e3347 to your computer and use it in GitHub Desktop.
Save PushoDev/c00b07498271820666a15ba0858e3347 to your computer and use it in GitHub Desktop.
Download ZIP
GSAP Round Ending Scene
Raw
gsap-round-ending-scene.markdown

GSAP Round Ending Scene

Round ending scene of a mobile game called "King's League II". Figured I'd give GSAP timelines a go because I really enjoyed this little animation!

A Pen by Luis Alberto Guisado on CodePen.

License.

Raw
index.html
<button id="restartButton" type="button" onclick="master.restart()">restart</button>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100vw"
height="100vh" viewBox="0 0 900 650" style="enable-background:new 0 0 900 650;" xml:space="preserve">
// VIEWBOX HOLDER
<rect x="0.5" y="0.5" style="fill:none;stroke:none;stroke-miterlimit:10;" width="900" height="650"/>
// WHOLE SVG
<g id="wholeGroup">
// BANNER GROUP
<g id="bannerGroup">
// LEFT BANNER
<g id="leftBanner">
<polygon style="fill:#4E194F;" points="356.725,490.19 286.718,466.698 216.71,483.19 216.71,191 356.725,191"/>
<polygon style="fill:#3D123E;" points="216.71,481.19 216.71,492 286.718,475.507 356.725,499 356.725,488.19 286.718,464.698"/>
<rect x="216.72" y="213.695" style="fill:#3D123E;" width="140" height="12.48"/>
<path style="fill:#FAF20A;" d="M214.165,214h-13.695c-1.842,0-3.335-1.252-3.335-2.796V190.87c0-1.544,1.493-2.796,3.335-2.796
h13.695c1.842,0,3.335,1.252,3.335,2.796v20.334C217.5,212.748,216.007,214,214.165,214z"/>
</g>
// RIGHT BANNER
<g id="rightBanner">
<polygon style="fill:#4E194F;" points="543.71,490.19 613.718,466.698 683.725,483.19 683.725,191 543.71,191"/>
<polygon style="fill:#3D123E;" points="683.725,481.19 683.725,492 613.718,475.507 543.71,499 543.71,488.19 613.718,464.698"/>
<rect x="543.715" y="213.695" style="fill:#3D123E;" width="140" height="12.48"/>
<path style="fill:#FAF20A;" d="M700.165,214h-13.695c-1.842,0-3.335-1.252-3.335-2.796V190.87c0-1.544,1.493-2.796,3.335-2.796
h13.695c1.842,0,3.335,1.252,3.335,2.796v20.334C703.5,212.748,702.007,214,700.165,214z"/>
</g>
</g>
// TRUMPET GROUP
<g id=trumpetGroup>
// LEFT TRUMPET
<g id="leftTrumpet">
<rect x="296.968" y="238.845" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -53.3528 460.1289)" style="fill:#A7AC0C;" width="13" height="59"/>
<rect x="290.927" y="258.877" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -36.6387 481.1774)" style="fill:#A7AC0C;" width="72" height="16"/>
<rect x="317.365" y="272.816" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -36.3538 509.4638)" style="fill:#A7AC0C;" width="60" height="16"/>
<rect x="315.583" y="235.424" transform="matrix(0.3462 -0.9381 0.9381 0.3462 -8.9769 473.9652)" style="fill:#63610D;" width="40" height="16"/>
<path style="fill:#FFFF13;" d="M345.49,235.355l-12.196-4.501c-8.149-2.385-3.942-13.804,3.809-10.319
c-0.001,0,12.195,4.501,12.195,4.501C357.448,227.42,353.24,238.839,345.49,235.355z"/>
<path style="fill:#FFFF19;" d="M369.703,254.95c-29.721-16.88-148.905-41.744-171.223-87.705
c-8.581-18.628-14.373,4.284-14.373,4.284c-4.18,11.339-9.664,26.175-13.85,37.526c0,0-10.482,21.181,8.142,12.598
c46.355-20.579,154.206,38.288,187.149,44.555L369.703,254.95z"/>
<path style="fill:#FFFF19;" d="M391.161,341.216c0,0-95.691-35.317-95.691-35.317c-23.199-8.562-34.134-28.816-26.591-49.254
c7.543-20.438,29.014-28.731,52.213-20.169l95.691,35.317C469.28,289.718,442.75,361.707,391.161,341.216z M316.591,248.672
c-37.038-13.244-53.353,31.046-16.621,45.03c0.002,0,95.692,35.317,95.692,35.317c20.081,7.411,31.683-2.088,35.516-12.474
c3.833-10.386,1.184-25.145-18.896-32.557L316.591,248.672z"/>
</g>
// RIGHT TRUMPET
<g id="rightTrumpet">
<rect x="567.089" y="261.845" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -56.0106 223.1639)" style="fill:#A7AC0C;" width="59" height="13"/>
<rect x="565.13" y="230.877" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -56.9534 214.9504)" style="fill:#A7AC0C;" width="16" height="72"/>
<rect x="544.692" y="250.816" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -63.0438 208.7361)" style="fill:#A7AC0C;" width="16" height="60"/>
<rect x="556.473" y="223.424" transform="matrix(0.9381 -0.3462 0.3462 0.9381 -49.3681 210.5025)" style="fill:#63610D;" width="16" height="40"/>
<path style="fill:#FFFF13;" d="M554.567,235.355l14.072-5.194c2.332-0.861,3.524-3.448,2.664-5.78
c-3.217-9.233-16.838,0.129-22.421,1.346C542.018,228.785,548.674,238.115,554.567,235.355z"/>
<path style="fill:#FFFF19;" d="M530.354,254.95c29.721-16.88,148.905-41.744,171.223-87.705
c8.581-18.628,14.373,4.284,14.373,4.284c4.18,11.339,9.664,26.175,13.85,37.526c0,0,10.482,21.181-8.142,12.598
c-46.355-20.579-154.206,38.288-187.149,44.555L530.354,254.95z"/>
<path style="fill:#FFFF19;" d="M456.683,321.047c-7.543-20.438,3.392-40.691,26.591-49.254l95.691-35.317
c23.199-8.562,44.67-0.269,52.213,20.169s-3.392,40.691-26.591,49.254l-95.691,35.317
C485.696,349.778,464.226,341.484,456.683,321.047z M487.775,283.989c-36.762,13.993-20.391,58.263,16.618,45.032
c0.001-0.001,95.692-35.318,95.692-35.318c20.081-7.411,22.73-22.17,18.896-32.557c-3.833-10.386-15.435-19.886-35.516-12.474
L487.775,283.989z"/>
</g>
</g>
// MIDDLE BANER
<g id="middleBanner">
<polygon style="fill:#74016B;" points="554.039,524 450.028,492 346.018,524 346.018,126 554.039,126"/>
<polygon style="fill:#590056;" points="346.018,522 346.018,536 450.028,504 554.039,536 554.039,522 450.028,490"/>
<rect x="346.028" y="161" style="fill:#590056;" width="208" height="17"/>
<path style="fill:#FAF20A;" d="M342.107,164H323.95c-2.442,0-4.422-1.98-4.422-4.422v-32.157c0-2.442,1.98-4.422,4.422-4.422
h18.157c2.442,0,4.422,1.98,4.422,4.422v32.157C346.528,162.02,344.549,164,342.107,164z"/>
<path style="fill:#FAF20A;" d="M576.107,164H557.95c-2.442,0-4.422-1.98-4.422-4.422v-32.157c0-2.442,1.98-4.422,4.422-4.422
h18.157c2.442,0,4.422,1.98,4.422,4.422v32.157C580.528,162.02,578.549,164,576.107,164z"/>
</g>
// STARS
<g id="starGroup">
// TOP STAR
<polygon id="topStar" style="fill:#FFFFFF;" points="451.028,113 457.831,137.197 482.028,144 457.831,150.803 451.028,175 444.225,150.803
420.028,144 444.225,137.197"/>
// LEFT STAR
<polygon id="leftStar" style="fill:#FFFFFF;" points="290.028,345 296.831,369.197 321.028,376 296.831,382.803 290.028,407 283.225,382.803
259.028,376 283.225,369.197"/>
// RIGHT STAR
<polygon id="rightStar" style="fill:#FFFFFF;" points="610.028,345 616.831,369.197 641.028,376 616.831,382.803 610.028,407 603.225,382.803
579.028,376 603.225,369.197"/>
</g>
// SHIELD
<g id="shield">
<path style="fill:#9D5826;" d="M449.837,466c25-2,84-47,98-59s16-22,13-36s-2-34-2-52s11-49-4-64c-19.5-19.5-80-52-105-52h0.382
h-0.382h0.382c-25,0-85.5,32.5-105,52c-15,15-4,46-4,64s1,38-2,52s-1,24,13,36s73,57,98,59H449.837z"/>
<path style="fill:#7E3A17;" d="M449.853,455c22.909-1.833,76.973-43.068,89.802-54.065c12.829-10.996,14.662-20.16,11.913-32.989
c-2.749-12.829-1.833-31.156-1.833-47.65s10.08-44.901-3.665-58.646C528.201,243.781,472.762,214,449.853,214h0.35h-0.35h0.35
c-22.909,0-78.348,29.781-96.217,47.65c-13.745,13.745-3.665,42.152-3.665,58.646s0.916,34.821-1.833,47.65
c-2.749,12.829-0.916,21.992,11.913,32.989c12.829,10.996,66.894,52.232,89.802,54.065H449.853z"/>
<path style="fill:#4A170A;" d="M449.871,443c20.627-1.65,69.308-38.779,80.859-48.681c11.551-9.901,13.202-18.152,10.726-29.703
s-1.65-28.053-1.65-42.905s9.076-40.43-3.3-52.806C520.416,252.816,470.498,226,449.871,226h0.315h-0.315h0.315
c-20.627,0-70.546,26.816-86.635,42.905c-12.376,12.376-3.3,37.954-3.3,52.806s0.825,31.354-1.65,42.905
s-0.825,19.802,10.726,29.703c11.551,9.901,60.232,47.03,80.859,48.681H449.871z"/>
<path style="fill:#370C06;" d="M499.036,331.462L525.283,286h-52.495l-22.665-39.257L427.458,286h-52.495l26.248,45.462
l-26.248,45.462h52.495l22.665,39.256l22.665-39.256h52.495L499.036,331.462z M507.963,296l-14.701,25.462L478.562,296H507.963z
M487.489,331.462l-20.474,35.462h-33.782l-20.474-35.462L433.232,296h33.783L487.489,331.462z M450.123,266.743L461.241,286
h-22.236L450.123,266.743z M392.283,296h29.401l-14.701,25.462L392.283,296z M392.283,366.925l14.701-25.463l14.701,25.463
H392.283z M450.123,396.181l-11.118-19.256h22.235L450.123,396.181z M493.262,341.462l14.701,25.463h-29.402L493.262,341.462z"/>
</g>
// SWORD GROUP
<g id="swordGroup">
// LEFT SWORD
<g id="leftSword">
<path style="fill:#FFFFFF;" d="M432.893,344.932c0,0,70.711-70.711,82.024-82.024c11.314-11.314,21.213-1.414,21.213-1.414
l10.607-51.619l-51.619,10.607c0,0,9.899,9.9-1.414,21.213c-30.983,26.068-84.437,96.974-111.723,98.995l-23.335,26.163
c7.755,7.755,23.36,23.36,31.113,31.113l26.163-23.335C413.801,364.023,432.893,344.932,432.893,344.932z"/>
<path style="fill:#FEF10D;" d="M418.044,410.693c-9.192,0-7.071,2.828-16.263-4.95c-9.161-7.751-26.87-24.042-26.87-24.042
s-16.29-17.709-24.042-26.87c-7.778-9.192-4.95-7.071-4.95-16.263l-23.335-0.707l0.707,23.335c9.192,0,7.071-2.828,16.263,4.95
c9.161,7.751,26.87,24.042,26.87,24.042s16.29,17.709,24.042,26.87c7.778,9.192,4.95,7.071,4.95,16.263l23.335,0.707
L418.044,410.693z"/>
<polygon style="fill:#F8B40E;" points="332.484,443.927 312.685,424.128 357.94,381.701 374.91,398.672 "/>
<path style="fill:#DECE07;" d="M359.504,364.701h-10.786v9.448c21.823,19.721,14.008,11.904,33.718,33.715h9.445v-10.783
C370.75,377.958,378.639,385.845,359.504,364.701z"/>
<rect x="355.082" y="371.065" style="fill:#FFF10D;" width="29.021" height="29.021"/>
<rect x="363.567" y="379.55" style="fill:#822682;" width="12.05" height="12.05"/>
<path style="fill:#FEF10D;" d="M338.141,446.755c-11.482-11.48-16.804-16.805-28.284-28.284c-2.828-2.828-3.536-3.536-4.95,0
c-1.414,3.536-3.536,8.485-2.121,12.728c2.88,4.84,2.065,17.563,2.121,20.506c3.041,0.07,15.596-0.777,20.506,2.122
c4.243,1.414,9.193-0.708,12.728-2.122C341.676,450.29,340.969,449.583,338.141,446.755z"/>
</g>
// RIGHT SWORD
<g id="rightSword">
<path style="fill:#FFFFFF;" d="M467.163,344.932c0,0-70.711-70.711-82.024-82.024c-11.314-11.314-21.213-1.414-21.213-1.414
l-10.607-51.619l51.619,10.607c0,0-9.9,9.9,1.414,21.213c30.983,26.068,84.437,96.974,111.723,98.995l23.335,26.163
c-7.755,7.755-23.36,23.36-31.113,31.113l-26.163-23.335C486.255,364.023,467.163,344.932,467.163,344.932z"/>
<path style="fill:#FEF10D;" d="M482.013,410.693c9.192,0,7.071,2.828,16.263-4.95c9.161-7.751,26.87-24.042,26.87-24.042
s16.29-17.709,24.042-26.87c7.778-9.192,4.95-7.071,4.95-16.263l23.335-0.707l-0.707,23.335c-9.192,0-7.071-2.828-16.263,4.95
c-9.161,7.751-26.87,24.042-26.87,24.042s-16.29,17.709-24.042,26.87c-7.778,9.192-4.95,7.071-4.95,16.263l-23.335,0.707
L482.013,410.693z"/>
<polygon style="fill:#F8B40E;" points="567.573,443.927 587.372,424.128 542.117,381.701 525.146,398.672 "/>
<path style="fill:#DECE07;" d="M540.553,364.701h10.786v9.448c-21.823,19.721-14.008,11.904-33.718,33.715h-9.445v-10.783
C529.307,377.958,521.418,385.845,540.553,364.701z"/>
<rect x="515.954" y="371.065" style="fill:#FFF10D;" width="29.021" height="29.021"/>
<rect x="524.439" y="379.55" style="fill:#822682;" width="12.05" height="12.05"/>
<path style="fill:#FEF10D;" d="M561.916,446.755c11.482-11.48,16.804-16.805,28.284-28.284c2.828-2.828,3.536-3.536,4.95,0
c1.414,3.536,3.536,8.485,2.121,12.728c-2.88,4.84-2.065,17.563-2.121,20.506c-3.041,0.07-15.596-0.777-20.506,2.122
c-4.243,1.414-9.193-0.708-12.728-2.122C558.38,450.29,559.087,449.583,561.916,446.755z"/>
</g>
</g>
// WHEAT GROUP
<g id="wheatGroup">
// LEFT WHEAT
<g id="leftWheat">
<path style="fill:#FBC50A;" d="M302.379,513.623c13.597-12.794,12.585-31.21-2.092-42.514
C286.576,484.711,287.832,500.491,302.379,513.623z"/>
<path style="fill:#FDE808;" d="M302.32,513.687c-11.626,14.608-30.063,15.122-42.542,1.43
C272.2,500.329,288.03,500.276,302.32,513.687z"/>
<path style="fill:#FBC50A;" d="M279.157,498.58c15.156-10.901,16.567-29.292,3.498-42.422
C267.281,467.846,266.457,483.654,279.157,498.58z"/>
<path style="fill:#FDE808;" d="M279.091,498.635c-13.44,12.958-31.786,11.051-42.362-4.159
C250.981,481.445,266.682,483.467,279.091,498.635z"/>
<path style="fill:#FBC50A;" d="M257.168,481.817c16.758-8.228,21.208-26.128,10.505-41.249
C250.569,449.536,247.128,464.987,257.168,481.817z"/>
<path style="fill:#FDE808;" d="M257.093,481.861c-15.408,10.542-33.181,5.61-41.08-11.147
C232.235,460.234,247.38,464.839,257.093,481.861z"/>
<path style="fill:#FBC50A;" d="M240.733,458.765c17.975-5.043,25.607-21.835,17.832-38.65
C240.115,425.821,233.921,440.389,240.733,458.765z"/>
<path style="fill:#FDE808;" d="M240.652,458.794c-17.068,7.564-33.648-0.518-38.368-18.432
C220.141,433.007,234.196,440.29,240.652,458.794z"/>
<path style="fill:#FBC50A;" d="M227.174,434.81c18.506-2.463,28.425-18.014,23.094-35.756
C231.198,402.108,223.016,415.658,227.174,434.81z"/>
<path style="fill:#FDE808;" d="M227.089,434.828c-17.963,5.086-33.24-5.248-35.392-23.649
C210.412,406.411,223.302,415.599,227.089,434.828z"/>
<path style="fill:#FBC50A;" d="M218.09,408.512c18.653,0.78,31.115-12.818,28.939-31.215
C227.719,377.001,217.312,388.93,218.09,408.512z"/>
<path style="fill:#FDE808;" d="M218.004,408.515c-18.573,1.898-31.829-10.927-30.76-29.422
C206.501,377.638,217.604,388.921,218.004,408.515z"/>
<path style="fill:#FBC50A;" d="M214.222,381.462c18.424,3.018,32.432-8.98,32.485-27.506
C227.573,351.338,215.807,361.928,214.222,381.462z"/>
<path style="fill:#FDE808;" d="M214.137,381.454c-18.666-0.351-30.282-14.678-26.996-32.909
C206.433,349.418,216.098,361.955,214.137,381.454z"/>
<path style="fill:#FBC50A;" d="M214.616,351.478c17.272,7.087,33.621-1.452,37.841-19.49
C234.403,325.132,220.556,332.802,214.616,351.478z"/>
<path style="fill:#FDE808;" d="M214.535,351.451c-18.108-4.542-26.203-21.116-18.898-38.14
C214.237,318.503,220.834,332.893,214.535,351.451z"/>
<path style="fill:#FBC50A;" d="M220.632,323.793c15.778,9.979,33.362,4.41,40.651-12.621
C244.695,301.284,229.726,306.432,220.632,323.793z"/>
<path style="fill:#FDE808;" d="M220.556,323.752c-17.044-7.619-22.137-25.346-11.986-40.843
C225.987,291.253,229.983,306.57,220.556,323.752z"/>
<path style="fill:#FDE808;" d="M228.778,308.053c-5.126-17.952,5.175-33.252,23.57-35.444
C257.158,291.312,247.998,304.223,228.778,308.053z"/>
</g>
// RIGHT WHEAT
<g id="rightWheat">
<path style="fill:#FBC50A;" d="M597.678,513.623c-13.597-12.794-12.585-31.21,2.092-42.514
C613.48,484.711,612.225,500.491,597.678,513.623z"/>
<path style="fill:#FDE808;" d="M597.736,513.687c11.626,14.608,30.063,15.122,42.542,1.43
C627.856,500.329,612.027,500.276,597.736,513.687z"/>
<path style="fill:#FBC50A;" d="M620.899,498.58c-15.156-10.901-16.567-29.292-3.498-42.422
C632.776,467.846,633.599,483.654,620.899,498.58z"/>
<path style="fill:#FDE808;" d="M620.966,498.635c13.44,12.958,31.786,11.051,42.362-4.159
C649.075,481.445,633.375,483.467,620.966,498.635z"/>
<path style="fill:#FBC50A;" d="M642.889,481.817c-16.758-8.228-21.208-26.128-10.505-41.249
C649.488,449.536,652.929,464.987,642.889,481.817z"/>
<path style="fill:#FDE808;" d="M642.963,481.861c15.408,10.542,33.181,5.61,41.08-11.147
C667.822,460.234,652.677,464.839,642.963,481.861z"/>
<path style="fill:#FBC50A;" d="M659.324,458.765c-17.975-5.043-25.607-21.835-17.832-38.65
C659.941,425.821,666.136,440.389,659.324,458.765z"/>
<path style="fill:#FDE808;" d="M659.405,458.794c17.068,7.564,33.648-0.518,38.368-18.432
C679.916,433.007,665.861,440.29,659.405,458.794z"/>
<path style="fill:#FBC50A;" d="M672.883,434.81c-18.506-2.463-28.425-18.014-23.094-35.756
C668.858,402.108,677.041,415.658,672.883,434.81z"/>
<path style="fill:#FDE808;" d="M672.967,434.828c17.963,5.086,33.24-5.248,35.392-23.649
C689.645,406.411,676.755,415.599,672.967,434.828z"/>
<path style="fill:#FBC50A;" d="M681.967,408.512c-18.653,0.78-31.115-12.818-28.939-31.215
C672.338,377.001,682.744,388.93,681.967,408.512z"/>
<path style="fill:#FDE808;" d="M682.053,408.515c18.573,1.898,31.829-10.927,30.76-29.422
C693.556,377.638,682.452,388.921,682.053,408.515z"/>
<path style="fill:#FBC50A;" d="M685.834,381.462c-18.424,3.018-32.432-8.98-32.485-27.506
C672.484,351.338,684.25,361.928,685.834,381.462z"/>
<path style="fill:#FDE808;" d="M685.92,381.454c18.666-0.351,30.282-14.678,26.996-32.909
C693.624,349.418,683.959,361.955,685.92,381.454z"/>
<path style="fill:#FBC50A;" d="M685.44,351.478c-17.272,7.087-33.621-1.452-37.841-19.49
C665.653,325.132,679.501,332.802,685.44,351.478z"/>
<path style="fill:#FDE808;" d="M685.522,351.451c18.108-4.542,26.203-21.116,18.898-38.14
C685.819,318.503,679.223,332.893,685.522,351.451z"/>
<path style="fill:#FBC50A;" d="M679.424,323.793c-15.778,9.979-33.362,4.41-40.651-12.621
C655.362,301.284,670.331,306.432,679.424,323.793z"/>
<path style="fill:#FDE808;" d="M679.5,323.752c17.044-7.619,22.137-25.346,11.986-40.843
C674.07,291.253,670.073,306.57,679.5,323.752z"/>
<path style="fill:#FDE808;" d="M671.278,308.053c5.126-17.952-5.175-33.252-23.57-35.444
C642.898,291.312,652.058,304.223,671.278,308.053z"/>
</g>
</g>
</g>
</svg>
Raw
script.js
const bannerDuration = .85;
const swordDuration = .75;
const shieldDuration = .75;
const trumpetDuration = 1;
const pulseDuration = .2;
const wheatDuration = .5;
const starDuration = .75;
const swordSync = '-=' + (swordDuration * 2);
const trumpetSync = '-=' + (trumpetDuration * 1);
const pulseSync = '-=' + (pulseDuration * 3);
const wheatSync = '-=' + (wheatDuration * 2);
const starSync = '-=' + (starDuration * 1);
const bannerGroup = () => {
const tl = gsap.timeline();
tl.from("#middleBanner", bannerDuration, {opacity: 0, scale: 0, transformOrigin:"50% 50%", ease: "back.out(1.7)"}, 0)
.from("#bannerGroup", bannerDuration, {opacity: 0, scale: 0, transformOrigin:"50% 50%", ease: "back.out(1.7)"}, 0)
return tl;
}
const shield = () => {
const tl = gsap.timeline();
tl.fromTo("#shield", shieldDuration, {opacity: 0, scale: 0, transformOrigin:"50% 50%"}, { opacity: 1, scale: 1, ease: "back.out(6.5)" }, '-=.5')
return tl;
}
const leftSword = () => {
const tl = gsap.timeline();
tl.fromTo("#leftSword", swordDuration, {opacity: 0}, {opacity: 1, x: 100, y: -100})
.to("#leftSword", swordDuration, {x: 0, y: 0})
return tl;
}
const rightSword = () => {
const tl = gsap.timeline();
tl.fromTo("#rightSword", swordDuration, {opacity: 0}, {opacity: 1, x: -100, y: -100})
.to("#rightSword", swordDuration, {x: 0, y: 0})
return tl;
}
const leftTrumpet = () => {
const tl = gsap.timeline();
tl.from('#leftTrumpet', trumpetDuration, {opacity: 0, scale: .2, rotation: -90, transformOrigin: "bottom right", ease: "back.out(1)"})
return tl;
}
const rightTrumpet = () => {
const tl = gsap.timeline();
tl.from('#rightTrumpet', trumpetDuration, {opacity: 0, scale: .2, rotation: 90, transformOrigin: "bottom left", ease: "back.out(1)"})
return tl;
}
const pulseTrumpetGroup = () => {
const tl = gsap.timeline({repeat: 2});
tl.to('#trumpetGroup', pulseDuration, {scale: 1.1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
.to('#trumpetGroup', pulseDuration, {scale: 1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
return tl;
}
const pulseBannerGroup = () => {
const tl = gsap.timeline({repeat: 2});
tl.to('#bannerGroup', pulseDuration, {scale: 1.1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
.to('#bannerGroup', pulseDuration, {scale: 1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
return tl;
}
const pulseMiddleBanner = () => {
const tl = gsap.timeline({repeat: 2});
tl.to('#middleBanner', pulseDuration, {scale: 1.1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
.to('#middleBanner', pulseDuration, {scale: 1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
return tl;
}
const pulseShield = () => {
const tl = gsap.timeline({repeat: 2});
tl.to('#shield', pulseDuration, {scale: 1.1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
.to('#shield', pulseDuration, {scale: 1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
return tl;
}
const pulseSwordGroup = () => {
const tl = gsap.timeline({repeat: 2});
tl.to('#swordGroup', pulseDuration, {scale: 1.1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
.to('#swordGroup', pulseDuration, {scale: 1, transformOrigin: "50% 50%", ease: "back.out(4)"}, 0)
return tl;
}
const leftWheat = () => {
const tl = gsap.timeline();
tl.fromTo('#leftWheat', wheatDuration, {opacity: 0, scale: .2, rotation: 90, transformOrigin: "bottom right", ease: "back.out(1)"}, {opacity: 1, scale: .8, rotation: -60, transformOrigin: "bottom right"})
.to('#leftWheat', wheatDuration, {scale: 1, rotation: 0, transformOrigin: "bottom right"})
return tl;
}
const rightWheat = () => {
const tl = gsap.timeline();
tl.fromTo('#rightWheat', wheatDuration, {opacity: 0, scale: .2, rotation: -90, transformOrigin: "bottom left", ease: "back.out(1)"}, {opacity: 1, scale: .8, rotation: 60, transformOrigin: "bottom left"})
.to('#rightWheat', wheatDuration, {scale: 1, rotation: 0, transformOrigin: "bottom left"})
return tl;
}
const topStar = () => {
const tl = gsap.timeline();
tl.from('#topStar', starDuration, {opacity: 0, scale: 0, transformOrigin: "50% 50%"}, 0)
return tl;
}
const leftStar = () => {
const tl = gsap.timeline();
tl.from('#leftStar', starDuration, {opacity: 0, scale: 0, transformOrigin: "50% 50%"}, 0)
return tl;
}
const rightStar = () => {
const tl = gsap.timeline();
tl.from('#rightStar', starDuration, {opacity: 0, scale: 0, transformOrigin: "50% 50%"}, 0)
return tl;
}
const shiftUp = () => {
const tl = gsap.timeline();
tl.to('#wholeGroup', 1, {y: -50})
return tl;
}
const showButton = () => {
const tl = gsap.timeline();
tl.from('#restartButton', 1, {opacity: 0, y: -50 })
return tl;
}
// stitch them together in a master timeline...
const master = gsap.timeline({delay: 1});
master.add(bannerGroup())
.add(shield(), '-=.5')
.add(leftSword(), '-=.2')
.add(rightSword(), swordSync)
.add(leftTrumpet())
.add(rightTrumpet(), trumpetSync)
.add(pulseTrumpetGroup())
.add(pulseBannerGroup(), pulseSync)
.add(pulseMiddleBanner(), pulseSync)
.add(pulseShield(), pulseSync)
.add(pulseSwordGroup(), pulseSync)
.add(leftWheat())
.add(rightWheat(), wheatSync)
.add(topStar())
.add(leftStar(), starSync)
.add(rightStar(), starSync)
.add(shiftUp())
.add(showButton(), '-=.5')
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
Raw
style.scss
#restartButton {
position: absolute;
top: 80vh;
font-size: 2.5vh;
border: 1vh solid #6b226a;
background: #47174b;
border-radius: 3vh;
padding: 2vh 5vh;
color: #FFF;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
// floof
html, body {
overflow: hidden;
}
body {
width: 100vw;
height: 100vh;
perspective: 600px;
display: flex;
align-items: center;
justify-content: center;
background: #231324;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment