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:
- Recording the initial state (position, size, rotation) of your element.
- Letting you make any structural or style changes.
- Calculating the difference between the original and final states.
- 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.
2. Set the FLIP Target
In the FLIP section, define the target element that represents the end state of the animation.
3. 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
| Setting | Description |
|---|---|
| Absolute Positioning | Enables absolute positioning during animation to prevent layout shifts and improve performance. |
| Animate Scale | Includes scaling transformations in the animation. Disable for position-only transitions. |
| Nested Elements | Allows child elements inside the target to animate as well, ideal for complex, nested layouts. |
| Simple Mode | A performance-optimized version of FLIP. Disable it for advanced control like nested animations. |
