f_lande

Hi OSUblake, got it, thanks for the historical perspective!! Bye, f_lande

Hi GreenSock, no, I'm not sure to see what you mean, but it doesn't matter. I just wish I had a simple example showing how to drag an object defined within the CANVAS, not the DOM, and that pure GSAP can animate smoothly, without any problem (after proper project setting, which took me a while, but it's done now). Tomorrow I'll try to create a CodePen demo, but I don't know if I'll succeed. Otherwise, I could send you a minimal project example, showing my point. Thanks & best regards, f_lande

Hi OSUblake, sure, I'm more than glad to share my mini-demo project, hoping to learn something from it, and that it might be useful to others as well. It is a minimal VS2019 project, and it works OK with current settings. In order to be able to upload it, I had to remove the Microsoft "Microsoft.CodeDom.Providers.DotNetCompilerPlatform.2.0.0" package that it uses, but apart from it, it is absolutely minimal and I DO declare the GSAP library through a <script src = "js/gsap.min.js"></script> line in the ASPX file. Maybe this is an uncommon setup, but I find it very useful since I can call the C# backend methods as if they were local calls, and the JS frontend gets called back on data receival, with the ASPX environment hiding all the underlying AJAX stuff, hence making it more similar to the procedural environments I'm used to. In the "01_GstUtilFuncs.ts" file, I add once and for all the references to the data types files and that's it: /// <reference path = "pixi.js.d.ts"/> /// <reference path = "gsap/index.d.ts"/> You tell me that this is weird, outdated and whatever, but I wouldn't know how else to do, without the "tsconfig.json" that you suggest. In the project's Properties page, I see that the following settings are listed: ECMAScript version: ECMASCript 5 JSX compilation in TSX files: React Module System: None (and the other options are: CommonJS, AMD, UMD, System and ES2015, but they mean nothing to me, and I wouldn't know what to choose). For sure, I don't have to add any import { foo } from "bar" whatsoever statement, so I think this is quite simple and straightforward. Thanks & best regards, f_lande 27_Tweening_211220.rar

Hi PointC, thanks for your input. I understood that GSAP could animate anything you throw at it, but at least in this case this doesn't seem to be true. I'll review the other replies and see if I can find a way to work around the problem. Bye, f_lande

Hello forum, quite new to GSAP (v. 3.9.0), and I'm testing its features, which I think are impressive, but not everything goes as advertised, it seems. I'm trying to use the Draggable plugin. I properly registered it with: gsap.registerPlugin(Draggable); but when I try to use it like this, with a Pixi object, in its simplest mode: Draggable.create(circle); or more generally: Draggable.create(circle, { type: "y", inertia: true, bounds: document.getElementById("container"), onClick: function() { console.log("clicked"); }, onDragEnd: function() { console.log("drag ended"); } }); I get, in the browser's console: TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at La (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:7211) at _isFixed (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:25971) at new Draggable (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:26041) at e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:15344 at Array.map (<anonymous>) at Function.create (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\draggable.min.js:10:15321) at OnStartAppSuccess (e:\home\francesco\elcenter\online\pixijs\31_draganddrop\webapp\js\00_draganddrop.ts:53:15) at Array.onComplete (http://localhost:59412/ScriptResource.axd?d=uHixXwP4lzcUWXWxkI7LaJz9Ozj8qYZwCx3tVZ_gCkTAKYAR8ZSNgu62NL1Ac0ubfb07oFpxv-BB10fjKxCOtYiQJXzZCvIra84dvhPd3ljfRt0xlnbaYlKEncrE-WMjoRsyrZ9qGDRTQgcNBmbpG2aX1lP_MKcY293nj7bkdZhcrGlXUpSIcgOAW1xlKvEe0&t=363be08:6972:17) at http://localhost:59412/ScriptResource.axd?d=uHixXwP4lzcUWXWxkI7LaJz9Ozj8qYZwCx3tVZ_gCkTAKYAR8ZSNgu62NL1Ac0ubfb07oFpxv-BB10fjKxCOtYiQJXzZCvIra84dvhPd3ljfRt0xlnbaYlKEncrE-WMjoRsyrZ9qGDRTQgcNBmbpG2aX1lP_MKcY293nj7bkdZhcrGlXUpSIcgOAW1xlKvEe0&t=363be08:3484:23 at Sys$Net$WebRequest$completed [as completed] (http://localhost:59412/ScriptResource.axd?d=uHixXwP4lzcUWXWxkI7LaJz9Ozj8qYZwCx3tVZ_gCkTAKYAR8ZSNgu62NL1Ac0ubfb07oFpxv-BB10fjKxCOtYiQJXzZCvIra84dvhPd3ljfRt0xlnbaYlKEncrE-WMjoRsyrZ9qGDRTQgcNBmbpG2aX1lP_MKcY293nj7bkdZhcrGlXUpSIcgOAW1xlKvEe0&t=363be08:6376:13) and nothing else happens. Did anybody ever came across any issue like this? Thanks & best regards, f_lande

Hi Cassie, thanks for your reply, first of all. I think the main point here is that it is difficult for you, that quite surely know your library inside out, to understand what a newcomer encounters when gets in touch with it for the first time. This said, as soon as you start talking CodePen, npm, yarn, ES modules or any other environment/framework/whatever you like to call it, you're losing half of your audience. It's pointless to make a document useful only to the ones that already know it. I did try to use the "tsconfig.json" file in my project, and although useable, I found it more cumbersome than useful, given the project organization that real Visual Studio provides, not its useless "editor on steroids" Visual Studio Code counterpart. So, if there are two more common ways to include external JS libraries, well, I think that it might be useful to have two - although minimal - examples of usage, one for each of them, so that a new user could download and test by him/herself, in an autonomous environment and see/understand who does what. I saw your videos, and I couldn't follow most of them, be it my non-native English or pre-reqs that I probably don't have. I'll try to learn by myself what "ES modules" are, and if they can provide help in my project's development, although probably, as I said, I'm already using them unawarely. Last but not least, I do appreciate your library and I'm starting to explore the various possibilities it offers, after I cracked the nut about how to start it up. Thanks & best regards, f_lande

