Jump to content
GreenSock

MadG

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

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

@GreenSock awesome. Thanks so much for your help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×