GSAP Flip not working!

[momo12]

Guys I have a question. I want to reparent the grid cells from Grid to Grid Parent. But it's not working!

See the Pen mdQNjYd by talewoy290 (@talewoy290) on CodePen

[Rodrigo]

Hi,

 

It seems to me that you have a glaring issue regarding the way the Flip Plugin works. Right now you're passing a DOM node to Flip's from() and to() methods. Those methods take a Flip state object not a DOM node like regular GSAP from and to methods do.

 

Also you are passing elements that reside in a Grid display to another element that uses a Flex display, that spells trouble all around IMHO.

 

Since I'm far more experienced and confident with Flex I made this example where both elements :

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

 

The main idea is to move the elements to the blue parent and then animate that particular transition using Flip.from().

 

Hopefully this helps.

Happy Tweening!

[momo12]

24 minutes ago, Rodrigo said:

Hi,

 

It seems to me that you have a glaring issue regarding the way the Flip Plugin works. Right now you're passing a DOM node to Flip's from() and to() methods. Those methods take a Flip state object not a DOM node like regular GSAP from and to methods do.

 

Also you are passing elements that reside in a Grid display to another element that uses a Flex display, that spells trouble all around IMHO.

 

Since I'm far more experienced and confident with Flex I made this example where both elements :

 

 

 

The main idea is to move the elements to the blue parent and then animate that particular transition using Flip.from().

 

Hopefully this helps.

Happy Tweening!

Thanks for mentioning this! But is there a way to make it responsive to Scroll position?

[Rodrigo]

Hi,

 

You could take a look at this example:

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

 

And the one created by Jack in this thread:

 

Hopefully this helps.

Happy Tweening!

[momo12]

9 minutes ago, Rodrigo said:

Hi,

 

You could take a look at this example:

 

 

 

And the one created by Jack in this thread:

 

Hopefully this helps.

Happy Tweening!

Thanks again! But as you can see, the animation runs as we scroll but I want it be responsive... Somehow, the more we scroll the more div block moves 

[Rodrigo]

Hi,

 

I already mentioned the example in this particular post by Jack:

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

 

Please do your best to follow the links we provide. We do so not to clutter threads but to help and guide users to the examples we believe better fit the issue at hand.

 

Hopefully this helps.

Happy Tweening!

 

[momo12]

1 hour ago, Rodrigo said:

Hi,

 

I already mentioned the example in this particular post by Jack:

 

See the Pen

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

by GreenSock (@GreenSock) on CodePen

 

 

Please do your best to follow the links we provide. We do so not to clutter threads but to help and guide users to the examples we believe better fit the issue at hand.

 

Hopefully this helps.

Happy Tweening!

 

Thank you