FLIP

The FLIP (First, Last, Invert, Play) plugin allows you to create smooth, natural transitions between UI states even when there are significant DOM changes that would typically cause elements to jump or reflow.

FLIP works by:

1. Recording the initial state (position, size, rotation) of your element.
2. Letting you make any structural or style changes.
3. Calculating the difference between the original and final states.
4. Applying animated transforms to seamlessly bridge the gap.

This makes complex animations simple to implement. FLIP handles the heavy lifting so you can focus on design, not tedious calculations.

How to Use FLIP

Location:

You’ll find FLIP under the Animation panel, in the Functional section.

1. Select Your Element

Use the standard Animation Selector to choose the element you want to animate. Elements can be animated while they are transitioning from their original state to the final state.

2. Set the FLIP Origin (FROM)

While on the From tab, target the origin element inside the FLIP section's selector field to define the starting point of the FLIP animation.

3. Set the FLIP Target (TO)

Now, in the To tab, you can once again open the FLIP section where this time you choose the target element. This will be the element where your original element will FLIP to.

4. Choose Animation Options

Direction: Select in or out depending on whether the element is entering or exiting. better performance with basic animations. Disable this for advanced features like nested elements.

Easing: Choose from various easing types to customize the animation feel.

FLIP Settings Explained