Sasemoi Posted September 18, 2020 Share Posted September 18, 2020 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 More sharing options...
GreenSock Posted September 18, 2020 Share Posted September 18, 2020 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? 1 1 Link to comment Share on other sites More sharing options...
Sasemoi Posted September 19, 2020 Author Share Posted September 19, 2020 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 More sharing options...
ZachSaucier Posted September 19, 2020 Share Posted September 19, 2020 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. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted September 20, 2020 Share Posted September 20, 2020 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 1 Link to comment Share on other sites More sharing options...
Sasemoi Posted September 20, 2020 Author Share Posted September 20, 2020 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 More sharing options...
GreenSock Posted September 21, 2020 Share Posted September 21, 2020 Yeah, sorry, I hadn't gotten around to the TypeScript declaration file yet but I just uploaded a new version with that. You may need to clear your cache, but please let me know if that works okay for you. Link to comment Share on other sites More sharing options...
Sasemoi Posted September 21, 2020 Author Share Posted September 21, 2020 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 More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 4 hours ago, Sasemoi said: Property 'flip' does not exist on type 'typeof gsap' Make sure you import and register the FLIP plugin as well. I think it should be: import { Flip } from "gsap/Flip"; gsap.registerPlugin(Flip); Link to comment Share on other sites More sharing options...
Sasemoi Posted September 21, 2020 Author Share Posted September 21, 2020 Tried that as well ! Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 21, 2020 Share Posted September 21, 2020 Please make a minimal demo if you'd like further help debugging: Link to comment Share on other sites More sharing options...
Sasemoi Posted September 23, 2020 Author Share Posted September 23, 2020 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: 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 More sharing options...
ZachSaucier Posted September 23, 2020 Share Posted September 23, 2020 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 More sharing options...
Sasemoi Posted September 28, 2020 Author Share Posted September 28, 2020 I've created this small CodeSandbox, I think I've got it to load gsap-beta.tgz . If you let the compiler run it will give the error I mentioned earlier. Property 'flip' does not exist on type 'typeof gsap' https://codesandbox.io/s/gsap-flip-angular-00ndb Greets ! Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 A few issues: 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". 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. 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. 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 2 Link to comment Share on other sites More sharing options...
Sasemoi Posted September 28, 2020 Author Share Posted September 28, 2020 32 minutes ago, ZachSaucier said: A few issues: 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". 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. 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. 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 More sharing options...
ZachSaucier Posted September 28, 2020 Share Posted September 28, 2020 1 hour ago, Sasemoi said: I guess TypeScript still can't find a reference to the types file? I don't think the TS declaration files are in that beta. They will be in the public release. Link to comment Share on other sites More sharing options...
GreenSock Posted September 28, 2020 Share Posted September 28, 2020 1 hour ago, ZachSaucier said: I don't think the TS declaration files are in that beta. They will be in the public release. Yep, they should be in the beta. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now