GSAP Flip Plugin animation not working, element moves correctly but no animation

[eoja]

There is an .activeColor div I’m using for a background active color on filters. On click the .activeColor div should animate to the clicked filter. When a filter is clicked the div moves to the clicked filter, but does not animate to the new position.

I’m new to GSAP, what am I missing?

Codepen demo with animation not working:

GSAP Flip Test

let { Col, Row } = ReactBootstrap

if (typeof window !== undefined) {
  gsap.registerPlugin(Flip)
}

const App = () => {
  const filters = React.useRef(null),
        activeFilter = React.useRef(null),
        q = gsap.utils.selector(filters)
   
  React.useEffect(() => {
    q(".col").forEach( filter => {
      filter.addEventListener("click", filterItems)
    })
  })
  
  function filterItems(e) {
    const state = Flip.getState(q(".col")),
          target = e.target.tagName === "P" ? e.target.parentElement : e.target
    target.appendChild(activeFilter.current)
    Flip.from(state, {
      duration: 1,
      ease: "power1.inOut",
      scale: true,
      nested: true
    })
  }
  
  return (
    <div>
      <p>.activeColor div should animate to clicked filter.</p>
      <Row className="filters" ref={filters}>
        <Col className="filterContainer" role="button">
          <p className="filter">All</p>
          <div className="activeFilter" ref={activeFilter}></div>
        </Col>
        <Col className="filterContainer" role="button">
          <p className="filter">Filter 1</p>
        </Col>
        <Col className="filterContainer" role="button">
          <p className="filter">Filter 2</p>
        </Col>
        <Col className="filterContainer" role="button">
          <p className="filter">Filter 3</p>
        </Col>
        <Col className="filterContainer" role="button">
          <p className="filter">Filter 4</p>
        </Col>
        <Col className="filterContainer" role="button">
          <p className="filter">Filter 5</p>
        </Col>
      </Row>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById("app"))

[lasjorg]

Shouldn’t it be .activeFilter for the state, or did I misunderstand what should happen?

const state = Flip.getState(q(".activeFilter"))

[eoja]

Thanks, that is the problem, I was getting the wrong state. And the “q” isn’t necessary then either.

const state = Flip.getState(".activeFilter")
Or, with the ref
const state = Flip.getState(activeFilter.current)
Both work in the codepen demo. In my actual use case with Gatsby.js I needed to use the ref.