",{"_key":496,"_type":53,"marks":497,"text":498},"f211b4781f658",[],".\n",[],{"_key":501,"_type":49,"children":502,"markDefs":511,"style":69},"6df372a1a5b6",[503,508],{"_key":504,"_type":53,"marks":505,"text":507},"6df372a1a5b60",[506],"62c5fdcb831a","Index.js code",{"_key":509,"_type":53,"marks":510,"text":107},"6df372a1a5b61",[],[512],{"_key":506,"_type":67,"href":513},"https://gist.github.com/emmabostian/1259dce3b2a55b9efa69b7fbb9fe7c05",{"_key":515,"_type":390,"alt":12,"caption":391},"06e07739ddec",{"_key":517,"_type":49,"children":518,"markDefs":523,"style":69},"0e08c8927437",[519],{"_key":520,"_type":53,"marks":521,"text":522},"0e08c89274370",[],"Now that our menu is rendering, let's add some state to determine whether or not our menu should be visible.\n",[],{"_key":525,"_type":49,"children":526,"markDefs":546,"style":69},"78c45f857c45",[527,531,534,538,542],{"_key":528,"_type":53,"marks":529,"text":530},"78c45f857c450",[],"Inside of ",{"_key":532,"_type":53,"marks":533,"text":473},"78c45f857c451",[170],{"_key":535,"_type":53,"marks":536,"text":537},"78c45f857c452",[],", add ",{"_key":539,"_type":53,"marks":540,"text":541},"78c45f857c453",[170],"{ useState }",{"_key":543,"_type":53,"marks":544,"text":545},"78c45f857c454",[]," to the React import.\n",[],{"_key":548,"_type":49,"children":549,"markDefs":557,"style":69},"582af170b136",[550,554],{"_key":551,"_type":53,"marks":552,"text":507},"582af170b1360",[553],"f6ec31e510b6",{"_key":555,"_type":53,"marks":556,"text":107},"582af170b1361",[],[558],{"_key":553,"_type":67,"href":559},"https://gist.github.com/emmabostian/4fd9abe350fec9a6397e0a09cb069a9a",{"_key":561,"_type":49,"children":562,"markDefs":576,"style":69},"d8f7112f4f78",[563,567,572],{"_key":564,"_type":53,"marks":565,"text":566},"d8f7112f4f780",[],"Next, let's ",{"_key":568,"_type":53,"marks":569,"text":571},"d8f7112f4f781",[570],"25bb436c1892","declare our state",{"_key":573,"_type":53,"marks":574,"text":575},"d8f7112f4f782",[]," above the return statement. Since our menu will not be visible by default, we'll initialize the state to false.\n",[577],{"_key":570,"_type":67,"href":578},"https://gist.github.com/emmabostian/cf37323548ac9aed6a3cddc171d3b2f1",{"_key":580,"_type":49,"children":581,"markDefs":586,"style":69},"4527f066cce7",[582],{"_key":583,"_type":53,"marks":584,"text":585},"4527f066cce70",[],"Now let's define our animation. We want the sidebar to fade in and slide in from the right when visible and fade out and slide out to the left when not visible.\n",[],{"_key":588,"_type":49,"children":589,"markDefs":602,"style":69},"deec471bbb8f",[590,594,598],{"_key":591,"_type":53,"marks":592,"text":593},"deec471bbb8f0",[],"To create this animation, we'll use react-spring's ",{"_key":595,"_type":53,"marks":596,"text":597},"deec471bbb8f1",[170],"useSpring",{"_key":599,"_type":53,"marks":600,"text":601},"deec471bbb8f2",[]," hook.\n",[],{"_key":604,"_type":49,"children":605,"markDefs":659,"style":69},"a48ab157d84c",[606,610,613,617,620,624,628,632,637,641,645,649,653,656],{"_key":607,"_type":53,"marks":608,"text":609},"a48ab157d84c0",[],"Import ",{"_key":611,"_type":53,"marks":612,"text":597},"a48ab157d84c1",[170],{"_key":614,"_type":53,"marks":615,"text":616},"a48ab157d84c2",[]," from ",{"_key":618,"_type":53,"marks":619,"text":251},"a48ab157d84c3",[170],{"_key":621,"_type":53,"marks":622,"text":623},"a48ab157d84c4",[]," and underneath the ",{"_key":625,"_type":53,"marks":626,"text":627},"a48ab157d84c5",[170],"useState",{"_key":629,"_type":53,"marks":630,"text":631},"a48ab157d84c6",[]," hook, ",{"_key":633,"_type":53,"marks":634,"text":636},"a48ab157d84c7",[635],"249ebd45c2a9","declare a new ",{"_key":638,"_type":53,"marks":639,"text":640},"a48ab157d84c8",[635,170],"const",{"_key":642,"_type":53,"marks":643,"text":644},"a48ab157d84c9",[]," named ",{"_key":646,"_type":53,"marks":647,"text":648},"a48ab157d84c10",[170],"rightSidebarAnimation",{"_key":650,"_type":53,"marks":651,"text":652},"a48ab157d84c11",[]," and set it equal to the result of calling ",{"_key":654,"_type":53,"marks":655,"text":597},"a48ab157d84c12",[170],{"_key":657,"_type":53,"marks":658,"text":107},"a48ab157d84c13",[],[660],{"_key":635,"_type":67,"href":661},"https://gist.github.com/emmabostian/07bcff4ee1c1b846733a520c294dde8d",{"_key":663,"_type":49,"children":664,"markDefs":676,"style":69},"53f65546cf1d",[665,669,672],{"_key":666,"_type":53,"marks":667,"text":668},"53f65546cf1d0",[],"Now we'll pass an object to react-spring's ",{"_key":670,"_type":53,"marks":671,"text":597},"53f65546cf1d1",[170],{"_key":673,"_type":53,"marks":674,"text":675},"53f65546cf1d2",[]," hook which defines the CSS properties we want to animate. In our case, we want to animate opacity and the menu's X-position.\n",[],{"_key":678,"_type":49,"children":679,"markDefs":684,"style":69},"dfac2ed1b5ef",[680],{"_key":681,"_type":53,"marks":682,"text":683},"dfac2ed1b5ef0",[],"We can use a ternary operator to decide when the opacity should be fully opaque (when visible) or transparent (when not visible) and when the X-position should be 0 (when visible) or 100% (when not visible).\n",[],{"_key":686,"_type":49,"children":687,"markDefs":695,"style":69},"9aba30e858c6",[688,692],{"_key":689,"_type":53,"marks":690,"text":507},"9aba30e858c60",[691],"01a088382de3",{"_key":693,"_type":53,"marks":694,"text":107},"9aba30e858c61",[],[696],{"_key":691,"_type":67,"href":697},"https://gist.github.com/emmabostian/c32636a64bb69397b17feff6a434f771",{"_key":699,"_type":49,"children":700,"markDefs":705,"style":69},"5fdc73fbf2af",[701],{"_key":702,"_type":53,"marks":703,"text":704},"5fdc73fbf2af0",[],"We also need to trigger the change in visibility. We'll do this by adding a button.\n",[],{"_key":707,"_type":49,"children":708,"markDefs":728,"style":69},"4e6d76c9efa4",[709,713,717,721,725],{"_key":710,"_type":53,"marks":711,"text":712},"4e6d76c9efa40",[],"Place a button element above the ",{"_key":714,"_type":53,"marks":715,"text":716},"4e6d76c9efa41",[170],"\u003CMenuRight />",{"_key":718,"_type":53,"marks":719,"text":720},"4e6d76c9efa42",[]," component. When clicked, the button will toggle the state of ",{"_key":722,"_type":53,"marks":723,"text":724},"4e6d76c9efa43",[170],"rightMenuVisible",{"_key":726,"_type":53,"marks":727,"text":498},"4e6d76c9efa44",[],[],{"_key":730,"_type":49,"children":731,"markDefs":736,"style":69},"81ea6546dca5",[732],{"_key":733,"_type":53,"marks":734,"text":735},"81ea6546dca50",[],"We can also use a ternary expression to change the label of the button to \"Close\" when the menu is open and \"Side menu\" when the menu is closed.\n",[],{"_key":738,"_type":49,"children":739,"markDefs":747,"style":69},"4cefd284d61f",[740,744],{"_key":741,"_type":53,"marks":742,"text":507},"4cefd284d61f0",[743],"0794064725a3",{"_key":745,"_type":53,"marks":746,"text":107},"4cefd284d61f1",[],[748],{"_key":743,"_type":67,"href":749},"https://gist.github.com/emmabostian/b0519c22a0f632774d0a49725451c2ee",{"_key":751,"_type":49,"children":752,"markDefs":786,"style":69},"601722ca132b",[753,757,762,766,770,774,778,782],{"_key":754,"_type":53,"marks":755,"text":756},"601722ca132b0",[],"Finally, ",{"_key":758,"_type":53,"marks":759,"text":761},"601722ca132b1",[760],"ccaee6ef060b","we have to pass ",{"_key":763,"_type":53,"marks":764,"text":765},"601722ca132b2",[760,170],"rightMenuAnimation",{"_key":767,"_type":53,"marks":768,"text":769},"601722ca132b3",[]," to the ",{"_key":771,"_type":53,"marks":772,"text":773},"601722ca132b4",[170],"MenuRight",{"_key":775,"_type":53,"marks":776,"text":777},"601722ca132b5",[]," component in order to get it to animate. We'll pass this as the ",{"_key":779,"_type":53,"marks":780,"text":781},"601722ca132b6",[170],"style",{"_key":783,"_type":53,"marks":784,"text":785},"601722ca132b7",[]," attribute:\n",[787],{"_key":760,"_type":67,"href":788},"https://gist.github.com/emmabostian/6be1301189b6d488d189757077e3cb0a",{"_key":790,"_type":49,"children":791,"markDefs":811,"style":69},"4917ca35acf7",[792,796,801,804,808],{"_key":793,"_type":53,"marks":794,"text":795},"4917ca35acf70",[],"Here is our ",{"_key":797,"_type":53,"marks":798,"text":800},"4917ca35acf71",[799],"9fcaed6cfba1","completed ",{"_key":802,"_type":53,"marks":803,"text":473},"4917ca35acf72",[799,170],{"_key":805,"_type":53,"marks":806,"text":807},"4917ca35acf73",[799]," file",{"_key":809,"_type":53,"marks":810,"text":309},"4917ca35acf74",[],[812],{"_key":799,"_type":67,"href":813},"https://gist.github.com/emmabostian/4bf99348e7cd40ca8d017a1fe4c1bfeb",{"_key":815,"_type":49,"children":816,"markDefs":821,"style":69},"d3b18cd8e3d5",[817],{"_key":818,"_type":53,"marks":819,"text":820},"d3b18cd8e3d50",[],"This is what your app should look like:\n",[],{"_key":823,"_type":390,"alt":12,"caption":391},"84e6dbec0d18",{"_key":825,"_type":49,"children":826,"markDefs":830,"style":69},"ffac3f3121d8",[827],{"_key":828,"_type":53,"marks":829,"text":391},"ffac3f3121d80",[],[],{"_key":832,"_type":49,"children":833,"markDefs":838,"style":69},"ff32a3394665",[834],{"_key":835,"_type":53,"marks":836,"text":837},"ff32a33946650",[],"We have to do a couple more things to get our animation to work:\n",[],{"_key":840,"_type":49,"children":841,"markDefs":860,"style":69},"bb8e74a94e49",[842,846,849,853,856],{"_key":843,"_type":53,"marks":844,"text":845},"bb8e74a94e490",[],"1. Pass the ",{"_key":847,"_type":53,"marks":848,"text":781},"bb8e74a94e491",[170],{"_key":850,"_type":53,"marks":851,"text":852},"bb8e74a94e492",[]," attribute to our ",{"_key":854,"_type":53,"marks":855,"text":773},"bb8e74a94e493",[170],{"_key":857,"_type":53,"marks":858,"text":859},"bb8e74a94e494",[]," component and add it as an attribute to the HTML element we want to animate.",[],{"_key":862,"_type":49,"children":863,"markDefs":868,"style":69},"1f95e9147e7f",[864],{"_key":865,"_type":53,"marks":866,"text":867},"1f95e9147e7f0",[],"2. Tell react-spring which element we want to animate.\n",[],{"_key":870,"_type":49,"children":871,"markDefs":897,"style":69},"9ee75641fb21",[872,876,879,883,886,890,894],{"_key":873,"_type":53,"marks":874,"text":875},"9ee75641fb210",[],"Back in ",{"_key":877,"_type":53,"marks":878,"text":269},"9ee75641fb211",[170],{"_key":880,"_type":53,"marks":881,"text":882},"9ee75641fb212",[],", pass ",{"_key":884,"_type":53,"marks":885,"text":781},"9ee75641fb213",[170],{"_key":887,"_type":53,"marks":888,"text":889},"9ee75641fb214",[]," as an argument to our component and add it as an attribute to our wrapping ",{"_key":891,"_type":53,"marks":892,"text":893},"9ee75641fb215",[170],"div",{"_key":895,"_type":53,"marks":896,"text":498},"9ee75641fb216",[],[],{"_key":899,"_type":49,"children":900,"markDefs":905,"style":69},"8a4c89609147",[901],{"_key":902,"_type":53,"marks":903,"text":904},"8a4c896091470",[],"To complete the second task and see our animation, we have to use a special HTML element to get our modal to animate.\n",[],{"_key":907,"_type":49,"children":908,"markDefs":955,"style":69},"0c1c8f082ba7",[909,913,917,921,925,929,933,937,940,943,947,951],{"_key":910,"_type":53,"marks":911,"text":912},"0c1c8f082ba70",[205],"Any element we want to be animated must be prefaced by ",{"_key":914,"_type":53,"marks":915,"text":916},"0c1c8f082ba71",[205,170],"animated",{"_key":918,"_type":53,"marks":919,"text":920},"0c1c8f082ba72",[205],".",{"_key":922,"_type":53,"marks":923,"text":924},"0c1c8f082ba73",[],", for example ",{"_key":926,"_type":53,"marks":927,"text":928},"0c1c8f082ba74",[170],"\u003Canimated.div>",{"_key":930,"_type":53,"marks":931,"text":932},"0c1c8f082ba75",[],". So let's import ",{"_key":934,"_type":53,"marks":935,"text":936},"0c1c8f082ba76",[170],"{ animated }",{"_key":938,"_type":53,"marks":939,"text":616},"0c1c8f082ba77",[],{"_key":941,"_type":53,"marks":942,"text":251},"0c1c8f082ba78",[170],{"_key":944,"_type":53,"marks":945,"text":946},"0c1c8f082ba79",[]," and change our ",{"_key":948,"_type":53,"marks":949,"text":950},"0c1c8f082ba710",[170],"\u003Cdiv>",{"_key":952,"_type":53,"marks":953,"text":954},"0c1c8f082ba711",[]," elements into animated divs.\n",[],{"_key":957,"_type":49,"children":958,"markDefs":967,"style":69},"56a9ed6d37b4",[959,964],{"_key":960,"_type":53,"marks":961,"text":963},"56a9ed6d37b40",[962],"ad516ed232c3","Menu.js code",{"_key":965,"_type":53,"marks":966,"text":107},"56a9ed6d37b41",[],[968],{"_key":962,"_type":67,"href":969},"https://gist.github.com/emmabostian/8213c86f20cddfcb6ec2be2f8f97984c",{"_key":971,"_type":49,"children":972,"markDefs":977,"style":69},"87a821ac4b7e",[973],{"_key":974,"_type":53,"marks":975,"text":976},"87a821ac4b7e0",[],"Your UI should now have a Side Menu button in the top right corner which will transition the menu on click.",[],{"_key":979,"_type":390,"alt":12,"caption":391},"93a5bf199951",{"_key":981,"_type":390,"alt":12,"caption":391},"dd696b27143c",{"_key":983,"_type":49,"children":984,"markDefs":989,"style":69},"a68170463ed6",[985],{"_key":986,"_type":53,"marks":987,"text":988},"a68170463ed60",[],"And that's it! Your menu should now be transitioning on click.\n",[],{"_key":991,"_type":113,"url":114},"210a21568ce9",{"_key":993,"_type":49,"children":994,"markDefs":1000,"style":69},"da7113e80daa",[995],{"_key":996,"_type":53,"marks":997,"text":999},"da7113e80daa0",[998],"ef1df6599eac","You can grab the full code here.",[1001],{"_key":998,"_type":67,"href":1002},"https://codesandbox.io/s/boring-sun-qe6kn?fontsize=14&hidenavigation=1&theme=dark",{"_key":1004,"_type":49,"children":1005,"markDefs":1010,"style":139},"74d53c10494f",[1006],{"_key":1007,"_type":53,"marks":1008,"text":1009},"74d53c10494f0",[],"Full-page menu",[],{"_key":1012,"_type":49,"children":1013,"markDefs":1018,"style":69},"9cb526a98e7b",[1014],{"_key":1015,"_type":53,"marks":1016,"text":1017},"9cb526a98e7b0",[],"Now let's build our full-page menu. This part of the tutorial will build off of the last section, so if you haven't taken it, you should grab the code at the end of the previous section.",[],{"_key":1020,"_type":390,"alt":12,"caption":391},"30f192e006be",{"_key":1022,"_type":49,"children":1023,"markDefs":1043,"style":69},"f432e63f6f5f",[1024,1028,1032,1036,1040],{"_key":1025,"_type":53,"marks":1026,"text":1027},"f432e63f6f5f0",[],"The markup for our full-page menu will be identical to that of the right menu, with the exception of the class name on the outer div being ",{"_key":1029,"_type":53,"marks":1030,"text":1031},"f432e63f6f5f1",[170],"menu--full",{"_key":1033,"_type":53,"marks":1034,"text":1035},"f432e63f6f5f2",[]," instead of ",{"_key":1037,"_type":53,"marks":1038,"text":1039},"f432e63f6f5f3",[170],"menu--right",{"_key":1041,"_type":53,"marks":1042,"text":498},"f432e63f6f5f4",[],[],{"_key":1045,"_type":49,"children":1046,"markDefs":1067,"style":69},"724b2e3688db",[1047,1051,1056,1060,1063],{"_key":1048,"_type":53,"marks":1049,"text":1050},"724b2e3688db0",[],"Add ",{"_key":1052,"_type":53,"marks":1053,"text":1055},"724b2e3688db1",[1054],"9c173f67f689","the following React component",{"_key":1057,"_type":53,"marks":1058,"text":1059},"724b2e3688db2",[]," to your `",{"_key":1061,"_type":53,"marks":1062,"text":269},"724b2e3688db3",[170],{"_key":1064,"_type":53,"marks":1065,"text":1066},"724b2e3688db4",[],"` file:\n",[1068],{"_key":1054,"_type":67,"href":1069},"https://gist.github.com/emmabostian/b8ffce100ececce72419798863968b44",{"_key":1071,"_type":49,"children":1072,"markDefs":1100,"style":69},"c486c1f83892",[1073,1076,1079,1083,1088,1092,1096],{"_key":1074,"_type":53,"marks":1075,"text":55},"c486c1f838920",[],{"_key":1077,"_type":53,"marks":1078,"text":473},"c486c1f838921",[170],{"_key":1080,"_type":53,"marks":1081,"text":1082},"c486c1f838922",[],", ",{"_key":1084,"_type":53,"marks":1085,"text":1087},"c486c1f838923",[1086],"08085307c01d","add our ",{"_key":1089,"_type":53,"marks":1090,"text":1091},"c486c1f838924",[1086,170],"MenuFull",{"_key":1093,"_type":53,"marks":1094,"text":1095},"c486c1f838925",[1086]," component",{"_key":1097,"_type":53,"marks":1098,"text":1099},"c486c1f838926",[]," to the import:\n",[1101],{"_key":1086,"_type":67,"href":1102},"https://gist.github.com/emmabostian/e1c032dee0e61bdbe2bdc1e4ce623104",{"_key":1104,"_type":49,"children":1105,"markDefs":1110,"style":69},"b4b814ab31e1",[1106],{"_key":1107,"_type":53,"marks":1108,"text":1109},"b4b814ab31e10",[],"Let's add another state to show and hide the full menu component.\n",[],{"_key":1112,"_type":49,"children":1113,"markDefs":1127,"style":69},"a523470a3bbe",[1114,1118,1123],{"_key":1115,"_type":53,"marks":1116,"text":1117},"a523470a3bbe0",[],"Underneath the right menu state definition ",{"_key":1119,"_type":53,"marks":1120,"text":1122},"a523470a3bbe1",[1121],"362816845608","add the following code",{"_key":1124,"_type":53,"marks":1125,"text":1126},"a523470a3bbe2",[],", which will initialize the visibility state of our full menu to false:\n",[1128],{"_key":1121,"_type":67,"href":1129},"https://gist.github.com/emmabostian/89814d310316de5bf9f28439387729ee",{"_key":1131,"_type":49,"children":1132,"markDefs":1137,"style":69},"2df6227de9c5",[1133],{"_key":1134,"_type":53,"marks":1135,"text":1136},"2df6227de9c50",[],"Now let's define our animation. We want our full page menu to start from an opacity of 0 and fade in to an opacity of 1. The menu will also start off the top of the screen (-100%) and transition from the top to take up the entirety of the viewport.\n",[],{"_key":1139,"_type":49,"children":1140,"markDefs":1160,"style":69},"c28d5d7d2996",[1141,1145,1148,1152,1157],{"_key":1142,"_type":53,"marks":1143,"text":1144},"c28d5d7d29960",[],"Underneath the ",{"_key":1146,"_type":53,"marks":1147,"text":765},"c28d5d7d29961",[170],{"_key":1149,"_type":53,"marks":1150,"text":1151},"c28d5d7d29962",[]," ",{"_key":1153,"_type":53,"marks":1154,"text":1156},"c28d5d7d29963",[1155],"ea8c6f845373","add the following",{"_key":1158,"_type":53,"marks":1159,"text":107},"c28d5d7d29964",[],[1161],{"_key":1155,"_type":67,"href":1162},"https://gist.github.com/emmabostian/3e1bcfee89be827742184b7e7db85c35",{"_key":1164,"_type":49,"children":1165,"markDefs":1179,"style":69},"cb7e21a53354",[1166,1170,1175],{"_key":1167,"_type":53,"marks":1168,"text":1169},"cb7e21a533540",[],"Let's ",{"_key":1171,"_type":53,"marks":1172,"text":1174},"cb7e21a533541",[1173],"56a16557eadc","add a button",{"_key":1176,"_type":53,"marks":1177,"text":1178},"cb7e21a533542",[]," to toggle the visibility of the full menu. Add this above the side menu button. We'll use the same concept of changing the button text to \"Close\" when the menu is visible and \"Full Menu\" when the menu is hidden.\n",[1180],{"_key":1173,"_type":67,"href":1181},"https://gist.github.com/emmabostian/16d8045aa902a57339b7260d22f2e589",{"_key":1183,"_type":49,"children":1184,"markDefs":1213,"style":69},"62e94044a717",[1185,1189,1194,1198,1201,1205,1209],{"_key":1186,"_type":53,"marks":1187,"text":1188},"62e94044a7170",[],"Lastly let's ",{"_key":1190,"_type":53,"marks":1191,"text":1193},"62e94044a7171",[1192],"34652615a283","add our component",{"_key":1195,"_type":53,"marks":1196,"text":1197},"62e94044a7172",[],", passing it our transition as the ",{"_key":1199,"_type":53,"marks":1200,"text":781},"62e94044a7173",[170],{"_key":1202,"_type":53,"marks":1203,"text":1204},"62e94044a7174",[]," attribute with our newly declared ",{"_key":1206,"_type":53,"marks":1207,"text":1208},"62e94044a7175",[170],"fullMenuTransition",{"_key":1210,"_type":53,"marks":1211,"text":1212},"62e94044a7176",[],". You can declare it before or after the side menu.\n",[1214],{"_key":1192,"_type":67,"href":1215},"https://gist.github.com/emmabostian/8a6dfef80cae29d5ccc902cedd9b32d3",{"_key":1217,"_type":49,"children":1218,"markDefs":1233,"style":69},"ccc662f31e9f",[1219,1223,1227,1230],{"_key":1220,"_type":53,"marks":1221,"text":1222},"ccc662f31e9f0",[],"Here is the ",{"_key":1224,"_type":53,"marks":1225,"text":800},"ccc662f31e9f1",[1226],"a328234f0503",{"_key":1228,"_type":53,"marks":1229,"text":473},"ccc662f31e9f2",[1226,170],{"_key":1231,"_type":53,"marks":1232,"text":309},"ccc662f31e9f3",[],[1234],{"_key":1226,"_type":67,"href":1235},"https://gist.github.com/emmabostian/e4e260041d535a9b217e58ed8957e452",{"_key":1237,"_type":49,"children":1238,"markDefs":1243,"style":69},"bc29206b0581",[1239],{"_key":1240,"_type":53,"marks":1241,"text":1242},"bc29206b05810",[],"And that’s it! Here is our completed full page menu!\n",[],{"_key":1245,"_type":390,"alt":12,"caption":391},"282a486dcaed",{"_key":1247,"_type":390,"alt":12,"caption":391},"cafdc63300c8",{"_key":1249,"_type":49,"children":1250,"markDefs":1259,"style":69},"20f4e4f48769",[1251,1255],{"_key":1252,"_type":53,"marks":1253,"text":999},"20f4e4f487690",[1254],"fadd6a2ebfc8",{"_key":1256,"_type":53,"marks":1257,"text":1258},"20f4e4f487691",[],"\n",[1260],{"_key":1254,"_type":67,"href":1002},{"_key":1262,"_type":113,"url":114},"9da39f2cdc73",{"_key":1264,"_type":49,"children":1265,"markDefs":1270,"style":86},"e71a3230ca29",[1266],{"_key":1267,"_type":53,"marks":1268,"text":1269},"e71a3230ca290",[],"Conclusion",[],{"_key":1272,"_type":49,"children":1273,"markDefs":1278,"style":69},"270e15c7883e",[1274],{"_key":1275,"_type":53,"marks":1276,"text":1277},"270e15c7883e0",[],"Animating a menu doesn’t have to be complicated! In the next tutorial we’ll build a modal which is mounted and unmounted from the DOM as well as an image gallery!\n",[],true,"2020/01/23","In the last article, we examined the basics of micro-interactions: what they are, why they’re important, and how to build one. In this tutorial, we’ll build something I have struggled with for many years: the animated navigation.",{"_type":390,"asset":1283},{"_ref":1284,"_type":1285},"image-b7239df79d9659f7172a412ba24cf22e78a9dde3-2547x1177-jpg","reference",{"code":1287,"language":1288},"\u003C!-- wp:paragraph -->\n\u003Cp>In \u003Ca href=\"https://stackoverflow.blog/2020/01/16/how-to-create-micro-interactions-with-react-spring-part-1/\">the last article\u003C/a>, we examined the basics of micro-interactions: what they are, why they’re important, and how to build one. In this tutorial, we’ll build something I have struggled with for many years: the animated navigation.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Animating navigation is something you’ll probably encounter if you’re a web developer, as our applications and websites need to be responsive, but it can be tricky.You can animate a navigation bar with CSS transitions; however, it’s a bit tedious to find the right bezier curve for the job.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>What we’ll build\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We’ll use react-spring’s useSpring hook to illustrate how you can build a full page navigation menu and a sidebar which slides in from the right.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Cem>\u003Ca href=\"https://codesandbox.io/s/react-spring-animated-menu-qe6kn\">Embed Code Sandbox\u003C/a>\u003C/em>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Ciframe src=\"https://codesandbox.io/embed/react-spring-animated-menu-qe6kn?fontsize=14&hidenavigation=1&theme=dark\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" title=\"React Spring Animated Menu\" allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\">\u003C/iframe>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>Defining the micro-interaction\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>In the previous blog, we looked at the pieces of a micro-interaction. Let’s define the interaction trigger, state definition, and animation definition for our navigation menu.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Interaction trigger\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The visibility of our menu will be triggered by clicking a hamburger menu and dismissed by clicking the X button inside of the menu.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>State definition\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Our menu will be in one of two states:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Ccode>visible\u003C/code>\u003C/li>\u003Cli>\u003Ccode>hidden\u003C/code>\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Animation definition\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We will build two menu animations:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>\u003Cstrong>Right menu\u003C/strong>, which will slide in from the right and fade in when visible and slide out towards the right and fade out when not visible.\u003C/li>\u003Cli>\u003Cstrong>Full page menu\u003C/strong>,\u003Cstrong> \u003C/strong>which will slide in from the top and fade in when visible and slide out towards the top and fade out when not visible.\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>Let’s build a menu\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>First, create a new \u003Ca href=\"http://codesandbox.io/\">React Code Sandbox\u003C/a> and add \u003Ccode>react-spring\u003C/code> as a dependency.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Next, create two new files: \u003Ccode>Menu.js\u003C/code> and \u003Ccode>menu.css\u003C/code> in the \u003Ccode>src\u003C/code> directory, and add the following code to \u003Ccode>menu.css\u003C/code>. This tutorial won’t cover how to style our menu items, so we’ve provided the code for you.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://gist.github.com/emmabostian/b93d63a402c31b3b7e093d59f98b323f\">Menu.css code\u003C/a>:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/b93d63a402c31b3b7e093d59f98b323f.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Then add \u003Ca href=\"https://gist.github.com/emmabostian/b94ee70bcf43b8352919cbf7137014fc\">the following CSS\u003C/a> to \u003Ccode>styles.css\u003C/code>:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/b94ee70bcf43b8352919cbf7137014fc.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Inside \u003Ccode>Menu.js\u003C/code>, import \u003Ca href=\"https://gist.github.com/emmabostian/471505f5830024e41c36e4f4578e3de0\">the following dependencies\u003C/a>:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/471505f5830024e41c36e4f4578e3de0.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We will create two menus:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>One that slides in from the right side\u003C/li>\u003Cli>One that is a full-page overlay\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh6.googleusercontent.com/KHIX0LQZEBJOvoVRIIvkUfYaOQQ_vM9JtMz3YwHMaaYmQGfQniZPU12Um7FK_3_mJjTDPwliR4ho1VG4W1RBmH_zrhwG_VaQWAomQAiE_Hn33t--R2ayreQa9D3msujggwsOepTE\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh6.googleusercontent.com/EjVSF_BRt3sOTLSPK33JUrDD6Yu7MBcPNHcb4pvEPKY78e5vEGtr1Fk-EOV0f6O1XSkw9JExZMdXv3Ez5gUJnJlr830mppMBv6lUYFJQvy_hEr9vViRheZ3Ih8tP81R2wAxtR16v\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Right Menu\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Let's create the right menu. Our menu will have four links:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:list -->\n\u003Cul>\u003Cli>Home\u003C/li>\u003Cli>About\u003C/li>\u003Cli>Work\u003C/li>\u003Cli>Contact\u003C/li>\u003C/ul>\n\u003C!-- /wp:list -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Add the following to \u003Ccode>Menu.js\u003C/code>:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/2cc171a1b1b462dbb3530de834f275f4.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Now, let's import our Menu component into the app and see it render.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>In \u003Ccode>index.js\u003C/code>, import the Menu component and replace the \u003Ccode>h1\u003C/code> and \u003Ccode>h2\u003C/code> elements from the Code Sandbox default starter with \u003Ccode><Menu />\u003C/code>.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://gist.github.com/emmabostian/1259dce3b2a55b9efa69b7fbb9fe7c05\">Index.js code\u003C/a>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/1259dce3b2a55b9efa69b7fbb9fe7c05.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh4.googleusercontent.com/x6sz59tITkPGJzkvyxSz-zADWOaPNKwV5-DBP0qcV4E6L0iiW7Vz56llaX4HWHIe0eJfyIrtw1rhyMR2b1J1F2NzrSiZCpNGsT8r22UbkBMR8Ig_CocXXq2D4NuIo-SfqUxCrwKL\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Now that our menu is rendering, let's add some state to determine whether or not our menu should be visible.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Inside of \u003Ccode>index.js\u003C/code>, add \u003Ccode>{ useState }\u003C/code> to the React import.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://gist.github.com/emmabostian/4fd9abe350fec9a6397e0a09cb069a9a\">Index.js code\u003C/a>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/4fd9abe350fec9a6397e0a09cb069a9a.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Next, let's \u003Ca href=\"https://gist.github.com/emmabostian/cf37323548ac9aed6a3cddc171d3b2f1\">declare our state\u003C/a> above the return statement. Since our menu will not be visible by default, we'll initialize the state to false.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/cf37323548ac9aed6a3cddc171d3b2f1.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Now let's define our animation. We want the sidebar to fade in and slide in from the right when visible and fade out and slide out to the left when not visible.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>To create this animation, we'll use react-spring's \u003Ccode>useSpring\u003C/code> hook.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Import \u003Ccode>useSpring\u003C/code> from \u003Ccode>react-spring\u003C/code> and underneath the \u003Ccode>useState\u003C/code> hook, \u003Ca href=\"https://gist.github.com/emmabostian/07bcff4ee1c1b846733a520c294dde8d\">declare a new \u003Ccode>const\u003C/code>\u003C/a> named \u003Ccode>rightSidebarAnimation\u003C/code> and set it equal to the result of calling \u003Ccode>useSpring\u003C/code>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/07bcff4ee1c1b846733a520c294dde8d.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Now we'll pass an object to react-spring's \u003Ccode>useSpring\u003C/code> hook which defines the CSS properties we want to animate. In our case, we want to animate opacity and the menu's X-position.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We can use a ternary operator to decide when the opacity should be fully opaque (when visible) or transparent (when not visible) and when the X-position should be 0 (when visible) or 100% (when not visible).\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://gist.github.com/emmabostian/c32636a64bb69397b17feff6a434f771\">Index.js code\u003C/a>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/c32636a64bb69397b17feff6a434f771.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We also need to trigger the change in visibility. We'll do this by adding a button.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Place a button element above the \u003Ccode><MenuRight />\u003C/code> component. When clicked, the button will toggle the state of \u003Ccode>rightMenuVisible\u003C/code>.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We can also use a ternary expression to change the label of the button to \"Close\" when the menu is open and \"Side menu\" when the menu is closed.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://gist.github.com/emmabostian/b0519c22a0f632774d0a49725451c2ee\">Index.js code\u003C/a>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/b0519c22a0f632774d0a49725451c2ee.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Finally, \u003Ca href=\"https://gist.github.com/emmabostian/6be1301189b6d488d189757077e3cb0a\">we have to pass \u003Ccode>rightMenuAnimation\u003C/code>\u003C/a> to the \u003Ccode>MenuRight\u003C/code> component in order to get it to animate. We'll pass this as the \u003Ccode>style\u003C/code> attribute:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/6be1301189b6d488d189757077e3cb0a.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Here is our \u003Ca href=\"https://gist.github.com/emmabostian/4bf99348e7cd40ca8d017a1fe4c1bfeb\">completed \u003Ccode>index.js\u003C/code> file\u003C/a>:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/4bf99348e7cd40ca8d017a1fe4c1bfeb.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>This is what your app should look like:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh3.googleusercontent.com/nzdZFDaxurt8AeUWXcuqR_pwY7b0SklBb7hJ_TYq7ZtWG40e34gwUjCYsedE-Dm_n7Swps3tBwV1-5Q9uN6XpBmZJ1i1TaUsUqgelu8BP6GCXV0dTzpIXFK0X8jUUi9SKYKHd0G-\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>We have to do a couple more things to get our animation to work:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>1. Pass the \u003Ccode>style\u003C/code> attribute to our \u003Ccode>MenuRight\u003C/code> component and add it as an attribute to the HTML element we want to animate.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>2. Tell react-spring which element we want to animate.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Back in \u003Ccode>Menu.js\u003C/code>, pass \u003Ccode>style\u003C/code> as an argument to our component and add it as an attribute to our wrapping \u003Ccode>div\u003C/code>.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>To complete the second task and see our animation, we have to use a special HTML element to get our modal to animate.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Cstrong>Any element we want to be animated must be prefaced by \u003Ccode>animated\u003C/code>.\u003C/strong>, for example \u003Ccode><animated.div>\u003C/code>. So let's import \u003Ccode>{ animated }\u003C/code> from \u003Ccode>react-spring\u003C/code> and change our \u003Ccode><div>\u003C/code> elements into animated divs.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://gist.github.com/emmabostian/8213c86f20cddfcb6ec2be2f8f97984c\">Menu.js code\u003C/a>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/8213c86f20cddfcb6ec2be2f8f97984c.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Your UI should now have a Side Menu button in the top right corner which will transition the menu on click.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh4.googleusercontent.com/0rwiaa00VMMDqO06ZPIy1xW6LqpZikk5LHU8kmnKM-g4W-qpfRTCNQf9v4fGTWbc_KXYATUlbKaPgQHowrvXI4ZuuXUUkTewSFQKb5xHzp6kWpToIHNjnecKaQgPgHmX9hl4ArLE\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh4.googleusercontent.com/3yGo2ubuCWqW6wF9Y9HMC7_M2Zbo5SqEZpfdgbMM_SNYxj9BYI8_2LsroXCEcrH_1Dp3_PuY8IAZ88z4YyAOQvZn7RjdLkdS6-nelZZzIlgLXeU3KTKMimIPN8qf28qdiPt0nVEd\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>And that's it! Your menu should now be transitioning on click.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Ciframe src=\"https://codesandbox.io/embed/react-spring-animated-menu-qe6kn?fontsize=14&hidenavigation=1&theme=dark\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" title=\"React Spring Animated Menu\" allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\">\u003C/iframe>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://codesandbox.io/s/boring-sun-qe6kn?fontsize=14&hidenavigation=1&theme=dark\">You can grab the full code here.\u003C/a>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:heading -->\n\u003Ch2>Full-page menu\u003C/h2>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Now let's build our full-page menu. This part of the tutorial will build off of the last section, so if you haven't taken it, you should grab the code at the end of the previous section.\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh6.googleusercontent.com/EjVSF_BRt3sOTLSPK33JUrDD6Yu7MBcPNHcb4pvEPKY78e5vEGtr1Fk-EOV0f6O1XSkw9JExZMdXv3Ez5gUJnJlr830mppMBv6lUYFJQvy_hEr9vViRheZ3Ih8tP81R2wAxtR16v\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>The markup for our full-page menu will be identical to that of the right menu, with the exception of the class name on the outer div being \u003Ccode>menu--full\u003C/code> instead of \u003Ccode>menu--right\u003C/code>.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Add \u003Ca href=\"https://gist.github.com/emmabostian/b8ffce100ececce72419798863968b44\">the following React component\u003C/a> to your `\u003Ccode>Menu.js\u003C/code>` file:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/b8ffce100ececce72419798863968b44.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>In \u003Ccode>index.js\u003C/code>, \u003Ca href=\"https://gist.github.com/emmabostian/e1c032dee0e61bdbe2bdc1e4ce623104\">add our \u003Ccode>MenuFull\u003C/code> component\u003C/a> to the import:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/e1c032dee0e61bdbe2bdc1e4ce623104.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Let's add another state to show and hide the full menu component.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Underneath the right menu state definition \u003Ca href=\"https://gist.github.com/emmabostian/89814d310316de5bf9f28439387729ee\">add the following code\u003C/a>, which will initialize the visibility state of our full menu to false:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/89814d310316de5bf9f28439387729ee.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Now let's define our animation. We want our full page menu to start from an opacity of 0 and fade in to an opacity of 1. The menu will also start off the top of the screen (-100%) and transition from the top to take up the entirety of the viewport.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Underneath the \u003Ccode>rightMenuAnimation\u003C/code> \u003Ca href=\"https://gist.github.com/emmabostian/3e1bcfee89be827742184b7e7db85c35\">add the following\u003C/a>:\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/3e1bcfee89be827742184b7e7db85c35.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Let's \u003Ca href=\"https://gist.github.com/emmabostian/16d8045aa902a57339b7260d22f2e589\">add a button\u003C/a> to toggle the visibility of the full menu. Add this above the side menu button. We'll use the same concept of changing the button text to \"Close\" when the menu is visible and \"Full Menu\" when the menu is hidden.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/16d8045aa902a57339b7260d22f2e589.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Lastly let's \u003Ca href=\"https://gist.github.com/emmabostian/8a6dfef80cae29d5ccc902cedd9b32d3\">add our component\u003C/a>, passing it our transition as the \u003Ccode>style\u003C/code> attribute with our newly declared \u003Ccode>fullMenuTransition\u003C/code>. You can declare it before or after the side menu.\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/8a6dfef80cae29d5ccc902cedd9b32d3.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Here is the \u003Ca href=\"https://gist.github.com/emmabostian/e4e260041d535a9b217e58ed8957e452\">completed \u003Ccode>index.js\u003C/code>\u003C/a>:\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Cscript src=\"https://gist.github.com/emmabostian/e4e260041d535a9b217e58ed8957e452.js\">\u003C/script>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>And that’s it! Here is our completed full page menu!\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh3.googleusercontent.com/TUZOw8S_WvZdsyBQW9U7IvXpWJeHml5tEeOoh1OFpUGf26RcziGCUPv2l7Gv0ty4nZchV0HRJXlqDuu1SbcqthLVOXXXIGNDaeaj6_weiEKpNni96bs0LP84n6F3bq0-FtTSi0Sk\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:image -->\n\u003Cfigure class=\"wp-block-image\">\u003Cimg src=\"https://lh4.googleusercontent.com/-FxmmkOCPHUIPnOw4ypj2Je7fTYkn4ItFDLzDLXtpVUa6JxFFzfcviqrn3G56XvJrmTcjjUQ-nMZbLkSrP2U4UD1RxISkYnpdRIZkF8TpO_2BZh7YqbyocEmmFhiEnZcThCE0EQD\" alt=\"\"/>\u003C/figure>\n\u003C!-- /wp:image -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https://codesandbox.io/s/boring-sun-qe6kn?fontsize=14&hidenavigation=1&theme=dark\">You can grab the full code here.\u003C/a>\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Ciframe src=\"https://codesandbox.io/embed/react-spring-animated-menu-qe6kn?fontsize=14&hidenavigation=1&theme=dark\" style=\"width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;\" title=\"React Spring Animated Menu\" allow=\"geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb\" sandbox=\"allow-modals allow-forms allow-popups allow-scripts allow-same-origin\">\u003C/iframe>\n\u003C!-- /wp:html -->\n\n\u003C!-- wp:heading {\"level\":1} -->\n\u003Ch1>Conclusion\u003C/h1>\n\u003C!-- /wp:heading -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Animating a menu doesn’t have to be complicated! In the next tutorial we’ll build a modal which is mounted and unmounted from the DOM as well as an image gallery!\u003Cbr>\u003C/p>\n\u003C!-- /wp:paragraph -->","html","2020-01-23T13:48:00.000Z",{"current":1291},"micro-interactions-with-react-spring-part-2",[1293,1300,1305,1310,1314],{"_createdAt":1294,"_id":1295,"_rev":1296,"_type":1297,"_updatedAt":1294,"slug":1298,"title":1299},"2023-05-23T16:43:21Z","wp-tagcat-animation","9HpbCsT2tq0xwozQfkc4ih","blogTag",{"current":1299},"animation",{"_createdAt":1294,"_id":1301,"_rev":1296,"_type":1297,"_updatedAt":1294,"slug":1302,"title":1304},"wp-tagcat-bulletin",{"current":1303},"bulletin","Bulletin",{"_createdAt":1294,"_id":1306,"_rev":1296,"_type":1297,"_updatedAt":1294,"slug":1307,"title":1309},"wp-tagcat-code-for-a-living",{"current":1308},"code-for-a-living","Code for a Living",{"_createdAt":1294,"_id":1311,"_rev":1296,"_type":1297,"_updatedAt":1294,"slug":1312,"title":1313},"wp-tagcat-react",{"current":1313},"react",{"_createdAt":1294,"_id":1315,"_rev":1296,"_type":1297,"_updatedAt":1294,"slug":1316,"title":1318},"wp-tagcat-stackoverflow",{"current":1317},"stackoverflow","Stackoverflow","Micro-interactions with react-spring: Part 2",[1321,1327,1333,1339],{"_id":1322,"publishedAt":1323,"slug":1324,"sponsored":12,"title":1326},"370eca08-3da8-4a13-b71e-5ab04e7d1f8b","2025-08-28T16:00:00.000Z",{"_type":10,"current":1325},"moving-the-public-stack-overflow-sites-to-the-cloud-part-1","Moving the public Stack Overflow sites to the cloud: Part 1",{"_id":1328,"publishedAt":1329,"slug":1330,"sponsored":1279,"title":1332},"e10457b6-a9f6-4aa9-90f2-d9e04eb77b7c","2025-08-27T04:40:00.000Z",{"_type":10,"current":1331},"from-punch-cards-to-prompts-a-history-of-how-software-got-better","From punch cards to prompts: a history of how software got better",{"_id":1334,"publishedAt":1335,"slug":1336,"sponsored":12,"title":1338},"65472515-0b62-40d1-8b79-a62bdd2f508a","2025-08-25T16:00:00.000Z",{"_type":10,"current":1337},"making-continuous-learning-work-at-work","Making continuous learning work at work",{"_id":1340,"publishedAt":1341,"slug":1342,"sponsored":12,"title":1344},"1b0bdf8c-5558-4631-80ca-40cb8e54b571","2025-08-21T14:00:25.054Z",{"_type":10,"current":1343},"research-roadmap-update-august-2025","Research roadmap update, August 2025",{"count":1346,"lastTimestamp":1347},2,"2023-05-25T09:47:03Z",["Reactive",1349],{"$sarticleModal":1350},false,["Set"],["ShallowReactive",1353],{"sanity-7KPZz0K42B3xo_5oVcN5n7qWy20_8oTlMLaj_SDEygg":-1,"sanity-comment-wp-post-14803-1756478864038":-1},"/2020/01/23/micro-interactions-with-react-spring-part-2"]