Flip and ScrollTrigger scrub is "jumping" when going backwards

[Giacomo Franco]

Hi! how is it going?

Context

Recently I've been working on a proyect on which I have to implement FLIP, Timeline and ScrollTrigger... Basically the animation goes this way, a little bit of context:

At first I have a laptop SVG covering the entire screen, when the user scrolls, the SVG goes from the full screen to a child container on it, while the user is scrolling the animation is running ( for this I'm using the scrub property in ScrollTrigger), when the SVG is positioned where it has to be at the end, a SVG phone appears  and goes next to the laptop. (In the Codepen that i've just created doesn't appear the phone, it isn't important at the moment)

What's happening?

I have 2 problems;

When the page loads for the first time the laptop is positioned where it has to be covering the full screen, the first problem occurs when I scroll just after the end of the scroll, the SVG "Jumps"  and when I scroll back the SVG is not positioned to the top of the page as it was before (please open the codepen in fullscreen so you can see the bug better).

The other problem is that I can't make it responsive, when I set the parent to flex-wrap: wrap-reverse; it breaks and the laptop doesn't fit in the container and overflows the viewport 
 

See the Pen NWomZvx by GiacomoFranco (@GiacomoFranco) on CodePen

[mvaneijgen]

Hi @Giacomo Franco welcome to the forum!

 

I've set absolute to false and the jump goes away an to me it looks perfect. Is there something I'm missing? 

 

See the Pen xxMNBPY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

8 hours ago, Giacomo Franco said:

The other problem is that I can't make it responsive, when I set the parent to flex-wrap: wrap-reverse; it breaks and the laptop doesn't fit in the container and overflows the viewport 

 

 

Do you a pen with these settings, so that we can help you debug.

[Rodrigo]

Hi,

 

On top of @mvaneijgen's great advice, you can look at the demo Jack created in this thread for inspiration regarding the responsive side of things when

working with Flip and ScrollTrigger:

 

Hopefully this helps.

Happy Tweening!

[Giacomo Franco]

Hi @Rodrigo thanks for your suggest, I've tried to apply this resize in my project but I'm also using timeline with flip, and whenever I resize the screen I think I restart the flip but also the timeline and I don't know how to proceed (I'm implementing GSAP in an Angular project)

[Rodrigo]

Hi,

 

Unfortunately I have no experience with Angular so I couldn't tell you.

 

Could you create a simple demo on Stackblitz in order to see if we can spot the problem there? Unfortunately without a minimal demo there is not much we can do.

 

Are you getting any console error in your project?

 

Happy Tweening!

[Giacomo Franco]

Sure! 

There's no errors in my console.

Here's the demo, as you can see when size of the tab changes, the laptop doesn't execute the animation... I need to add the timeline to achieve the effect that I want, thanks for you support btw 🙂
 

See the Pen NWJWrvL by GiacomoFranco (@GiacomoFranco) on CodePen

[Rodrigo]

Ahhh yeah I see the problem now. Super simple, you're not putting the laptop element back to it's original parent node on the resize event. This is what happens:

1. You have the laptop in the original parent
2. You run the anim method, which gets the state and reparents the laptop
3. You resize the screen, at this point everything is reverted by GSAP Context BUT (there's always one of those, isn't it? 😁) the laptop element is inside it's final parent, not the original one, so when Flip get the state is doing what's supposed to, but the initial and final states are the same. See the problem?

This seems to fix it:

let flipCtx;
function anim() {
  flipCtx && flipCtx.revert();
  originalContainer.appendChild(laptop);
  laptop.style.cssText = "";

  flipCtx = gsap.context(() => {
    const state = Flip.getState(laptop);
    newContainer.appendChild(laptop);

    const flip = Flip.from(state, {
      scale: true
    });
  });
}

anim();

window.addEventListener("resize", anim);

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!