Close lids of a SVG Box with CSS animation

Question

I have been looking at the tutorials and documentation for CSS animations but I cannot figure out how to flip a box lid along a specific axis using CSS on SVG. My goal is to make the lid close one after another on the box. Here are my SVG snippets

Each lid is a path element whose class is "box-lid" with the respective directional class name. The lids in the north and south lids, at the same time, close before the west and east ones. Furthermore, The lid should be rotated 180 deg along the diagonal axes which are the side of the top of the box. I have looked at the rotate3D function but I could not animate the lids to the desired result. So I am looking forward to the tips and advice and please excuse my bad English.

user_1533592 · Answer

You are probably looking for an animated closure that shows the tops of the lid hinging on an axis, however, I will share the outline I gave you in the comments as it may help you to find a solution you are happy with.

I used the x axis attribute to move the lid to closed position using two data-set attributes and an array of object for state => opened / closed and side north / south / east / west.

For the data-state we add data-state="opened" as the initial value for x. For the data-side we add the class defined side north, south, east and west for each corresponding side.

Then in JavaScript we instantiate and define the array of objects boxLids for reference when changing the state of the lids in our callbacks conditional. The callback function has a for loop to iterate over the lid elements and check each state and side. First we check the state, if it is opened we reference the values using the data-side attributes value in the object => boxLids[0]['closed'][lids[i].dataset.side], basically this will be boxLids array => [0] then the state we want to find the values for ['closed'], then the side [lids[i].dataset.side] => north for example. As we are iterating using a for loop with the index each lid element will be iterated over and changed accordingly => lids[i]. We set the attributes value using lids[i].setAttribute('x', sides) where sides = boxLids[0]['closed'][lids[i].dataset.side]. Lastly we change the attribute data-state using the dataset property to closed => lids[i].dataset.state = 'closed'.

Each time one of the lids is clicked, the event listener is fired and checking the state, changing the state and x attribute according to the data-state value set with in the element. If opened, close, if closed, open...

// instantiate an array of objects that defined the state of the box lids in 
// terms of opened and closed, then what the x axis is of each lid
const boxLids = [{
  "closed": {
    "north": "263.16525",
    "west": "182.15384",
    "south": "292.62885",
    "east": "152.65482"
  },
  "opened": {
    "north": "233.16525",
    "west": "212.15384",
    "south": "322.62885",
    "east": "122.65482"
  }
}]
// get all nodes with the class selector of .box-lids
const lids = document.querySelectorAll('.box-lid')

// call back for the event listener
function closeLids() {
  // iterate over each element in the nodeList using for loop
  for (let i = 0; i < lids.length; i++) {
    // consitional to see the "state" of the lids "opened" or "closed"
    if (lids[i].dataset.state === 'opened') {
      // if data.state === opened we close each lid by setting the 
      // x attribute in the rect element to the closed state from 
      // the array of objects
      let sides = boxLids[0]['closed'][lids[i].dataset.side]      
      lids[i].setAttribute('x', sides)
      // make sure to set the data attribute of data-state to closed
      lids[i].dataset.state = 'closed'
    } else {
      // else the state is closed so lets open each lid using the
      // object state opened values for each side
      let sides = boxLids[0]['opened'][lids[i].dataset.side]
      lids[i].setAttribute('x', sides)
      // make sure to reset the data attribute of data-state to opened
      lids[i].dataset.state = 'opened'
    }
  }
}

// iterate over each node and perform an event for click
lids.forEach(lid => {
  // pass in the callback function closeLids
  lid.addEventListener('click', closeLids)
})

.east {
  transition: all 50ms ease-out;
}

.west {
  transition: all 100ms ease-out;
}

.north {
  transition: all 150ms ease-out;
}

.south {
  transition: all 200ms ease-out;
}

user_5407581 · Answer

I tried doing path morphing with anime.js and it worked 80% but the layers orders turned out to be a problem. You can see the lid on the south as it closes, the lid is underneath the east lid in the SVG code so the closing looks pretty odd unless I make the animation finish quickly. Is there a way to manipulate SVG layer orders? Here are my codes

   const lidN = {
      path2:"m 98.792632,171.86423 0.04854,13.28552 -53.303611,26.5272 -0.04854,-13.28552 z",
      path3:"m 123.36108,197.37762 -24.519912,-12.22787 -53.303611,26.5272 24.519916,12.22787 z"
   }
   const lidS = {
      path2: "m 152.33287,211.67687 0.0485,-13.73978 -53.303611,26.5272 -0.04853,13.73978 z",
      path3: "m 152.33287,211.67687 -27.54373,-13.73978 -53.303613,26.5272 27.543736,13.73978 z"
   }
   const lidE = {
      path2: "m 99.078269,171.86381 -0.04854,13.28552 53.303611,26.5272 0.0485,-13.28552 z",
      path3: "m 72.419749,198.39294 26.60998,-13.24361 53.303611,26.5272 -26.61002,13.24361 z"
   }
   const lidW = {
      path2: "m 45.631926,211.75474 -0.04853,-16.5746 53.303612,26.5272 0.04853,16.5746 z",
      path3: "m 45.631926,211.75474 26.787779,-13.3618 53.303615,26.5272 -26.787782,13.3618 z"
   }
   window.addEventListener("click",()=>{
      const timeline1 = anime.timeline({
      autoplay: true,
      duration: 500,
   })
   const timeline2 = anime.timeline({
      autoplay: true,
      duration: 500,
   })
    timeline1.add({
       targets: '.lidn',
       d:[
         
         {value: lidN.path2},
         {value: lidN.path3}
       ],
       easing: "linear",
    }).add({
      targets: '.lide',
       d:[
         
         {value: lidE.path2},
         {value: lidE.path3}
       ],
       easing: "linear",
    })
    timeline2.add({
       targets: ".lids",
       d:[
   
         {value: lidS.path2},
         {value: lidS.path3}
       ],
       easing: "linear",
    }).add({
      targets: '.lidw',
       d:[
         
         {value: lidW.path2},
         {value: lidW.path3}
       ],
       easing: "linear",
    })
   })





    
    
    
    Document

I used Inkscape to edit the path into two stages, then I copied the values in the d attributes in each stage of the path shape and morph the lid.

Close lids of a SVG Box with CSS animation

2 Answers