FLIP with Vue - how to FLIP an element entering the DOM?

[MadG]

Hey all! See attached pen. The idea is when you click a card, it removes that card, then fetches a new batch of data and adds a card with that new data. Everything seems to be working as intended except that the new incoming card isn't getting included in the FLIP animation. It makes sense why, as it's not even in the DOM yet when I'm running Flip.getState(), but I can't think of a way to get around that. Is what I'm asking for here even possible or do I need to think of another approach? Thanks!

See the Pen eYMmKdN by kslaton (@kslaton) on CodePen

[GreenSock]

Sure. You just forgot to define your "targets" so that it includes the new card(s). By default, it just targets the elements that were in the original state, but you added a new element which isn't in there. 

 

I also added a slight delay only because when you run it right away, the entrance animation was running before the image was fully loaded, so it sorta animated in collapsed and then the image popped into place and things got taller. You might want to set a width/height on the image and/or set things up so that the flip animation only happens after things are fully loaded.

 

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

[MadG]

@GreenSock awesome. Thanks so much for your help.