BenjaminO Posted August 10, 2022 Share Posted August 10, 2022 Hello 👋, I am using typescript in my project and I remarked that I have some types erros : The property 'isPressed' doesn't exists on type 'Draggable' due to the following code class DraggableImg { constructor(Image: HTMLElement) { const drag = Draggable.create(proxy, { //Draggable options })[0] drag.isPressed // throw error } } and also The property 'pause' doesn't exists on type 'Function' due to the following code : class DraggableImg { constructor(Image: HTMLElement) { const xTo = gsap.quickTo(Image, 'x', { duration: 0.3 }) const yTo = gsap.quickTo(Image, 'y', { duration: 0.3 }) const drag = Draggable.create(proxy, { onPressInit(){ xTo.pause() // throw error even with xTo.tween.pause() yTo.pause() // throw error even with yTo.tween.pause() } })[0] } } Can I do something to fix that ? Many thanks in advance 🙂 Link to comment Share on other sites More sharing options...
iDad5 Posted August 10, 2022 Share Posted August 10, 2022 I looked in the docs and there is no property ’isPressed’ so the first error seems very logical to me. the second one I’m not sure about as I’m on mobile in transit right now I cannot really check deeper. I’m not a fan of anonymous closures and have limited experience with proxy in TypeScript - so I might be wrong, but my strong suspicion is, that the constants xTo and yTo defined in the class are either not reachable through the Draggaable create or are inferred not correctly by the TS compiler simply by attaching them outside to the constant. in either case explicitly typing the constants and/or casting them to gasp should satisfy the compiler. 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted August 10, 2022 Author Share Posted August 10, 2022 Hello @iDad5 and thank you for your response ! I took a piece of code from @GreenSock that you can find below where you can find the property ’isPressed’. Also I'd like to remove all this keywords to clarify the code but I am a bit lost in translation 😅 const drag = Draggable.create(proxy, { onDrag() { xTo(this.x) yTo(this.y) }, // Other options })[0] Link to comment Share on other sites More sharing options...
iDad5 Posted August 10, 2022 Share Posted August 10, 2022 Well, there is no shame in not being able to follow @greensock as we are mere humans. 😬 I couldn’t follow his code especially on mobile right now. It might be that there is an (intentionally) undocumented property isPressed on Draggable, that‘s not in the definitions. haver your tried to use @ts-ignore to check if the code is working and it’s only a compiler issue? 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted August 10, 2022 Author Share Posted August 10, 2022 After digging in the docs I was thinking about this observer property (https://greensock.com/docs/v3/Plugins/Observer/isPressed). Maybe Draggable plugin is using it under the hood ? My code is working fine but I think it's always better avoiding ignoring warnings 😅. I think it's also the same for the property tween which I can't reach as well. After testing it seems that xTo.pause() // throw error + not working xTo.tween.pause() // throw error but working EDIT: I think it is just a declaration problem as isPressed is present in the source code of the plugin _setDefaults(Draggable.prototype, { // Other parameters isPressed: false }); so maybe a future update of draggable.d.ts could be nice @GreenSock 🙂: readonly isPressed: boolean; I found also at the very end of the doc https://greensock.com/docs/v3/GSAP/gsap.quickTo() that .tween is needed to actually access methods and properties of the tween instance so maybe there is also room for future declaration update ? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 10, 2022 Solution Share Posted August 10, 2022 I'll add isPressed in the next release to Draggable's TypeScript definitions. And no, Draggable doesn't use Observer under the hood. I can also add the tween property TypeScript definition to the .quickTo() function in the next release. 1 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted August 10, 2022 Author Share Posted August 10, 2022 Thank you 🙏 @GreenSock ! 1 Link to comment Share on other sites More sharing options...
BenjaminO Posted August 17, 2022 Author Share Posted August 17, 2022 Solved in GSAP 3.11.0 ! Thank you for this great update 🙂 2 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