Video Tutorial Animate Your Components with Flip Toolkit View

In this video I propose to discover how to set up animations based on the FLIP technique with VueJS and the view-flip-toolkit library (based on react-flip-toolkit).

To follow this tutorial you can download the basic code used in the video.


View-flip-toolkit relies on the use of 2 components

  • Pinball serves as a container and allows you to configure the behavior of the animation. This component uses a property FlipKey which will have to be modified when a change of structure is made.
  • Flipped memorizes the position of the elements to be animated. Each element must have an attribute flipId unique to identify it.

Here is a small example with a randomly reordered list.