Animation Video Tutorial, the FLIP technique

In this video I propose you to discover the FLIP animation technique. This technique allows you to simply animate the complex position changes of your HTML elements.

FLIP?

How the technique FLIP proposes to solve the problem? The secret lies in the acronym:

• FFirst: We first memorize the position of the elements in the page.
• Theast: We apply the desired changes to the DOM and we recalculate the new positions of the elements.
• Inverse: We apply transformations on all of our elements to place them in the initial position (and thus give the impression to the user that nothing has moved).
• Play: We animate the element by removing the transformation so that the element takes its final position.

Operation

The operation of this method is extremely simple and requires only a few changes to the code.

/ **
 * Move a todo into a new list
 *
 * @param {HTMLElement} todo - Element to move
 * @param {HTMLElement} list - Destination element
 * @param {HTMLElement ()} todos - list of elements
 * /
function move (todo, list, todos) {
  // FIRST, we memorize the position of the elements
  Flip.read (todos)
  // We modify the DOM
  list.appendChild (todo)
  // On FLIP!
  Flip.play (todos)
}