https://egghead.io/_next/static/chunks/pages/learn/javascript/the-dom/NodesScroller-1600b6ed161daa5e.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1799],{10610:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/learn/javascript/the-dom/NodesScroller",function(){return i(84778)}])},26394:(e,t,i)=>{"use strict";i.d(t,{Ay:()=>a,WV:()=>n});var r=i(48385);let o={xs:375,sm:640,md:768,lg:1024,xl:1280,"2xl":1440,"3xl":1920};o.sm,o.md,o.lg,o.xl,o.sm,o.md;let n="@media (max-width: ".concat(o.lg-1,"px)");o.xl;let s=(0,r.A)(o),a=()=>{let e=s(),t="xs"==e,i="sm"==e||t,r="md"==e||i,o="lg"==e||r,n="xl"==e||o,a="2xl"==e||n;return{xs:t,sm:i,md:r,lg:o,xl:n,xl2:a,xl3:"3xl"==e||a}}},84778:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>l});var r=i(8051),o=i(41627),n=i(25172),s=i(56686),a=i(26394);function l(){let e=(0,o.useRef)(null),t=(0,o.useRef)(null),i=(0,o.useRef)(null),l=(0,o.useRef)(null),d=(0,o.useRef)(null),c=(0,o.useRef)(null),g="The nodes in the DOM tree are like a family tree. They have parents, children, and sibling nodes";return(0,o.useEffect)(()=>{s.ScrollTrigger.matchMedia({"(min-width: 1024px)":function(){let r=n.gsap.timeline({scrollTrigger:{trigger:[e.current],start:"top top",scrub:!0,pin:[e.current],pinSpacing:!0}}),o=n.gsap.timeline({scrollTrigger:{trigger:[t.current],scrub:!0,start:"top 70%"}});o.to([i.current],{opacity:1}).to([l.current],{opacity:1}).to([i.current],{opacity:0}).to([l.current],{opacity:0}).to([d.current],{opacity:1}).to([d.current],{opacity:0}).to([c.current],{opacity:1}),r.add(o)}}),s.ScrollTrigger.matchMedia({"(min-width: 320px)":function(){let r=n.gsap.timeline({scrollTrigger:{trigger:[e.current],start:"top top",scrub:!0}}),o=n.gsap.timeline({scrollTrigger:{trigger:[t.current],scrub:!0,start:"top 70%"}});o.to([i.current],{opacity:1,duration:.3}).to([l.current],{opacity:1,duration:.3}).to([i.current],{opacity:0,duration:.3}).to([l.current],{opacity:0,duration:.3}).to([d.current],{opacity:1,duration:1}).to([d.current],{opacity:0,duration:.5}).to([c.current],{opacity:1,duration:.5}),r.add(o)}})},[]),(0,r.jsxs)("div",{css:{width:"150%",marginLeft:"-25%",height:"3400px",display:"flex",flexDirection:"row",paddingTop:"1em",marginTop:"-3%",marginBottom:"135%",[a.WV]:{marginLeft:0,width:"100%",flexDirection:"column",marginBottom:"130%",zIndex:0}},children:[(0,r.jsxs)("div",{ref:e,css:{width:"60%",position:"relative",display:"flex",justifyContent:"flex-end",[a.WV]:{width:"100%",justifyContent:"center",height:"auto",marginBottom:"10em",position:"sticky",top:0}},children:[(0,r.jsx)("img",{alt:g,style:{maxHeight:"90vh",position:"absolute",top:0,zIndex:0},src:"https://res.cloudinary.com/dg3gyk0gu/image/upload/v1600099812/egghead-next-ebombs/wtf-DOM/dom-tree.jpg"}),(0,r.jsx)("img",{ref:i,alt:g,css:{maxHeight:"90vh",position:"absolute",top:0,opacity:0,zIndex:1},src:"https://res.cloudinary.com/dg3gyk0gu/image/upload/v1600099798/egghead-next-ebombs/wtf-DOM/dom-nodes-1.png"}),(0,r.jsx)("img",{ref:l,alt:g,css:{maxHeight:"90vh",position:"absolute",top:0,opacity:0,zIndex:2},src:"https://res.cloudinary.com/dg3gyk0gu/image/upload/v1600099804/egghead-next-ebombs/wtf-DOM/dom-nodes-2.png"}),(0,r.jsx)("img",{ref:d,alt:g,css:{maxHeight:"90vh",position:"absolute",top:0,opacity:0,zIndex:1},src:"https://res.cloudinary.com/dg3gyk0gu/image/upload/v1600099804/egghead-next-ebombs/wtf-DOM/dom-nodes-3.png"}),(0,r.jsx)("img",{ref:c,alt:g,css:{maxHeight:"90vh",position:"absolute",top:0,opacity:0,zIndex:2},src:"https://res.cloudinary.com/dg3gyk0gu/image/upload/v1600099804/egghead-next-ebombs/wtf-DOM/dom-nodes-4.png"})]}),(0,r.jsx)("div",{ref:t,css:{width:"40%",display:"flex",flexDirection:"column",justifyContent:"flex-end",paddingLeft:"4em",marginTop:"80vh",[a.WV]:{width:"100%",paddingLeft:0,justifyContent:"center"}},children:["Each element in the HTML like paragraphs, images, and divs are represented by “nodes.”",'The nodes have relationships with other nodes, and can have “parents,” “children,” and “siblings. You can think of these relationships as you would with any family tree. "Children” of the same “Parent” are “Siblings."'].map(e=>(0,r.jsx)("span",{className:"rounded-md shadow-md max-w-lg px-8 py-6 border-gray-300 m-auto z-20 bg-white",css:{marginBottom:"270%"},children:e}))})]})}n.gsap.registerPlugin(s.ScrollTrigger)}},e=>{e.O(0,[8243,6592,636,6593,8792],()=>e(e.s=10610)),_N_E=e.O()}]);