Sasemoi
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Sasemoi
-
-
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 !
-
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.tsTo 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..
-
Tried that as well !
-
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
-
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.
-
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
-
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.
Smooth repositioning items in a flexbox after filtering
in GSAP
Posted
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):
Thanks again for your very fast responses!