Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'typescript'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 16 results

  1. "What was that method name again?" "Is the 2nd parameter supposed to be a number or a boolean?" Even seasoned GSAP users need reminders with such a rich API. The GSAP cheatsheet is a big help, but auto-completion and code hinting right in your editor can really boost your productivity. Here's how: This is all made possible by TypeScript declaration files which describe the GSAP methods and properties that are available and the data types they expect. We recommend that you use Visual Studio Code (VS Code) or WebStorm as they were the easiest editors to get it working in of the editors that we tried. If you're using modules... It's super simple to get auto-completion and hinting working in a modules environment: Install GSAP (via npm, yarn, whatever). For more information about how to do that, check out the module installation video. Import GSAP into your file(s). For more information about how to do that, see the GSAP Install Helper. That's it! In editors that support TypeScript declarations auto-completion and hinting should work automatically. If you're using plain JS files... Enabling auto-completion and hinting with regular JS files (in editors that support it) takes a few more steps: Make sure you're logged into GreenSock.com. Download the GSAP ZIP file from the GreenSock homepage or your account dashboard. Open up the ZIP file. Open up the "npm-install-this" directory. Open up the .tgz file inside of that directory. Copy the /types directory. Paste the /types directory into your project's root directory. Create an empty jsconfig.json file in your project's root directory. This will cause your editor to look for TypeScript declaration files. Sometimes it's necessary to restart your editor before it starts working. That's it! In editors that support TypeScript declarations auto-completion and hinting should work at this point. Some editors may require that you add support for TypeScript through third party packages. For example there's a TypeScript package for Sublime and one for Atom. You may need to install an additional package like these to get auto-completion and hinting working with GSAP in your editor. That's why we recommend Visual Studio Code (VS Code) or WebStorm. Before GSAP 3, GSAP didn’t have official Typescript declaration files so people commonly used ones from DefinitelyTyped also known as @types. Now that GSAP 3 does have official Typescript declaration files, you should NOT use the @types declarations. They are old and will not work with GSAP 3. If you find errors in the Typescript declaration files, find that some method is missing, or doesn’t have a good description, please let us know! You can create a post in the GreenSock forums or you can create an issue on GitHub. As always, if you have questions feel free to post in our forums.
  2. Hey Team, We've been working with all GSAP modules for a long time and it's great. Love the additions and included types for Typescript support. Today I've noticed that the minX/minY readonly properties are missing from the types in draggable.d.ts causing an error. The maxX/maxY properties are there: readonly maxX: number; readonly maxY: number; Maybe we need to use other properties, but I've been using minX/minY for a long time already.
  3. ive added both gsap (npm install --save gsap) and @types/greensock (npm install --save-dev @types/greensock) to my prototype app I am using to learn more about greensock. npm install completes successfully, however when building the app, I get a "Duplicate identifier 'TimelineMax'" error. I've confirmed that there are multiple definitions of this and other gsap classes in both these lib's (found in gsap-core.d.ts for gsap and index.d.ts for @types/greensock). I did find the install instructions (here: https://greensock.com/docs/v3/Installation) which references 'typescript errors" re: locations of types being defined - - - but that didn't work. Was wondering if there is something else I am missing? Thx in advance for any insights
  4. Hello guys, I'm trying to use ScrollTrigger.batch with typescript, but I can't set the markers nor the triggers, when I try yo put the markers for instance it says: Argument of type '{ onEnter: (batch: Element[]) => Tween; markers: boolean; }' is not assignable to parameter of type 'ScrollTriggerBatchVars'. Object literal may only specify known properties, and 'markers' does not exist in type 'ScrollTriggerBatchVars'.ts(2345) my code so far: gsap.set(".work", { y: 100 }); ScrollTrigger.batch(".work", { onEnter: (batch) => gsap.to(batch, { opacity: 1, y: 0, stagger: { each: 0.15, grid: [1, 3] }, overwrite: true, }), markers: true, }); am I doing something wrong?
  5. Hello! I'm importing ScrollTrigger into a React component and noticed the ScrollTrigger import redlining. I installed gsap with yarn. I tried including the @types/gsap package but I see that all of the types are included in the gsap package already. There is a scroll-trigger.d.ts file in the gsap package but my import can't seem to find it. I've tried importing a few other plugins and they work as expected. Let me know if you have any ideas or if there's any additional info that I can provide. Thanks! Error message: Could not find a declaration file for module 'gsap/ScrollTrigger'. '[directory-name]/node_modules/gsap/ScrollTrigger.js' implicitly has an 'any' type. Try `npm install @types/gsap` if it exists or add a new declaration (.d.ts) file containing `declare module 'gsap/ScrollTrigger';`
  6. Hi! i'm trying to create a confetti animation in my react projecta, following some tutorial and code example i found but there are something that im not understand. See code: import React from 'react'; import { gsap, TweenMax } from 'gsap'; class Stars extends React.Component { render() { TweenMax.to('img', { xPercent: '-50%', yPercent: '-50%', }); const total = 70; const container = document.getElementById('container'); let w = container?.offsetWidth; let h = container?.offsetHeight; for (let i = 0, div; i < total; i++) { div = document.createElement('div'); div.className = 'dot'; container?.appendChild(div); gsap.set(div, { x: R(0, w || 1), y: R(-100, 100), opacity: 1, scale: R(0, 0.5) + 0.5, backgroundColor: 'hsl(' + R(170, 360) + ',50%,50%)', }); animm(div); } function animm(elm) { TweenMax.to(elm, R(0, 5) + 3, { y: h, ease: Linear.easeNone, repeat: -1, delay: -5, }); TweenMax.to(elm, R(0, 5) + 1, { x: '+=70', repeat: -1, yoyo: true, ease: Sine.easeInOut, }); TweenMax.to(elm, R(0, 1) + 0.5, { opacity: 0, repeat: -1, yoyo: true, ease: Sine.easeInOut, }); } return <p>oi</p>; } } export default Stars; what is the "R" function which set a value to 'x' and 'y' coords?
  7. Hi guys! Good morning. I'm newbie with GSAP and i'm learning it but i'm also trying to use it in my react project. so, i'll show peaces of my code before i explain the error: import { gsap, TweenLite } from 'gsap'; class MainScreen extends React.Component<IProps, IState> { constructor(props: IProps) { super(props); gsap.registerPlugin(TweenLite); this.state = { myElement: null, myTween: null, canInitCircles: true, }; } private initCircles = (div: any, canInitCircles: boolean) => { if (canInitCircles) { this.setState({ myElement: div, myTween: TweenLite.to(this.state.myElement, 1, { x: 500, y: 500 }), canInitCircles: false, }); } }; public render() { const { classes } = this.props; const { canInitCircles } = this.state; return ( <Wrapper className={classes.root}> <Circles ref={(div: any) => this.initCircles(div, canInitCircles)} /> <Planet /> <Navbar /> </Wrapper> ); } nothing hard to understand! I have a component called Circles which is a bundle of img html tags with some SVG in each of then and i'm trying to move this component, just to practice GSAP with React. (note: the prop 'ref' in Circles component, receive any). but i'm taking this warning: can anyone knows what its going on? i had already registered the TweenLite plugin at the constructor method. Also, i installed the GSAP by NPM, see on my package.json: "gsap": "^3.1.1",
  8. I've installed and imported GSAP and @types/gsap, and my file.ts import it well, but when i run gulp with the Typescript Gulp Configuration i get this error: Error: Cannot find module 'babelify' from 'D:path-to-directory\node_modules\gsap'. I've installed all babel components until i get one last error that tells me "cannot find the function canCompile".
  9. I can't seem to get PixiPlugin to function in my typescript application. Do I need to do anything specific to use PixiPlugin or does it come with the gsap npm install? I wasn't able to find an npm package for the pixiplugin so I assumed it came with the gsap install. I have the latest and greatest version of GSAP but can't get this to function. TweenLite.to(someSprite, 1, {pixi:{colorize:"red", colorizeAmount:1}}); I'm using Pixi5 and Gsap 2.1.3 What am i missing? Thanks!
  10. Hello. Recently I bought a package which contains DrawSVGPlugin. I want to implement this plugin in Ionic3 . As I know a npm package doesn't have plugins from club, nor @types/gsap. I added DrawSVGPlugin.js into node_modules/gsap and later recreated an android platform. In .ts file as import I tried: import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; and as calling plugin: TweenLite.to("#svg_1", 1, {drawSVG:"40% 60%", ease:Power1.easeInOut}); my html source of svg: <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none"> <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="45.78805" x2="87.36405" y1="45.24458" x1="8.28813" stroke-width="12.5" stroke="#000" fill="none"/> </svg> Can anyone tell me what I am doing wrong? Or is there different way of doing it?
  11. I'm working on a project where we use TS and would like to add the CustomEase lib. We have added the GSAP through NPM and since CustomEase isn't part of it for some reason I have hard time to find a way to get it working. The error i recive is: !!! ERROR: browserify: Cannot find module '../TweenLite.js' from '/Users/myuser/Projects/myproject/src/ts'
  12. When I am running my angular4 application and i start on a specific route, and navigate to any other route, I get this error ERROR TypeError: Cannot read property 'hasAttribute' of null When I search my entire project and all loaded dependencies, one of the files that uses hasAttribute is TweenMax and ScrollMagic. Does that mean my errors has to be somewhere in TweenMax or ScrollMagic. It looks like the app is trying to load or find a dependancy, as the error is piped out in the Webpack Bundle right before GSAP starts. If i start on app.about as my route, and goto app.contact or app.welcome or app.portfolio I get the hasAttribute error when I leave the about scene. I destroy a scrollmagic scene on leave but i do that in another place on another route and don't get this cryptic error. if i start on ANY other route, and goto about and then off about, i never get that error. So i guess my question is, do you think this is TweenMax related? assuming that error is thrown? or could there be a possibility that its something with webpack packing tweenmax, or maybe something else not necessarily TweenMax. I tried to clear the component in that route out to be 100% blank, and it still happens. The only time it doesnt happen is if i obviously start from another route, or I remove tweenmax and scrollmagic from my app, and then it works again.. i kinda feel this question will be hard to answer without someone just looking at the source 100%, so im not expecting much but just wondering if anything clicks for anyone?
  13. Hi, this is a confusing one for me, I have an Angular 2 app using typescript, this project is using the angular CLI I have been having problems with the GSAP import, the import statement in my component is as follows import { TweenLite, Linear } from 'gsap'; Now this works actually, I mean I can use the TweenLite object and do tween things and see the results on the page, however I was getting the build error through ng serve: ...@types/gsap/index.d.ts' is not a module. This is a problem because it prevents me from making a dist build. I noticed in the latest @types release the line export = TweenLite; was added to index.d.ts, I thought this might fix things so I updated it, but no, now I get the error @types/gsap/index"' resolves to a non-module entity and cannot be imported using this construct. I'm confused and don't fully understand how types work really but every other library I use either works like this or I use import * as ... from 'some lib' syntax and it works, can anyone help me get rid of these compilation errors?
  14. Hey guys I am Justin, first post here. The community over here seems to know there stuff so hopefully you can solve my problem with making tabs in GSAP I am making this website like eBay, but much smaller scale. The top of the site is broken into three tabs. Browse / My Hub / Sell. If the user is in the browse tab he will be searching listings (this is also the default tab on the home page) If the user is in My Hub he will be looking at account information and watchlist... If the user is in sell he will be selling things ect. I can do simple tabs no worries but I need help with advanced tabs. Each tab will have lots of links and links within links ect. But I want the tabs to act just like the tabs do in chrome, so the user can go to all different places in each tabbed section of the site and the other tabs will be right how they were... This is so users can be browsing and decide to add funds, sell something, look at there account, update details.... they can then go back to where they were browsing. Maybe I can use browser cache for the other two tabs that are not used each time the used tab page loads. I would almost want it so the user could upload photos in the sell tab wile browsing listings in the sell tab. I don't know if it can be done, but I am looking forward to any advice/basic codepen.
  15. Can you register it to typings for the use of typescript? https://github.com/typings/registry
  16. ulrich sinn

    greensock.d.ts

    It appears that the declaration file has: time(value:number, suppressEvents?:boolean):any; but should it rather be: time(value?:number, suppressEvents?:boolean):any; since it functions as a getter as well? the web storm compiler throws an error in the first case, not in the second.
×