Animating HTML Components Utilizing FLIP

In fashionable internet apps you come throughout the necessity to animate HTML parts. Be it to visualise the transition between a number of lists, switching positions in a single checklist, rising parts on choice, and so forth. There are a lot of circumstances to make your app really feel extra ‘flashy’ by animating stuff.

Whereas doint that you’ll discover that there shall be some inquiries to reply. How can we take care of the factor altering the DOM. When and methods to provoke the animation. Ought to we clone the factor or simply reuse it. By no means I am suggesting FLIP will simply reply all these questions. However it provides you with a great place to begin to make the administration of the animation a bit simpler.

The trick is to not begin with the weather beginning place, however with it is closing place. All this may get clearer as we describe what FLIP means:

FLIP stands for First, Final, Invert and Play and was coined by Paul Lewis.

• First: The weather place to begin. Collect this info from the DOM.
• Final: The weather closing place. Additionally retrieve this info from the DOM.
• Invert: Calculate the transformation (scale, rotate, translate, and so forth.) from the primary to the final place and reverse it. So if you must animate 100px to the fitting, use -100px on the x axis. It will show your factor on the identical place because it was earlier than.
• Play: Begin the animation. It’ll now transition from the reversed beginning place to the present place. Nothing elese must be achieved.

Let’s check out an instance:

const flip = () => {
  // retrieve the block to animate
  const block1 = doc.querySelector<HTMLDivElement>('#block1')

  // an array with 3 goal parts
  const positions: Component[] = [
    document.querySelector('.middle'),
    document.querySelector('.end'),
    document.querySelector('.start'),
  ]
  let index = 0

  if (block1) {
    // animate the block on click on
    block1.addEventListener('click on', () => {
      // FLIP - First
      // retrieve the place of the block at its place to begin
      const begin = block1.getBoundingClientRect()

      // Transfer the factor to its vacation spot
      positions[index].appendChild(block1)

      // FLIP - Final
      // retrieve the place of the block at its closing place
      const finish = block1.getBoundingClientRect()

      // FLIP - Invert
      // Calculate the change from the begin to the tip place
      const dx = begin.left - finish.left
      const dy = begin.high - finish.high
      const dh = begin.peak - finish.peak
      const dw = begin.width - finish.width

      // FLIP - Play
      // Provoke the animation
      block1.animate(
        [
          {
            transformOrigin: 'top left',
            transform: `translate(${dx}px, ${dy}px)`,
            height: `${dh}px`,
            width: `${dw}px`,
          },
          {
            transformOrigin: 'top left',
            transform: 'none',
          },
        ],
        { period: 400, fill: 'each', easing: 'ease-in-out' }
      )

      index = (index + 1) % positions.size
    })
  }
}

When enjoying with FLIP you would possibly run into some issues although:

• When scaling the weather it could get fairly arduous to take care of rounded borders.
• Rotating factor shouldn’t be as straightforward because it sounds.
• Coping with a number of animations might be somewhat tough.
• Generally you do not wish to change the weather width or peak, however somewhat use the size transformation. However this may make it tougher to take care of rounded borders or font-sizes, and so forth.

In any case, there’s a good GSAP plugin awailable to take care of these points and extra.

Picture by Liam Shaw on Unsplash