Andonceyouclickitenoughtimes, it's goingtobreakapartinto a bunchoflittlepieces, andwe'reabletodoallofthiswithjustspgCSSand a verylittlebitofJavaScriptjusttoaddintheexplosion.
So, inordertogetthisfancylookinglikebutton, weuseSigmatocreateit.
Sohere I justhavethefinishedversionofourlikewooden, andasyoucansee, it's brokeninallofthesedifferentpiecessowecanactuallyindividuallymodifyallofthesedifferentgroupsaswewantmejustundothisbag.
TohaveitwasAndinordertogetthisintoourproject, ifwejustclickonthisrightclick, wecancopyandpastethisasanSPGand I'llput a linktothisspgforyouSoyoucanactuallydownloadthisanddothisalongwithme.
Sojustcheckdowninthecommentsfor a linktotheSPGandthenifwecomeinhereandopenupindexdothtml, justgettheboilerplatehtmlinsteadofourbody, wecanactuallypastethisSPG.
Andasyoucansee, thisisjust a bunchofdifferenttext.
Essentially, it's justlooks a lotlikeHTMLandit's SPG.
Soweknowthatthisfirstpathrighthereisgoingtobeourveryfirstsectionorveryfirstgroup, andtocreate a groupinSPG, youjustusethis G likethisandtheneverythinginsideofthisSPGwecanactuallycorrespondbyselectingthissinglegroup.
Soifwemovethisgroup, itmoveseverythinginsideofit.
Sowecanjustgivethis a classherewhichisgoingtobe, forexample, groupcuffandforthissimpleexample, sincethere's onlyonethinginthegroup.
Wedon't havetogroupthis, but I'm goingtogroupalloftherestofoursectionsbecausethere's multiplepathsinthem.
Sowe'reagaingoingtowrapthisinsideof a group, movethisaround, putthe G atthebottomthere, andWewantthisheretobe a classwhichisgoingtobegroup, andthiswilljustbeourleftgroup.
Soinordertodothatanimation, we'regoingtoput a transformonourlike, Clayton, whichhas a transition, andthistransitionisgoingtobefor 50 milliseconds, andwe'rejustDewey's inandout, andweonlywanttotransformourtransitiontotransformproperty.
Soessentially, wheneverwechangetransform, it's gonnahave a 50 millisecondtransitionbetweenthetwodifferentstates, whichisgonnagiveus a reallyquickanimation, whichisgonnalookprettygood.
Andinordertomakeourbuttongrowto a sizeandthenshrinkbackdown, wewanttoselectourlikebuttonandwewanttodothiswheneverweapplytheclassofbigwewanttomend, changearetransformedandwewanttochangethisscale.