Help with GSAP Flip animation on nested images

JavaScript
1

I’m trying to filter images with GSAP Flip plugin similar to this:

I’m using React-Bootstap Row and Col for positioning the images with an Image element nested in each Col which I gave the class name of .imageCol. I am animating each .imageCol.

The problem is .imageCol has no height without the image element, and the height of the Image changes depending on screen size. So, when .imageCol animates in the Images stack on top of each other then jump down screen into place at the end of the animation .

Also, the white Container height does not animate as the images do and I’m not sure how to handle that.

I’ve been stuck for days, here is my Codepen:

function filterItems(e) {
    const filterState = Flip.getState(activeFilter.current),
          filterTarget = e.target.tagName === "P" ? e.target.parentElement : e.target,
          imageState = Flip.getState(qImages(".imageCol")),
          images = qImages(".imageCol")

    let clicked
    
    // return if user clicks activeFilter else assign clicked
    if (filterTarget === activeFilter.current) {
      return
    } else {
      clicked = filterTarget.firstElementChild.innerText
    }
    
    // animate activeFilter background color
    filterTarget.appendChild(activeFilter.current)
    
    Flip.from(filterState, {
      duration: .5,
      ease: "power1.inOut",
      scale: true
    })
    
    //animate images in / out by filter
    images.forEach( (image, i) => {
      if (sources[i].filters.includes(clicked) || clicked === "All") {
        image.style.display = "block"
      } else {
        image.style.display = "none"
      }
    })
    
    Flip.from(imageState, {
      duration: 1,
      ease: "power1.inOut",
      stagger: .08,
      nested: true,
      absoluteOnLeave: true,
      onEnter: el => gsap.fromTo(el, {
        opacity: 0,
        scale: 0
      }, {
        opacity: 1,
        scale: 1,
        duration: 1
      }),
      onLeave: el => gsap.to(el, {
        opacity: 0,
        scale: 0,
        duration: 1
      })
    })
    
  }
2

I don’t have it quite figured out exactly but getting close. Basically, I have to get the image height after it loads and set that height to the parent element height and do the same on resize.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.