Problem with GSAP Flip and display:grid

[PixelPerfect]

Hey, everybody! I'm trying to make a green square move strictly on the squares I specified (with a red outline), but for some reason I can't get it to work. Details in codepen

See the Pen WNWdyLb by Fluid-Corporate (@Fluid-Corporate) on CodePen

[Rodrigo]

Hi @PixelPerfect and welcome to the GSAP Forums!

 

Just use Flip's fit() method and a couple of loops:

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

 

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Finally thanks for being a Club GSAP member and supporting GSAP! 💚

 

Hopefully this helps.

Happy Tweening!

[PixelPerfect]

8 hours ago, Rodrigo said:

Hi @PixelPerfect and welcome to the GSAP Forums!

 

Just use Flip's fit() method and a couple of loops:

 

 

 

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Finally thanks for being a Club GSAP member and supporting GSAP! 💚

 

Hopefully this helps.

Happy Tweening!

Thanks a lot! 

[PixelPerfect]

On 4/4/2024 at 3:25 AM, Rodrigo said:

Hi @PixelPerfect and welcome to the GSAP Forums!

 

Just use Flip's fit() method and a couple of loops:

 

 

 

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Finally thanks for being a Club GSAP member and supporting GSAP! 💚

 

Hopefully this helps.

Happy Tweening!

What should I add to the code if my element is not inside the grid, but is located in another section in the fixed position? 

 

He must get into the grid, perform motion animations inside the grid, as in the example, and then get rid of the grid. 

The element passes through all sections of my landing page and various animations are applied to it, specifically in this section there is movement inside the grid. 

 

Thanks!

[Rodrigo]

It would be super helpful to see a demo of that particular scenario TBH, without it I'm just guessing here, but the first thing you should do is to remove the conditional check I have in my demo:

targets.forEach((target, i) => {
  if (i > 0) {
    // Get state of the current square
    flipStates.push(Flip.getState(target));
  }
});

That excludes the first element so it should be like this:

targets.forEach((target, i) => {
  // Get state of the current square
  flipStates.push(Flip.getState(target));
});

Hopefully this helps. If you keep having issues remember to include a minimal demo.

Happy Tweening!

[PixelPerfect]

On 4/8/2024 at 7:52 PM, Rodrigo said:

It would be super helpful to see a demo of that particular scenario TBH, without it I'm just guessing here, but the first thing you should do is to remove the conditional check I have in my demo:

targets.forEach((target, i) => {
  if (i > 0) {
    // Get state of the current square
    flipStates.push(Flip.getState(target));
  }
});

That excludes the first element so it should be like this:

targets.forEach((target, i) => {
  // Get state of the current square
  flipStates.push(Flip.getState(target));
});

Hopefully this helps. If you keep having issues remember to include a minimal demo.

Happy Tweening!

Hi! I've put together a new demo. An element that is in a fixed frame should "slide" inside the grid, and then exit it and stop at position 0rem, that is, in the middle of the screen.

 

 

See the Pen abxjEej by karjala_kilka (@karjala_kilka) on CodePen

[GreenSock]

Yeah, a fundamental problem is that your target element is inside a position: fixed element, and the Flip.fit() does calculations based on the normal document flow. Flip.fit() would indeed work correctly BUT you're wiring that up to scroll position. The element you're fitting it to is affected by scrolling, but the target element isn't because it's position: fixed.  So, for example, let's say that the element you're fitting it into is 500px directly below it - Flip.fit() would basically say "move 500px down and you'll be on top of that element." but you're wiring it to scroll which effectively MOVES the fit position. When you scroll 500px, the spot it's supposed to fit to is now 500px higher. If the target is position: fixed and it animates 500px down while scrolling, it would of course end up where that original fitting element was BEFORE scrolling. 

 

 

It probably is possible to figure out all the calculations, but this well beyond the scope of help we can provide in these free forums. If you need more help, you could post in the Jobs & Freelance forum or contact us for paid consulting services.

 

I wish there was a super simple solution to offer. 

[PixelPerfect]

9 hours ago, GreenSock said:

Yeah, a fundamental problem is that your target element is inside a position: fixed element, and the Flip.fit() does calculations based on the normal document flow. Flip.fit() would indeed work correctly BUT you're wiring that up to scroll position. The element you're fitting it to is affected by scrolling, but the target element isn't because it's position: fixed.  So, for example, let's say that the element you're fitting it into is 500px directly below it - Flip.fit() would basically say "move 500px down and you'll be on top of that element." but you're wiring it to scroll which effectively MOVES the fit position. When you scroll 500px, the spot it's supposed to fit to is now 500px higher. If the target is position: fixed and it animates 500px down while scrolling, it would of course end up where that original fitting element was BEFORE scrolling. 

 

 

It probably is possible to figure out all the calculations, but this well beyond the scope of help we can provide in these free forums. If you need more help, you could post in the Jobs & Freelance forum or contact us for paid consulting services.

 

I wish there was a super simple solution to offer. 

Thanks! Tell me, please, where exactly do I need to write for paid help?

[GreenSock]

9 hours ago, PixelPerfect said:

Thanks! Tell me, please, where exactly do I need to write for paid help?

I sent you a private message with details. ✅