Jump to content
Search Community

FLIP - applying saved state from one element to another

Asderex test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 1
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.
×
×
  • Create New...