{"id":5,"date":"2025-08-16T04:04:29","date_gmt":"2025-08-16T04:04:29","guid":{"rendered":"http:\/\/103.250.186.101\/~learnbyanimation\/?page_id=5"},"modified":"2025-09-08T02:35:19","modified_gmt":"2025-09-08T02:35:19","slug":"chemistry-animations","status":"publish","type":"page","link":"https:\/\/learn-by-animation.com\/?page_id=5","title":{"rendered":"Hunsdiecker Reaction Animation"},"content":{"rendered":"\n

here we put chemistry reaction animation of Hunsdiecker Reaction<\/p>\n\n\n\n\n\n\n\n \n \n The Hunsdiecker Reaction!<\/title>\n <style>\n \/* --- Basic Setup & Fonts --- *\/\n .hunsdiecker-body {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n background-color: #f0f8ff;\n color: #333;\n padding: 20px;\n border-radius: 10px;\n }\n\n \/* --- The Main Stage (The Beaker) --- *\/\n #animation-container {\n width: 100%;\n max-width: 600px;\n height: 400px;\n border: 5px solid #b0c4de;\n border-top: none;\n border-radius: 0 0 30px 30px;\n background: linear-gradient(to top, #e6f7ff, #ffffff);\n position: relative;\n overflow: hidden;\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\n margin: auto;\n }\n\n .hunsdiecker-h1 {\n color: #2e86c1;\n text-align: center;\n margin-bottom: 20px;\n }\n\n \/* --- The Molecules & Atoms --- *\/\n .molecule {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px;\n border-radius: 20px;\n transition: all 1s ease-in-out;\n }\n \n .atom {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: white;\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\n position: relative;\n }\n \n #silver-carboxylate { top: 150px; left: 50px; }\n .r-group { background-color: #9b59b6; }\n .coo { background-color: #e74c3c; }\n .ag { background-color: #bdc3c7; border: 2px solid #7f8c8d; }\n \n #bromine-molecule { top: 150px; right: 50px; }\n .br { background-color: #c0392b; }\n \n #final-product { top: 200px; left: 250px; opacity: 0; }\n #co2 { top: 150px; left: 280px; opacity: 0; }\n #agbr { bottom: 10px; left: 100px; opacity: 0; }\n \n .bond {\n height: 4px;\n background-color: #34495e;\n position: absolute;\n transform-origin: left;\n transition: all 0.5s ease;\n }\n #bond1 { width: 20px; left: 50px; }\n #bond2 { width: 20px; left: 104px; }\n #bond-br { width: 20px; left: 50px; }\n\n \/* --- Controls & Explanation --- *\/\n #controls { margin-top: 20px; display: flex; gap: 15px; }\n \n .hunsdiecker-btn {\n padding: 10px 20px;\n font-size: 16px;\n cursor: pointer;\n border: none;\n border-radius: 5px;\n background-color: #3498db;\n color: white;\n transition: background-color 0.3s;\n }\n .hunsdiecker-btn:hover { background-color: #2980b9; }\n .hunsdiecker-btn:disabled { background-color: #bdc3c7; cursor: not-allowed; }\n \n #explanation-box {\n margin-top: 20px;\n width: 95%;\n max-width: 600px;\n min-height: 60px;\n padding: 15px;\n border: 2px dashed #3498db;\n background-color: #ecf0f1;\n border-radius: 10px;\n text-align: center;\n font-size: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* --- Animation Classes & Keyframes --- *\/\n @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }\n .shake { animation: shake 0.3s linear 3; }\n\n @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }\n .pop { animation: pop 0.5s ease; }\n \n @keyframes bubble-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-300px) rotate(360deg); opacity: 0; } }\n .bubble { animation: bubble-up 3s ease-in forwards; }\n\n @keyframes precipitate { from { transform: translateY(0); opacity: 1; } to { transform: translateY(200px); opacity: 1; } }\n .precipitate { animation: precipitate 2s ease-in forwards; }\n <\/style>\n<\/head>\n<div class=\"hunsdiecker-body\">\n <h1 class=\"hunsdiecker-h1\">The Fun Hunsdiecker Reaction!<\/h1>\n\n <div id=\"animation-container\">\n <!-- Starting Materials -->\n <div id=\"silver-carboxylate\" class=\"molecule\">\n <div class=\"atom r-group\">R<\/div><div id=\"bond1\" class=\"bond\"><\/div>\n <div class=\"atom coo\">COO<\/div><div id=\"bond2\" class=\"bond\"><\/div>\n <div id=\"ag-atom\" class=\"atom ag\">Ag<\/div>\n <\/div>\n <div id=\"bromine-molecule\" class=\"molecule\">\n <div id=\"br1\" class=\"atom br\">Br<\/div><div id=\"bond-br\" class=\"bond\"><\/div>\n <div id=\"br2\" class=\"atom br\">Br<\/div>\n <\/div>\n <!-- Products -->\n <div id=\"final-product\" class=\"molecule\"><div class=\"atom r-group\">R<\/div><div class=\"bond\" style=\"width:20px; left:50px;\"><\/div><div class=\"atom br\">Br<\/div><\/div>\n <div id=\"co2\" class=\"molecule\"><div class=\"atom coo\">CO\u2082<\/div><\/div>\n <div id=\"agbr\" class=\"molecule\"><div class=\"atom ag\">Ag<\/div><div class=\"bond\" style=\"width:20px; left:50px;\"><\/div><div class=\"atom br\">Br<\/div><\/div>\n <\/div>\n\n <div id=\"explanation-box\"><p id=\"explanation-text\">Let’s see what happens when a Silver Carboxylate meets Bromine!<\/p><\/div>\n\n <div id=\"controls\">\n <button id=\"start-btn\" class=\"hunsdiecker-btn\">Start Animation<\/button>\n <button id=\"reset-btn\" class=\"hunsdiecker-btn\">Reset<\/button>\n <\/div>\n\n <script>\n (function() {\n const container = document.querySelector('.hunsdiecker-body');\n if (!container) return;\n\n const startBtn = container.querySelector('#start-btn');\n const resetBtn = container.querySelector('#reset-btn');\n const explanationText = container.querySelector('#explanation-text');\n \n const animationContainer = container.querySelector('#animation-container');\n const initialHTML = animationContainer.innerHTML;\n\n let silverCarboxylate, agAtom, cooAtom, rGroup, bond1, bond2,\n bromineMolecule, br1, br2, bondBr, finalProduct, co2, agbr;\n\n function setupElements() {\n silverCarboxylate = container.querySelector('#silver-carboxylate');\n agAtom = container.querySelector('#ag-atom');\n cooAtom = silverCarboxylate.querySelector('.coo');\n rGroup = silverCarboxylate.querySelector('.r-group');\n bond1 = container.querySelector('#bond1');\n bond2 = container.querySelector('#bond2');\n bromineMolecule = container.querySelector('#bromine-molecule');\n br1 = container.querySelector('#br1');\n br2 = container.querySelector('#br2');\n bondBr = container.querySelector('#bond-br');\n finalProduct = container.querySelector('#final-product');\n co2 = container.querySelector('#co2');\n agbr = container.querySelector('#agbr');\n }\n\n setupElements(); \/\/ Initial setup\n\n const sleep = ms => new Promise(res => setTimeout(res, ms));\n\n const animationSteps = [\n { text: \"First, the Bromine molecule approaches the Silver Carboxylate.\", action: async () => { bromineMolecule.style.transform = 'translateX(-150px)'; }},\n { text: \"One Bromine atom is attracted to the Silver atom. They're about to form Silver Bromide (AgBr)!\", action: async () => { br2.style.transform = 'translateX(-80px) translateY(20px)'; agAtom.classList.add('shake'); }},\n { text: \"POP! The Silver Bromide (AgBr) precipitate is formed and sinks to the bottom.\", action: async () => { agAtom.classList.remove('shake'); agAtom.style.opacity = '0'; bond2.style.opacity = '0'; br2.style.opacity = '0'; bondBr.style.opacity = '0'; agbr.style.opacity = '1'; agbr.classList.add('precipitate', 'pop'); }},\n { text: \"This leaves a very unstable intermediate. The bond between Oxygen and Bromine is weak...\", action: async () => { silverCarboxylate.style.transform = 'translateX(120px)'; bromineMolecule.style.transform = 'translateX(-200px) translateY(-50px)'; br1.style.transform = 'translateX(100px)'; }},\n { text: \"SNAP! The weak bond breaks, creating radicals. This is where the magic happens!\", action: async () => { cooAtom.classList.add('shake'); await sleep(1000); cooAtom.classList.remove('shake'); rGroup.style.transform = 'translateX(-50px)'; bond1.style.transform = 'scaleX(0)'; }},\n { text: \"The carboxyl radical is unstable and quickly releases Carbon Dioxide (CO\u2082)... FIZZ!\", action: async () => { cooAtom.style.opacity = '0'; co2.style.opacity = '1'; co2.classList.add('bubble'); }},\n { text: \"Now we have an R\u2022 radical and a Br\u2022 radical. They quickly combine!\", action: async () => { rGroup.style.transform = 'translateX(80px) translateY(50px)'; br1.style.transform = 'translateX(-80px) translateY(50px)'; }},\n { text: \"And... we have our final product: an Alkyl Bromide (R-Br)! The reaction is complete.\", action: async () => { rGroup.style.opacity = '0'; br1.style.opacity = '0'; finalProduct.style.opacity = '1'; finalProduct.classList.add('pop'); }}\n ];\n\n async function runAnimation() {\n startBtn.disabled = true;\n for (const step of animationSteps) {\n explanationText.textContent = step.text;\n await step.action();\n await sleep(2500);\n }\n explanationText.textContent = \"All done! Press Reset to see it again.\";\n resetBtn.disabled = false;\n }\n\n function resetAnimation() {\n animationContainer.innerHTML = initialHTML;\n setupElements();\n explanationText.textContent = \"Let's see what happens when a Silver Carboxylate meets Bromine!\";\n startBtn.disabled = false;\n resetBtn.disabled = true;\n }\n\n startBtn.addEventListener('click', () => {\n runAnimation();\n resetBtn.disabled = true; \/\/ Disable reset until animation finishes\n });\n resetBtn.addEventListener('click', resetAnimation);\n resetBtn.disabled = true; \/\/ Initially disabled\n })();\n <\/script>\n<\/div>\n<\/html>\n<!-- End of Hunsdiecker Reaction Animation Code -->\n","protected":false},"excerpt":{"rendered":"<p>here we put chemistry reaction animation of Hunsdiecker Reaction The Hunsdiecker Reaction! The Fun Hunsdiecker Reaction! R COO Ag Br Br R Br CO\u2082 Ag Br Let’s see what happens when a Silver Carboxylate meets Bromine! Start Animation Reset<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":37,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/5","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5"}],"version-history":[{"count":6,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions"}],"predecessor-version":[{"id":220,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/5\/revisions\/220"}],"up":[{"embeddable":true,"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=\/wp\/v2\/pages\/37"}],"wp:attachment":[{"href":"https:\/\/learn-by-animation.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}