Can the Flip plugin flip rows in a html table?

[jlin]

Hello, I'm new to GSAP, so this may be a newbie question... but I was wondering if the GSAP Flip plugin can "flip" rows in a HTML table easily. I know how to use the basic functionality of flip from the YouTube table.

 

I don't have a codepen yet, as I am still trying to figure out how to flip the rows in a table...

[Cassie]

Heya,

 

Yep, if you've followed the youtube video you'll have seen how to do it.  You can't change the order of table rows with a class, but you can physically manipulate the DOM.

 

1) Grab the state

2) Update the DOM with JS

3) Animate!

 

Here you go -

See the Pen poYYmzR by GreenSock (@GreenSock) on CodePen

[jlin]

Thank you so much for the codepen sample and conceptual explanation, @Cassie! This helps a lot -- you answered exactly what I was trying to figure out in point 2) -- if the order of table rows could be changed in JS vs if it could be changed using GSAP. It's good to know this is better handled in JS first.

 

I appreciate your clear understanding on what people are trying to actually ask. ✨