• Services
    • Headless Ecommerce Development
    • Ecommerce UI/UX Design
    • Agency Support Services
    • Platforms
    • Shopify Plus
    • BigCommerce
    • Craft CMS
    • Shogun Frontend
    • ButterCMS
  • Case Studies
  • Blog
  • About
  • Contact
  • Animation
  • gsap
  • Frontend
  • Development
  • Web Design
Flip Plugin  |  Read time 3 Minutes

Flip Plugin

|  Read time 3 Minutes

Default profile avatar
By Yuliia Shmidt
Flip

Animating with the Flip Plugin for GSAP

Flip plugin is one of the most advanced and  one of the most advanced plugins that lets you easily animate elements and smoothly change their position is no longer a members-only plugin! Greensock made GSAP Flip plugin free in the 3.9 release. This animation concept takes your web development experience to the next level. Flip plugin lets you seamlessly transition between two states even if there are changes to the structure of the DOM that would normally cause elements to jump. This is called layout shift, which can reduce your site score in Google or other search engines. It is surprisingly easy to code because all the heavy lifting is already done for you.

Flip plugin can give you some serious animation superpowers once you learn to think in terms of "FLIP", an acronym for "First", "Last", "Invert", "Play". Using this plugin lets you set the initial CSS (First) for an element, and the final state (Last). Flip will automatically animate the element so it can move, resize, rotate, and change however it needs. You can easily reverse this animation (Invert), or let it run similarly to a GSAP timeline (Play). Let’s dive into it!

“Flip records the current position/size/rotation of your elements, then you make whatever changes you want, and then Flip applies offsets to make them LOOK like they never moved/resized/rotated and then animates the removal of those offsets!” (Flip. Greensock. https://greensock.com/docs/v3/...)

Let’s add some magic to these cards! We are going to move these cards around just by adding a couple lines of code.


Flip screenshot
Flip screenshot

First, we have to include the gsap library.

screenshot 1

What we’ll do next – we will add a class to some of the images, let’s call it “.relocate”, and we’ll move it to “.insert” div later.

Screenshot 2
Screenshot 3
Screenshot 4

The next step will be to add javascript to our file.

Screenshot 5

Gsap also has their own utilities that can get them all for you, just like document.querySelectorAll.

Screenshot 6

Let’s import Flip plugin of 3.9 release as well.

Screenshot 7

Next we will need to set a functionality that will put all our images with class “.relocate” in “insert”. First, let’s register our plugin on the top of our script.

Screenshot 8

Step 1. Capture the state

Screenshot 9

Flip's getState method is called to collect data about the item's current size and position. This gets stored in a variable before applying other DOM edits, style changes, and so on.

Step 2. Make the changes.

After capturing the initial state data, we need to append the nodes to the ".insert” container.

Screenshot 10

Step 3. FLIP!

Screenshot 12

I added repeat with a value of “-1”, which means repeat infinitely and repeatDelay with value of “2” that will delay our animation in 2 seconds.

This example is just an introduction to what you can really achieve by adding this plugin to your project. Reading more documentation and watching tutorials will allow you to create immersive animations that can drastically change the overall experience. Read the documentation here , imagine some animation that you would like to create, use your creativity and start to play around. I hope that I gave you some inspiration, now it’s your turn.

Good luck and have fun!

Helpful resources:

  • Codepen example

  • GSAP Flip plugin docs

  • Flip showcase

  • Flip how-to demos

Flip Plugin
Electric Enjin
  • Craft CMS Partner
  • Shogun
  • ButterCMS
  • Shopify Partners
  • Zendesk Partner
  • bigcommerce partner

Electric
Enjin

  • Home
  • Work
  • Company
  • Careers
  • Blog
  • Contact
  • Rss
  • Blog Archive
  • Work Archive
  • Sitemap

Our
Services

  • Headless Ecommerce Development
  • Ecommerce UI/UX Design
  • Shopify Plus
  • BigCommerce
  • Craft CMS
  • Shogun Frontend
  • ButterCMS
  • Agency Support Services

CMS
Guides

  • Shopify vs Magento: The best ecommerce platform for your business
  • Shopify vs Shopify Plus: Is the price tag worth it for your ecommerce business?
  • Craft CMS vs WordPress: Which is the best CMS? 2023 Edition
  • Craft Commerce vs Woocommerce
  • Craft CMS vs WordPress: SEO Matchup
  • Craft Commerce, Shopify & BigCommerce Platform Comparison

Let's
connect

  • 203-939-9344
  • [email protected]
  • Electric Enjin
    20 N Main St
    4th Floor
    Norwalk, CT 06854

Ecommerce tips & insights
straight to your inbox.

© Electric Enjin LLC 2023.
Electric Enjin is a certified Minority Business Enterprise.

Privacy Policy

×

Let's Talk

To get started, we just need a little information.

Noel Lopez, Client Success Manager

Chris Ching, Founder


What to expect

  1. Chris will reach out to schedule a free 30 minute consultation.
  2. We'll discuss your goals, requirements, timing, and other details.
  3. Afterwards, you'll receive a tailored proposal.
  4. We get to work.
×

Give us your email (so we know you’re not a bot) to access the case study.