Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

| GreenSock
70

The Flip Plugin seamlessly animates between states dynamically with minimal code. The video explains more...

VIDEO

All you need to do is get the initial state using Flip.getState(targets), make whatever changes you'd like to the DOM or styling, and then call Flip.from(state). GSAP handles the rest! Of course like all GreenSock tools, there's a rich API for finessing things and getting exactly the look you want.

"FLIP" is an animation technique that stands for "First", "Last", "Invert", "Play" and was coined by Paul Lewis. Here's a demo of how it works:

Feature highlights

  • Nested transforms? No problem! Most FLIP libraries only calculate basic offsets assuming no transforms beyond x/y, so a scaled parent breaks things. Rotations certainly aren't allowed. GSAP's Flip plugin just works.
  • Set absolute: true to make elements use position: absolute during the flip. This solves layout challenges with things like flexbox and grid.
  • One flip can handle multiple elements and even stagger them.
  • Resize via width/height properties (default) or scaleX/scaleY (scale: true)
  • You get the full power of GSAP under the hood, so you can use any ease, define special properties like onComplete, onUpdate, repeat, yoyo, and even add() other animations with total control of timing, etc.
  • Apply a CSS class during the flip with toggleClass. It'll be removed at the end of the flip.
  • Flip.fit() repositions/resizes one element to fit perfectly on top another (or even a previous state of the same element). It's as easy as Flip.fit(".box1", ".box2"). Add tween properties to make it animate over time, likeFlip.fit(".box1", ".box2", {duration: 1, ease: "power2.inOut", absolute: true}).
  • Compensate for nested offsets, like if a container element is getting flipped along with some of its children and you don't want the offsets to compound (nested: true)
  • Smoothly handles interruptions.
  • Flip one element to another and have them cross-fade (fade: true). For example, a thumbnail image flips to the full-resolution, full-screen image that's a different element completely, but the user just sees the thumbnail seamlessly transition into the full-screen one. Simply set the same data-flip-id attribute on both to match them up.
  • onEnter and onLeave callbacks for when elements enter or leave (like if the flip senses a display: none toggle and there's no matching target to swap), making it easy to elegantly animate on/off elements.

Simple example

Flex example

Advanced example

Learn and see more

Get your hands on the FlipPlugin

The FlipPlugin is a bonus plugin for Club GreenSock members ("Shockingly Green" and "Business Green" levels). It's our way of showing our gratitude to those who are fueling innovation at GreenSock. To download the FlipPlugin, just log into your account dashboard and grab the latest version of GSAP.

Don't have Club GreenSock? Try the FlipPlugin for free on CodePen! There's a special but fully-functional version of the FlipPluginthat we link to in our demos in our FlipPlugin Collection on CodePen, so feel free to fork any of them and take the FlipPlugin for a spin. Note: the special version of the plugin will only work on the CodePen domain. To find out more about the many benefits of being a Club GreenSock member swing on by the club page and be sure to check out the other premium plugins.

Get an all-access pass to premium plugins, offers, and more!

Join the Club



User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest

×