momo12 Posted August 14, 2023 Share Posted August 14, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 15, 2023 Share Posted August 15, 2023 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! 1 Link to comment Share on other sites More sharing options...
momo12 Posted August 15, 2023 Author Share Posted August 15, 2023 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? Link to comment Share on other sites More sharing options...
Rodrigo Posted August 15, 2023 Share Posted August 15, 2023 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! Link to comment Share on other sites More sharing options...
momo12 Posted August 15, 2023 Author Share Posted August 15, 2023 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 15, 2023 Share Posted August 15, 2023 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! Link to comment Share on other sites More sharing options...
momo12 Posted August 15, 2023 Author Share Posted August 15, 2023 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now