https://iinteractive.com/_next/static/chunks/774-605f1dd3824d8829.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[774],{8774:(s,a,e)=>{e.d(a,{default:()=>t});var c=e(5155),n=e(2115);function i(s,a){let e=document.querySelector(s);if(!e)return;let c=document.querySelector("html, body"),n=e.offsetTop;if(c.scrollTop===n)return;let i=n-c.scrollTop,t=Math.PI/(a/10),r=0,l=window.pageYOffset,m=setInterval(()=>{Math.abs(n-c.scrollTop)>=Math.abs(i/5)?c.scrollTop=l+i*(.5-.5*Math.cos((r+=1)*t)):(clearInterval(m),c.scrollTop=n)},10)}function t(){let s=(0,n.useRef)(null),[a,e]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{let s="/content/blog-post-assets/taking-css-animations-to-the-danger-zone/taking-css-animations-to-the-danger-zone.css";if(!document.querySelector('link[href="'.concat(s,'"]'))){let a=document.createElement("link");return a.rel="stylesheet",a.href=s,document.head.appendChild(a),()=>{a.parentNode&&a.parentNode.removeChild(a)}}},[]),(0,n.useEffect)(()=>{let s=document.querySelector(".view-animation"),a=document.querySelector(".finish-article"),e=document.querySelector(".finish-reading"),c=s=>(s.preventDefault(),e&&(e.style.display="inline"),i("#animation",1500),!1),n=s=>(s.preventDefault(),i(".view-animation",1500),e&&(e.style.display="none"),!1);return s&&s.addEventListener("click",c),a&&a.addEventListener("click",n),()=>{s&&s.removeEventListener("click",c),a&&a.removeEventListener("click",n)}},[]),(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)("div",{id:"animation",className:"mb-8",children:[(0,c.jsxs)("p",{style:{display:"none"},className:"finish-reading",children:[(0,c.jsx)("a",{href:"#structure",className:"finish-article",children:"Finish reading the post"})," ","to see how I did it."]}),(0,c.jsx)("button",{id:"play-archer",onClick:()=>{s.current&&(s.current.classList.contains("start-archer")?(s.current.classList.remove("start-archer"),setTimeout(()=>{s.current&&s.current.classList.add("start-archer")},2e3)):(s.current.classList.add("start-archer"),e(!0)))},className:"group bg-gradient-to-r from-ii-dark-blue-800 to-ii-light-blue-600 text-white px-8 py-4 rounded-2xl hover:from-ii-dark-blue-900 hover:to-ii-light-blue-500 transition-all duration-300 inline-flex items-center font-bold shadow-ii-lg hover:shadow-ii-xl transform hover:-translate-y-1",children:a?"Replay":"Play"})]}),(0,c.jsx)("div",{className:"wrap-archer",children:(0,c.jsx)("div",{className:"aspect-ratio-archer",children:(0,c.jsxs)("div",{ref:s,className:"main-archer content-archer",children:[(0,c.jsxs)("div",{className:"dot-archer",children:[(0,c.jsx)("div",{className:"trail-archer"}),(0,c.jsx)("div",{className:"trail-cover-archer"}),(0,c.jsx)("div",{className:"cp-bolt"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/cp-flash.svg",alt:"flash",className:"cp-flash"})]}),(0,c.jsxs)("div",{className:"scene-1-archer",children:[(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/leg-left.svg",alt:"leg-left",className:"left-leg-img"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/leg-right.svg",alt:"leg-right",className:"right-leg-img"}),(0,c.jsx)("div",{className:"left-leg"}),(0,c.jsxs)("div",{className:"clock-archer",children:[(0,c.jsxs)("div",{className:"clock-hands",children:[(0,c.jsx)("div",{className:"clock-center"}),(0,c.jsx)("div",{className:"small-hand-container",children:(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/small-hand.svg",alt:"Small Hand",className:"small-hand"})}),(0,c.jsx)("div",{className:"big-hand-container",children:(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/big-hand.svg",alt:"Big Hand",className:"big-hand"})})]}),(0,c.jsxs)("div",{className:"numbers-archer",children:[(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-1.svg",alt:"1",className:"num-1-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-2.svg",alt:"2",className:"num-2-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-3.svg",alt:"3",className:"num-3-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-4.svg",alt:"4",className:"num-4-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-5.svg",alt:"5",className:"num-5-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-6.svg",alt:"6",className:"num-6-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-7.svg",alt:"7",className:"num-7-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-8.svg",alt:"8",className:"num-8-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-9.svg",alt:"9",className:"num-9-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-10.svg",alt:"10",className:"num-10-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-11.svg",alt:"11",className:"num-11-archer"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/num-12.svg",alt:"12",className:"num-12-archer"})]}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/jet.svg",alt:"jet",className:"jet-img"})]}),(0,c.jsx)("div",{className:"right-leg"})]}),(0,c.jsxs)("div",{className:"scene-2-archer",children:[(0,c.jsx)("div",{className:"kick-img"}),(0,c.jsxs)("div",{className:"container-scene-2-archer",children:[(0,c.jsx)("div",{className:"high-kick",children:(0,c.jsx)("div",{className:"high-kick-box"})}),(0,c.jsxs)("div",{className:"bars-archer",children:[(0,c.jsxs)("div",{className:"bars-group-1-archer",children:[(0,c.jsx)("div",{className:"bar-1-archer"}),(0,c.jsx)("div",{className:"bar-2-archer"}),(0,c.jsx)("div",{className:"bar-3-archer"}),(0,c.jsx)("div",{className:"bar-4-archer"}),(0,c.jsx)("div",{className:"bar-5-archer"})]}),(0,c.jsxs)("div",{className:"bars-group-2-archer",children:[(0,c.jsx)("div",{className:"bar-6-archer"}),(0,c.jsx)("div",{className:"bar-7-archer"}),(0,c.jsx)("div",{className:"bar-8-archer"}),(0,c.jsx)("div",{className:"bar-9-archer"}),(0,c.jsx)("div",{className:"bar-10-archer"})]}),(0,c.jsxs)("div",{className:"bars-group-3-archer",children:[(0,c.jsx)("div",{className:"bar-11-archer"}),(0,c.jsx)("div",{className:"bar-12-archer"}),(0,c.jsx)("div",{className:"bar-13-archer"}),(0,c.jsx)("div",{className:"bar-14-archer"}),(0,c.jsx)("div",{className:"bar-15-archer"}),(0,c.jsx)("div",{className:"bar-16-archer"}),(0,c.jsx)("div",{className:"bar-17-archer"})]})]}),(0,c.jsxs)("div",{className:"hjb-blue-boxes",children:[(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/h-jon-benjamin.svg",alt:"H. Jon Benjamin",className:"hjb-text"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/hjb-gun-blast.svg",alt:"hjb-gun-blast",className:"hjb-gun-blast"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/hjb-gun.svg",alt:"hjb-gun",className:"hjb-gun-img"}),(0,c.jsx)("div",{className:"hjb-blue-1"}),(0,c.jsx)("div",{className:"hjb-blue-2"}),(0,c.jsx)("div",{className:"hjb-blue-3"}),(0,c.jsx)("div",{className:"hjb-blue-4"}),(0,c.jsx)("div",{className:"hjb-blue-5"}),(0,c.jsx)("div",{className:"hjb-blue-6"})]})]})]}),(0,c.jsxs)("div",{className:"scene-3-archer",children:[(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/judy-greer.svg",alt:"Judy Greer",className:"jg-text"}),(0,c.jsxs)("div",{className:"jg-box",children:[(0,c.jsx)("div",{className:"jg-bead-1"}),(0,c.jsx)("div",{className:"jg-bead-2"}),(0,c.jsx)("div",{className:"jg-bead-3"}),(0,c.jsx)("div",{className:"jg-bead-4"}),(0,c.jsx)("div",{className:"jg-bead-5"}),(0,c.jsx)("div",{className:"jg-bead-6"}),(0,c.jsx)("div",{className:"jg-bead-7"}),(0,c.jsx)("div",{className:"jg-bead-8"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/jg-img.svg",alt:"jg",className:"jg-img"})]}),(0,c.jsx)("div",{className:"heart-archer heart-left"}),(0,c.jsx)("div",{className:"heart-archer heart-right"})]}),(0,c.jsx)("div",{className:"scene-4-archer",children:(0,c.jsxs)("div",{className:"container-scene-4-archer",children:[(0,c.jsxs)("div",{className:"cp-intro",children:[(0,c.jsxs)("div",{className:"cp-left",children:[(0,c.jsx)("div",{className:"cp-box-1"}),(0,c.jsx)("div",{className:"cp-box-2"}),(0,c.jsx)("div",{className:"cp-box-3"})]}),(0,c.jsxs)("div",{className:"cp-right",children:[(0,c.jsx)("div",{className:"cp-box-4"}),(0,c.jsx)("div",{className:"cp-box-5"}),(0,c.jsx)("div",{className:"cp-box-6"})]})]}),(0,c.jsxs)("div",{className:"cp-main",children:[(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/chris-parnell.svg",alt:"Chris Parnell",className:"cp-text"}),(0,c.jsxs)("div",{className:"cp-box",children:[(0,c.jsx)("div",{className:"cp-img"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/cp-phone.svg",alt:"cp-phone",className:"cp-phone"})]})]})]})}),(0,c.jsxs)("div",{className:"scene-5-archer",children:[(0,c.jsx)("div",{className:"at-text-perspective",children:(0,c.jsx)("div",{className:"at-text-container",children:(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/aisha-tyler.svg",alt:"Aisha Tyler",className:"at-text"})})}),(0,c.jsxs)("div",{className:"container-scene-5-archer",children:[(0,c.jsxs)("div",{className:"at-intro",children:[(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/archer-hands-up.svg",alt:"archer-hands-up",className:"archer-hands-up-img"}),(0,c.jsx)("div",{className:"at-box-1"}),(0,c.jsx)("div",{className:"at-box-2"}),(0,c.jsx)("div",{className:"at-box-3"})]}),(0,c.jsxs)("div",{className:"at-main",children:[(0,c.jsx)("div",{className:"at-gun",children:(0,c.jsx)("div",{className:"at-gun-blast"})}),(0,c.jsx)("div",{className:"at-box-4"}),(0,c.jsx)("div",{className:"at-box-5"}),(0,c.jsx)("div",{className:"at-box-6"})]})]})]}),(0,c.jsxs)("div",{className:"scene-6-archer",children:[(0,c.jsx)("div",{className:"cannonball-run-img"}),(0,c.jsxs)("div",{className:"container-scene-6-archer",children:[(0,c.jsxs)("div",{className:"jw-intro",children:[(0,c.jsxs)("div",{className:"jw-boxes-group-1",children:[(0,c.jsx)("div",{className:"jw-box-1"}),(0,c.jsx)("div",{className:"jw-box-2"}),(0,c.jsx)("div",{className:"jw-box-3"})]}),(0,c.jsxs)("div",{className:"jw-boxes-group-2",children:[(0,c.jsx)("div",{className:"jw-box-4"}),(0,c.jsx)("div",{className:"jw-box-5"}),(0,c.jsx)("div",{className:"jw-box-6"})]}),(0,c.jsxs)("div",{className:"jw-boxes-group-3",children:[(0,c.jsx)("div",{className:"jw-box-7"}),(0,c.jsx)("div",{className:"jw-box-8"}),(0,c.jsx)("div",{className:"jw-box-9"})]})]}),(0,c.jsxs)("div",{className:"jw-main",children:[(0,c.jsxs)("div",{className:"jw-text",children:[(0,c.jsx)("div",{className:"jw-text-1",children:(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/and.svg",alt:"and"})}),(0,c.jsx)("div",{className:"jw-text-2",children:(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/jessica-walter.svg",alt:"Jessica Walter"})})]}),(0,c.jsxs)("div",{className:"jw-box-10",children:[(0,c.jsx)("div",{className:"cannonball-img"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/jw-glass.svg",alt:"jw-glass",className:"jw-glass"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/jw.svg",alt:"jw",className:"jw-img"}),(0,c.jsx)("div",{className:"jw-splash"})]})]})]})]}),(0,c.jsxs)("div",{className:"scene-7-archer",children:[(0,c.jsx)("div",{className:"archer-end-img"}),(0,c.jsxs)("div",{className:"ar-text",children:[(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/archer-a.svg",alt:"A",className:"letter-1"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/archer-r1.svg",alt:"R",className:"letter-2"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/archer-c.svg",alt:"C",className:"letter-3"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/archer-h.svg",alt:"H",className:"letter-4"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/archer-e.svg",alt:"E",className:"letter-5"}),(0,c.jsx)("img",{src:"/content/images/blogs/taking-css-animations-to-the-danger-zone/archer-r2.svg",alt:"R",className:"letter-6"})]}),(0,c.jsxs)("div",{className:"ar-boxes",children:[(0,c.jsx)("div",{className:"ar-box-1",children:(0,c.jsx)("div",{className:"ar-girls-bg"})}),(0,c.jsx)("div",{className:"ar-box-2",children:(0,c.jsx)("div",{className:"ar-girls-bg"})})]})]})]})})})]})}}}]);