FLIP - applying saved state from one element to another

[Asderex 10 Likes (Newbie)]

Hi,  there is something I am not getting about using flip with getting the starting state of off one element and applying it to another element using FLIP.from.  In the codepen attached I was hoping to see the yellow square animate across from the blue square to the red square.  My understanding was that Flip.getState(startingPosition) saved essential positional properties of the element which could then be applied using Flip.from(savedState, {targets: elementToAnimate, ...}) and GSAP would retrieve the correct saved starting state providing the two elements share the same data-flip-id.

 

I have display:none on the origin element and set it to block just before I save its state.

 

Now, I must be doing something wrong because the tween is instant (not the requested 3 seconds) and the animated element instantly appears. Any suggestions / corrections?

See the Pen WNdENPj by Asderex (@Asderex) on CodePen

[GreenSock 18,258 Likes (Superhero)]

Hi @Asderex.

 

Short answer: you put the data-flip-id on the wrong elements. It should go on the one you're animating and the one whose state you're getting. 

 

Explanation: When you Flip.getState(), you're correct that it saves pertinent data and it could be for as many elements as you want (all saved in the same state object, like a lookup table). Then, when you tried doing your Flip.from(...) you gave it a totally different target element to animate, so Flip said "cool, let me look inside that state object and find the corresponding element...uh oh, there isn't any! I guess I'll skip this target that's not found in the from state...."

 

See what I mean? But if you put the same data-flip-id on the animation target as you had on the one you did the .getState() on, they'll match up and Flip will happily do the animation. 

 

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

[Asderex 10 Likes (Newbie)]

So there's my problem - I'm a dolt!  Thanks Jack. Relieved that my understanding was right but my attention to detail was wrong. Appreciate your response.

[GreenSock 18,258 Likes (Superhero)]

No problem, @Asderex. Glad it's all figured out now. Have fun!