Jump to content


How to animate the height of the parent?

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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) =>
        { 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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.