Jump to content
Search Community

Filter animation with FLIP plugin

Thomas Günther test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there,

 

I'm currently trying to use the new FLIP plugin to add an animation to my filter script. I tried to do something similar like this how-to demo:

 

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

 

…but with two filters that can be combined.

 

I just can't get the animation to work properly. Most of the time the to-be-hidden elements don't get any animation. I feel like I'm 90% there but something's missing. I tried modifying the `onLeave` function but it doesn't change anything.

 

Thanks in advance for any help,

Thomas

See the Pen wvoWLeO by medienbaecker (@medienbaecker) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks for your answer and the warm welcome, Zach.

 

I set absolute to true before, but then I had issues with the scroll position and the elements underneath. I will update the simplified codepen with those elements.

 

EDIT: I just edited the codepen with a footer. While the project elements are animating, the footer will jump to the top—because the elements are position: absolute and the parent element has no height I guess: 

  • Like 1
Link to comment
Share on other sites

13 minutes ago, Thomas Günther said:

While the project elements are animating, the footer will jump to the top—because the elements are position: absolute and the parent element has no height I guess

You're spot on :) 

 

That's a kind of tricky situation. Normally in these sorts of situations you can just include the container in the .getState(), apply nested: true to the Flip.from(), and it will work great. However in this case you need absolute: true which would also apply to the container. That's not good in this situation because it cancels out why we wanted to apply the Flip to the container as well...

 

Give us some time to think up a way to solve this situation.

 

13 minutes ago, Thomas Günther said:

I just edited the codepen with a footer

Going forward, would you mind using the "fork" button on CodePen instead of updating the old one? That way context is not lost for future readers of these forum threads :) 

  • Like 3
Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Give us some time to think up a way to solve this situation.

Thank you. I'm actually glad this isn't super easy so I won't feel as bad about the many hours I tinkered with this. When I found out I can save the old state of the parent element and then use Flip.fit() on it I thought I had it figured out. This doesn't help unfortunately.

 

2 minutes ago, ZachSaucier said:

Going forward, would you mind using the "fork" button on CodePen instead of updating the old one?

Sorry about that, will do.

  • Like 1
Link to comment
Share on other sites

  • Solution

Yep, the core issue is that when the child elements get set to position: absolute, the container is collapsing. One solution would be to just set an explicit height. And of course we'd have to animate that since it'll change based on the filters. Here's a fork: 

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

 

Notice I'm just grabbing the height before we make changes (startHeight), then after we make our changes (endHeight) and doing a gsap.fromTo() with a clearProps: "height" so that it doesn't get stuck at that height on the next filter. 

 

Does that work well for you? 

 

Might look cool to add a little stagger to your onEnter/onLeave animations too ;)

  • Like 4
Link to comment
Share on other sites

53 minutes ago, GreenSock said:

Does that work well for you? 

Thanks a lot for your help, Jack. That does indeed work very well.

 

53 minutes ago, GreenSock said:

Might look cool to add a little stagger to your onEnter/onLeave animations too ;)

Great idea! I'm always concerned about performance but it's still super smooth somehow.

 

Working with GSAP for this project has been so much fun. I'm looking forward to showing this to my client.

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Hi @Hector18,

 

I'm on my phone now so I can't do a lot on it.

 

I checked your code and this looks odd

flip.fromTo

Where is that flip variable or constant is being defined? I don't see it so you should be getting an error there in the console. I think you should assign the Flip.from() instance to that and then chain the fromTo() instance, or use just a gsap.fromTo() instance instead.

 

Another option would be to pass the container to the Flip.getState() method so Flip also records the state from that element as well so it gets animated with the filtering.

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...