huwllewellyn

import { TweenLite } from "gsap"; import Draggable from "gsap/Draggable"; import { Elastic } from "gsap/EasePack"; TweenLite imports fine but I am getting errors on Draggable and Elastic (even though they work). I opted to require as a way of avoiding the errors, but it just feels... off Could not find a declaration file for module 'gsap/EasePack'. '/Users/huwllewellyn/stile-science-iframe-widgets/node_modules/gsap/EasePack.js' implicitly has an 'any' type. If the 'gsap' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap` Also, what type is a Draggable onDrag event?

Yeah, to be fair I am just frustrated at the moment trying to get these libraries to work. But the documentation on this is literally scattered across the forums. It would be nice to have it centralised somewhere. Thanks for the effort you lot do put in. It's a great library.

Can someone explain why the gsap library is so hard to get working with typescript? It seems like this problem has been solved by most products and the number of typescript users justifies this being well defined. Or is gsap a library mainly used by non-typescript users for some reason?

Okay, I'm still having the same problem. It appears getBBox doesn't see the transforms that GSAP applies. If you start dragging the green circle, and don't let go, the pink circle won't follow it.

Okay, the solution is to use getBBox() instead of getBoundingClientRect() It returns the coordinate space for the svg https://stackoverflow.com/questions/30158656/positioning-svg-elements-via-getboundingclientrect-in-variable-width-div

How do I get an svg object to go to the position of another one? I have been banging my head against a wall. Trying to get pink to follow draggable green. Any help would be great

I came across a similar problem where requiring GSAP by webpack gave it a scope that broke some functionality: require("gsap"); require("gsap/Draggable"); Leading to the same problem mentioned by OP. If you include GSAP in script tags in the HTML you won't have the problem. I was able to continue using webpack by changing the way that it was imported: require("imports-loader?module=>undefined,define=>undefined!gsap"); require("gsap/Draggable"); I hope this helps someone It's such a great library but I worry that GSAP will be overtaken by others who are able to better serve the modern dev environment.