FLIP Plugin Question

[Mike790]

Hey everyone!

 

I reached out a few months back for help on a FLIP animation and your help was awesome!  Also, I recently came across a few posts in the forum that use a FLIP plugin that's in the works which looks very interesting.

 

I'm tying to apply the FLIP technique to multiple items on a page, but when the element returns to its original location/container, the other items on the page shift.  I would greatly appreciate any help on how to incorporate the FLIP plugin into my script to fix the formatting issue I'm experiencing. 

 

Thanks in advance and keep up the great work!

See the Pen MWeyQpy?editors=1010 by agaisab (@agaisab) on CodePen

[ZachSaucier]

Hey Mike. 

 

A couple of notes not related to your question:

• Why use CSS transitions and setTimeouts instead of using GSAP for the open and close overlay animations? That way you have real callbacks when the animation is done instead of "guessing" with setTimeouts and have more control over your animations. If you do stick with CSS transitions I recommend making use of the transitionend event instead of setTimeouts.
• You might consider using gsap.set() instead of doing elem.style.property. It's particularly useful when setting multiple properties.

To answer your question, the jump is happening because when the element is swapped back to the original container its height is above what it "normally" is in that state. Since the element is in the document flow, the adjustment happens. To fix it, you could use scaling instead (but that would prevent the text from wrapping during the animation) or using position: absolute for the element during the animation. I recommend the latter. 

 

Using the more up to date version of the FLIP plugin, it could look something like this:

See the Pen abZJqYg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note that I didn't fix your event listener issue or convert your transitions to using GSAP. Also note that the FLIP plugin is still under development so things very well may be changed  

[Mike790]

Really awesome, Zach!

 

I can't thank you enough for your update to the script and advice on how to further improve it!  I didn't realize I still had a setTimeout function in use.  I eventually took a different approach to just hide the overlay instead of building it on every trigger.  I'm also taking your advice and using the set() function wherever it's applicable. 

 

Thank you again for your quick and detailed support!

 

 

Mike