How to animate the height of the parent?

[overdrivemachines]

Clicking on a button triggers the number of item elements in a container div. I am animating the item elements using gsap flip. When the number of item elements reduces, the container div resizes to become smaller. However this resize happens too quick.  While the item elements are animating they appear to be outside the container div which I don't want. I want the container div to resize slowly such that they always contain the item elements inside. I want to green box to always be around the items. I do not want the items over the text as shown in the attached pic.

See the Pen wvxXKBa by overdrivemachines (@overdrivemachines) on CodePen.

[Rodrigo]

Hi @overdrivemachines and welcome to the GreenSock forums!

 

Just create another Flip instance for the container:

function toggleBlue() {
  const containerState = Flip.getState(".container");
  const state = Flip.getState(items);
  items.forEach((i) => {
    if (i.classList.contains("blue")) {
      i.style.display = flag ? "block" : "none";
    }
  });
  flag = !flag;

  Flip.from(state, {
    duration: 1,
    scale: true,
    ease: "power1.inOut",
    onEnter: (elements) =>
      gsap.fromTo(
        elements,
        { opacity: 0, scale: 0 },
        { opacity: 1, scale: 1, duration: 1 }
      ),
    onLeave: (elements) =>
      gsap.to(elements, { opacity: 0, scale: 0, duration: 1 })
  });
  Flip.from(containerState, {
    duration: 1,
    ease: "power1.inOut",
  });
}

Hopefully that's what want to do. Let us know if you have more questions.

Happy Tweening!

[overdrivemachines]

Thank you it works