Flip.from with combination of gsap.set doesn't animate to new values, instead it adds up

[artyor]

Hello all,

So in this codepen example I use Flip.from to get items into grid slots, and then on another flip to get them back in old parent, but also to transform each item to value I set with gsap.set. This works too, but on 3rd click, when I want to animate items again into grid, the gsap.set doesnt set xPercent value back to 0.

I also tried overwrite: true but it didnt work. Is there something Im missing? 

Thanks

See the Pen mdGWmxP?editors=1010 by artyor (@artyor) on CodePen

[Rodrigo]

Hi,

 

Why are you actually doing that with those set instances? Unless I'm missing something here, that actually seems to be the cause of the issue, you don't need to do that since you're reparenting the elements and Flip works great in those cases:

See the Pen XWjdgXv by GreenSock (@GreenSock) on CodePen

 

Here is a fork of your codepen without the set() instances:

See the Pen BaOWZYP by GreenSock (@GreenSock) on CodePen

 

Hopefully this clear things up. Let us know if you have more questions.

Happy Tweening!

[artyor]

Hello @Rodrigo, it's because I want items to have different xPercent when they get back to initial parent, and then back to xPercent: 0 when they go to the grid. I assume I could do this with toggleClass, but doing it this way will give me more flexibility later

[Rodrigo]

You want a different xPercent every time or just after the first animation?

 

In the case of just after the first animation then just clear the styles applied by GSAP:

if(itemsInSlot == false) {
  items.forEach((item, i) => {
    let state = Flip.getState(item)

    slots[i].appendChild(item)
    gsap.set(item, {
      clearProps: "all",
    })
    Flip.from(state, {
      duration: 1
    })
  })
}

I updated the previous codepen example to reflect that:

See the Pen BaOWZYP by GreenSock (@GreenSock) on CodePen

 

Let us know how it works.

Happy Tweening!

[artyor]

Hi @Rodrigo, your codepen is what I wanted. Thank you. However I would like to learn why gsap.set xPercent to 0 didn't work? Shouldnt thata also reset x position, so next time I animate xPercent, I assumed it would work same as in your example. Tried to find solution in gsap docs, but couldnt find anything regarding this

[Rodrigo]

Hi,

 

Basically the issue is the addition game soto speak. Everytime, after the first animation, that you take the elements from their original position to the grid, they already have a transform applied to them that the Flip plugin is actually reading. Then you re-parent them and add another transform that Flip gets in the state the next time.

 

The reason you didn't found anything regarding this is because this is the first time I see someone doing this type of thing using a set() instance before a Flip animation, normally the approach is toggle a class for doing that. Finally clearProps is a nifty tool GSAP has for such cases  

 

Hopefully this clear things up.

Happy Tweening!