Hi OSUblake, sorry, I didn't provide enough information. 1. In my "StartPage.aspx" file I include the line: <script src = "js/gsap.min.js"></script> 2. In one of my TypeScript files, I include the lines: /// <reference path = "pixi.js.d.ts"/> /// <reference path = "gsap/index.d.ts"/> and as far as I can see it works now; 3. About the "tsconfig.json" file, it probably goes in the project's directory, as opposed to the solution's directory, in VisualStudio parlance, I'll try. In general, though, for VisualStudio it doesn't seem to be "mandatory", since (as far as I can understand) a few of the options offered by the this file are already present in the project's pro- perties page, and it probably works based on the predefined settings it has; 4. ES Modules. Honestly, I don't know what they are, and maybe I'm already using them unawarely. Does the "ES Modules" concept apply to my TypeScript files, or to the libraries they use? Currently I'm separating my applica- tion into a few files ("modules?"), sharing the same namespace, but keeping some functions local (i.e. unacces- sible from external files) and some exported ("extern") so to make them accessible from other files. The same also applied for local/global variables. Am I using ES modules? 5. Last but not least, let me add a constructive criticism. I agree that, as you say, "The Getting Started section is an introduction on how to use use GSAP's API, not how to setup projects". But, on the other hand, how can I use GSAP's API if I can't setup a project? It looks like a chicken-and-egg issue, so I kindly ask you to add a newcomer's section a- bout how to set up a "Hello GSAP" project, that doesn't use strange frameworks or obscure (to me, at least) environ- ments, as this can't but do good to your nice library diffusion!! Thanks & best regards, f_lande

Hi all, I found the problem. I was wrongfully including the type libraries file like this: /// <reference path = "../node_modules/gsap/types/gsap-core.d.ts"/> and not like this: /// <reference path = "../node_modules/gsap/types/index.d.ts"/> I just don't think I saw it written anywhere, but I may be wrong here. I'm not using "tsconfig.json" file whatsoever, don't know what it is for, or where it should be placed. I kindly ask you to be more descriptive in the replies, though, since I found the "Getting started" section impossible to follow. Thanks, f_lande

Hi Cassie, I'm including PIXI and GSAP in one of my TypeScript files like this: /// <reference path = "pixi.js.d.ts"/> /// <reference path = "../node_modules/gsap/types/gsap-core.d.ts"/> and about PIXI alone, no problem, but as soon as I try to add GSAP I get over 40 errors, so I really don't know how to proceed. Any hint is welcome!! Thanks

Hi everybody, completely new to GSAP, so I'm still trying to make head and tail out of it. I see that there's a lot of stuff for strange environments I don't know absolutely anything about, but I could find nothing about a simple and plain "Hello world" project with Visual Studio, Typescript and GSAP. Is there anybody who has ever developed anything like this? I did try, but as soon as I try to import GSAP in my Typescript projects, I get tens of errors about undeclared names and namespaces from the "gsap-core.d.ts" Typescript types description file: Build started... 1>------ Build started: Project: WebApp, Configuration: Debug Any CPU ------ 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(4,7): error TS2304: Build:Cannot find name 'Ease'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(5,7): error TS2304: Build:Cannot find name 'EasePack'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(6,7): error TS2304: Build:Cannot find name 'ExpoScaleEase'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(8,7): error TS2304: Build:Cannot find name 'RoughEase'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(9,7): error TS2304: Build:Cannot find name 'SteppedEase'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(10,7): error TS2304: Build:Cannot find name 'VelocityTracker'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(11,14): error TS2304: Build:Cannot find name 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(12,14): error TS2304: Build:Cannot find name 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(13,14): error TS2304: Build:Cannot find name 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(14,14): error TS2304: Build:Cannot find name 'Draggable'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(15,14): error TS2304: Build:Cannot find name 'GSDevTools'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(16,14): error TS2304: Build:Cannot find name 'MotionPathHelper'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(17,14): error TS2304: Build:Cannot find name 'SplitText'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(18,14): error TS2304: Build:Cannot find name 'Flip'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(19,14): error TS2304: Build:Cannot find name 'ScrollTrigger'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(72,20): error TS2304: Build:Cannot find name 'EaseFunction'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(114,47): error TS2503: Build:Cannot find namespace 'utils'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(118,35): error TS2304: Build:Cannot find name 'EaseFunction'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(144,21): error TS2304: Build:Cannot find name 'EaseFunction'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(155,35): error TS2304: Build:Cannot find name 'EaseFunction'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(160,25): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(210,76): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(225,76): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(240,57): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(255,74): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(271,82): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(286,100): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(303,30): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(335,69): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(393,37): error TS2304: Build:Cannot find name 'EaseFunction'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(393,52): error TS2304: Build:Cannot find name 'EaseFunction'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(429,45): error TS2304: Build:Cannot find name 'EaseFunction'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(484,56): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(494,43): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(509,55): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(524,73): error TS2503: Build:Cannot find namespace 'core'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(550,38): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(556,37): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(562,41): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(568,40): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(579,39): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(585,38): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(591,42): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. 1>E:\Home\Francesco\ElCenter\OnLine\PixiJs\27_Tweening\WebApp\node_modules\gsap\types\gsap-core.d.ts(597,41): error TS2339: Build:Property 'core' does not exist on type 'typeof gsap'. ========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ========== Any help would be welcome!! Thanks, f_lande