Flip - onEnter / onLeave delay

[damsodemso]

Hey everyone! 

 

I'm currently developing a filter system with GSAP Flip using layers as a transition. I have a problem with the appearance delay, my onEnter appear before the onLeave. 

 

Using an official GSAP codepen, I have reproduced the effect I would like: 

See the Pen OJBOKOo by damienmontastier (@damienmontastier) on CodePen

I think I made a lot of mistakes and lot of stuff impossible, do you have any suggestions? 

 

For information, my final version (not the both codepen) is under Nuxt.js and I use nextTick to use the changes related to FLIP.

 

Thanks in advance ! 

See the Pen vYVWoge by damienmontastier (@damienmontastier) on CodePen

[Rodrigo]

Hi @damsodemso and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member!

 

The main problem is the duration you have on the onLeave callback is longer than the delay you have in the onEnter callback:

onEnter: (elements) => {
  const layers = elements.map((el) => el.querySelector(".layer"));
  return gsap.fromTo(
    layers,
    { scaleY: 1, transformOrigin: "center bottom" },
    { scaleY: 0, duration: 1, delay: 0.5 }
  );
},
  onLeave: (elements) => {
    const layers = elements.map((el) => el.querySelector(".layer"));
    return gsap.fromTo(
      layers,
      { scaleY: 0, transformOrigin: "center top" },
      { scaleY: 1, duration: 1 }
    );
  }

You have to set both to 1 second:

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

 

Hopefully this helps.

Happy Tweening!

[damsodemso]

Hey @Rodrigo ! Thanks for your quick response. 

 

Unfortunately I think my problem is a bit more complex than that... For example when you switch between "Concert" and "Sport", I have the impression that the delay is not working. That's strange. The elements disappear too abruptly... I think it's related to the fact that there are 4 elements at the same position (so no movement).

 

I updated the codepen to change the code and put the background in white, we can see the transitions better now ?

See the Pen WNadxJM by damienmontastier (@damienmontastier) on CodePen

 

Thanks 

 

[damsodemso]

Does anyone have an idea? ?

[GreenSock]

Are you trying to do this?: 

See the Pen JjmpdYJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You had overlapping elements, so the entering ones (for example) were right on top of leaving ones, and the new ones had a white background that was obscuring the leaving ones. So I just set visibility: hidden on those elements until they start their animation in so that they're not obscuring things.

 

Does that clear things up? 

[damsodemso]

Damn. I didn't think about the overlapping of the layers...

 

This is exactly the effect I was looking for. Thanks a lot! ✌️