Jump to content
Search Community

Smooth repositioning items in a flexbox after filtering

Sasemoi test
Moderator Tag

Recommended Posts

Hi! 

I stumbled across GreenSock a few days ago and have been having some fun using the animations. I was looking for a solution for a cool animation while filtering cards inside a flexbox container. I want the cards to appear/disappear and the cards that remain to animate to their positions, all at the same time. 

 

After some digging on the forum I came across the flip technique to record old and new positions right before/after the filtering is done.

 

I like the outcome so far but there are a few cases where I've been stuck on why the cards still jump to their new position after the rest has animated (My guess is a timing issue but cannot seem to find it). Looking forward to your replies! 

 

Using TypeScript because I'm building my component in Angular and looking for a way to separate the GSAP instance from the actual component via a service, so passing along the filter to the service and the box objects array from function to function is what I'm looking for.

See the Pen wvGEVZr by Sasemoi (@Sasemoi) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @Sasemoi! Yeah, there are some logic issues on your example but I have really good news: we're working on a brand new plugin for "flip" animations like this which should make it a lot easier. Part of what's tricky about what you're attempting is that your filtered elements need to go to display: none which of course affects the entire layout (shifting thins around) but you're also wanting them to remain visible while animating out.

 

The new plugin provides a way to basically toggle those elements to position: absolute so that they don't affect layout. 

 

Here's a fork with the plugin doing its magic: 

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

 

Note that the plugin isn't "official" yet - it's still considered experimental, so the API may shift a bit before we release it. I welcome any feedback. 

 

Here's another private CodePen that shows the basics, and there are comments at the bottom of the JS panel that explain the API. 

 

Does that help?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thanks for the very clean example! I've dug through your fork and it makes a lot of sense. Is a beta available to use in dev environment? (via NPM for example)
 

11 hours ago, GreenSock said:

Here's another private CodePen that shows the basics, and there are comments at the bottom of the JS panel that explain the API. 

 

 

Can't seem to find the link to this CodePen! 

 

Looking forward to further exploring what GSAP has to offer :)

Link to comment
Share on other sites

On 9/19/2020 at 7:17 AM, Sasemoi said:

Can't seem to find the link to this CodePen! 

Looks like he forgot it :) 

See the Pen 64c6d1bd697a1a38a196be351744738c by GreenSock (@GreenSock) on CodePen

 

On 9/19/2020 at 7:17 AM, Sasemoi said:

Is a beta available to use in dev environment? (via NPM for example)

@GreenSock will probably provide one for you later today.

  • Thanks 1
Link to comment
Share on other sites

18 hours ago, GreenSock said:

Yep, sorry about the missing link. And here's a beta version of the upcoming release as a .tgz which you can npm install for testing: https://assets.codepen.io/16327/gsap-beta.tgz

 

Thanks! I'm using Angular/TypeScript, do I need extra steps to expose Flip from the gsap library? I can see the Flip.js files in node_modules but can't call gsap.flip() in my .ts files, as there's no type declaration file for Flip.

Link to comment
Share on other sites

I can see the type file in the new version but it still gives the error:

 

src/app/services/gsap.service.ts:93:12 - error TS2339: Property 'flip' does not exist on type 'typeof gsap'.

 

Importing gsap like this:

 

import { gsap } from 'gsap';

I was looking at the gsap.core.d.ts file, maybe Flip needs to be added to RegisterablePlugins? I tried a bit here and there but no success :)

Link to comment
Share on other sites

Hi Zach or Jack,

 

I've tried to replicate the issue in CodePen but I'm I couldn't get Angular to work properly on there. I've made a StackBlitz with Angular running on the latest version but I can only import GSAP 3.5.1 via NPM.. Posting it below for reference how I'm trying to get it to work:

https://stackblitz.com/edit/angular-gsap-flip?file=src/app/app.component.ts

 

To maybe further help the debugging, when I hover over the import and compare it to Draggable plugin it clearly shows it can't find the Flip module, although it does get exported from the flip.d.ts file:


1342048550_ScreenShot2020-09-23at14_57_26.thumb.png.4349325a2c7dd9387790f11ceac68a32.png

 

479244359_ScreenShot2020-09-23at14_57_38.png.f5cfbaff7c2f592344a893710f90609f.png

 

1765367573_ScreenShot2020-09-23at14_57_59.thumb.png.51fc901e79d062d4e21280b718416f6d.png

 

If you can guide me a bit in the debugging process it would be great! This solution has been the most flexible I've encountered by far. If it's too much hassle I can wait for the official release and tween my way around other idea's meanwhile.. :)

 

Link to comment
Share on other sites

It looks like you're loading GSAP 3.5.1 which doesn't have the FLIP plugin in it (because it's still in beta, not public yet). It looks like StackBlitz doesn't allow you to upload files either which is a shame. 

 

Maybe you could get it working on CodeSandbox instead, adding https://assets.codepen.io/16327/gsap-beta.tgz as a dependency?

Link to comment
Share on other sites

A few issues:

  1. Your package.json file is still telling to load from the NPM version, not your local .tgz file. Make it load from the local version: "gsap": "file:gsap-beta.tgz".
  2. You are not importing or registering the Flip plugin in the file that you're using it in. Do so like I said to above.
  3. this inside of the change function is no longer your component. So save a reference to it outside of the change function and use the reference instead of this.
  4. You're attempting to get the boxes before the component has initialized. The gsap.utils.toArray() should be inside of your ngOnInit function. Though it'd be more proper to use refs.

Altogether: https://codesandbox.io/s/gsap-flip-angular-forked-sgqzt?file=/src/app/app.component.ts

  • Like 2
Link to comment
Share on other sites

32 minutes ago, ZachSaucier said:

A few issues:

  1. Your package.json file is still telling to load from the NPM version, not your local .tgz file. Make it load from the local version: "gsap": "file:gsap-beta.tgz".
  2. You are not importing or registering the Flip plugin in the file that you're using it in. Do so like I said to above.
  3. this inside of the change function is no longer your component. So save a reference to it outside of the change function and use the reference instead of this.
  4. You're attempting to get the boxes before the component has initialized. The gsap.utils.toArray() should be inside of your ngOnInit function. Though it'd be more proper to use refs.

Altogether: https://codesandbox.io/s/gsap-flip-angular-forked-sgqzt?file=/src/app/app.component.ts

 

Thanks for these corrections Zach. I've got it working with your CodeSandbox, had to do the following on my local machine (for anyone looking to try out this cool feature):

  • Explicitly uninstall gsap and reinstall via "npm install ./gsap-beta.tgz", this made the console errors disappear about property flip not existing on type gsap , although I still get the errors in my terminal while compiling. I guess TypeScript still can't find a reference to the types file?
  • Save a reference to this! Today I learned 😄 

Thanks again for your very fast responses!


 

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...