FLIP not finishing animation

[tiny999]

I'm trying to build a page transition effect using FLIP and react-router. I want the card to smoothly flip from its position, into the position of a bigger div on the next page. 
I've followed FLIP docs and right now, on click, the second card does take the position of the initial card, but it does not animate back to the original state as it is supposed to. Can't seem to figure out what I'm doing wrong. Can someone help?

 

 

Here's a link to the sandbox: https://stackblitz.com/edit/react-vdfzqh?file=src/App.js

 

See the Pen App.js by edit (@edit) on CodePen

[Rodrigo]

Hi @tiny999 and welcome to the GreenSock forums!

 

This is not the simplest of endeavors since you have to consider a lot of things in this one. The first thing that I can see is that you're not using the Flip plugin in the way is intended. You are setting a state value in your Flip Context file and then what? You should make the DOM changes and then tell Flip to animate the element from the state you recorded.

 

This is the most basic Flip setup:

1. Get the state of the element you want to animate using Flip.getState()
2. Change the element styles or move it around the DOM to a new parent.
3. Tell Flip to animate the element using the state you got in step 1 using Flip.from()

In your case I'm not seeing 2 and 3 anywhere in your code. Then you have to take care of the route changes and the position of the element. Maybe do the route change programmatically after the Flip animation is completed so it matches the position of the image in the target route.

 

Here is a super simple example of that:

https://stackblitz.com/edit/nextjs-bti25c?file=components%2FImagesContainer.js

 

Is not exactly what you're looking for but hopefully is enough to get you started.

Happy Tweening!