Search the Community
Showing results for tags 'angular2'.
-
Hello. I'm importing the Splittext js file, as explain on documentation https://greensock.com/docs/v2/NPMUsage?_fromLogout=1 , on an Angular environment. So i've: Insert the gsap-bonus package inside src folder imported in component using import SplitText from "./gsap-bonus/SplitText"; It generates this error though: Failed to compile. ./src/assets/libs/gsap-bonus/SplitText.js Module not found: Error: Can't resolve 'gsap/TweenLite.js' in '/Users/federica/Desktop/menatcode2020-menatcode-landing/src/assets/libs/gsap-bonus' So i've tried to import the SplitText.js file inside the UMD folder and it doesn't fails to compile but it throws an error on console: ERROR TypeError: _doc.createElement is not a function at _splitRawText (SplitText.js:423) at _split (SplitText.js:503) at _split (SplitText.js:496) Anyone could help me understand what's missing in the process? Thank you in advance
-
Anyone have any luck with angular2 and split text. when i try and run it on a component thats part of a template it bombs out complaining about SplitText .length which to me just says its not getting the template from Angular?? export class AboutBgComponent implements AfterViewInit { private spicy = "this is my text"; private mySplitText:any; constructor() {} ngAfterViewInit() { this.mySplitText = new SplitText(this.spicy, {type:"words"}); console.log(this.spicy) } } tried in the constructor, tried after init as well as a bunch of other things not included in this demo. So anyone who can spin up an angular2 app and let me know?
-
Hey, I've wondered on how you can use GSAP with Angular2 if anyone here have done that. I loaded the TimelineMax.min.js in my main index.html-file, but having problem importing it into a component. My component look like this: import {Component} from 'angular2/core'; //import {TweenLite} from 'gsap/src/minified/TweenLite.min.js'; //import {TimelineMax} from 'gsap/src/minified/TimelineMax.min.js'; //import {TL} from 'gsap/src/minified/TimelineMax'; import {TL} from 'gsap/src/uncompressed/timelinemax'; @Component({ selector: 'opning', templateUrl: './components/opning/opning.html', styleUrls: ['./components/opning/opning.css'] }) export class OpenCmp { constructor() { console.log("played"); console.log(TL); // console.log(TweenLite); // var tl = new TimelineMax(); /*var logo = $("#logo"); tl.from(logo, 4, { z: 500, y: 74, visibility: "visible" }); //tl.from(logo, 2, { left: "632px" }); tl.play(); */ } } I installed gsap with npm install gsap so it is in my projects /node_modules/ . Have tried several approaches, but i can not set tl = New TimelineMax() in that typescript class and I dont know how to load\import it. Anyone done this with angular2 ? I used this as my starting point: https://github.com/mgechev/angular2-seed
-
I read every topic about angular and webpack but I can't still solve the issue - how to use Pro functions in angular I have downloaded this repository https://github.com/AngularClass/angular-starter then I created private npm package called 'my-business-gsap' (in a folder on the desktop by npm init - and fill only necessary fields) I copied files from common-js plus folders 'minified' and 'uncompressed' then I went back to project and add my private package by npm install "path to folder" I added folder with gsap typescript definitions and wrote reference to custom-typings.d.ts And If I want to use it, I have to add it part by part like that (simple - import 'my-business-gsap' not working) import { Component, OnInit }from '@angular/core'; import { TweenMax } from 'my-business-gsap' import { EasePack } from 'my-business-gsap' import { TimelineMax } from 'my-business-gsap' import { CustomEase } from 'my-business-gsap' import $ from "jquery"; @Component({ selector: 'home' templateUrl: './home.component.html' }) export class HomeComponent implements OnInit { constructor() {} public ngOnInit() { var element = $("#coin > div"); var timeline = new TimelineMax({ repeatDelay: 1.2, repeat: -1, yoyo: false }); timeline .to(element, 0, { rotation: 1 }) //.. more code... .staggerTo(element, 1.5, { rotation: -1260, ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.332,0.678 0.654,0.808 0.819,0.875 0.88,0.874 1,1") }, .06) //.. more code... } } Simple Tweens or Timelines are ok but things like CustomEase... is possible to compile but in chrome its throw message core.es5.js:1084 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'create' of undefined CustomEase is undefined Is there somebody who could help me, please?
- 9 replies
-
- business gsap
- webpack
-
(and 1 more)
Tagged with:
-
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?
- 10 replies
-
- angular2
- typescript
-
(and 1 more)
Tagged with:
-
Hello, friends! I am working on Angular2 powered project and have some issue with tweening dynamic elements. Everything works fine alone, but if i do parallel animation of a couple elements - something brakes: inner text of tweened div is not updating until some user-event, like click/touch/mousewheel. The same for css transitioned elements, that dont used by any gsap tools. The problem is not stable on desktop (chrome/opera), as i think, it starts to bugging when i go to other tab, do something and go back to my tab. But it stable in iOs Safari 8.3/10.2. As for Angular side - i'm doing all along 'best practise': all targets are element refs all tweens are emitted after view init lifecycle hook and subscripiton on target (check that it is exist) At this moment all animations are by TweenMax. What can cause the problem?
-
I'm able to import and use TweenMax in Angular2 with ES6 and it's working great in the environment. I've include the gsap libs into my build through npm and I'm importing the module using ES6 like so: /** * Import Libs */ import * as TweenMax from 'gsap'; /** * Exports for others scripts to use */ window.TweenMax = TweenMax; but when attempting to import the Draggable utility import * as Draggable from '../node_modules/gsap/src/minified/utils/Draggable.min'; I get the following error: Draggable.min.js:15 Uncaught Error: Cannot find module "TweenLite" In ES6 do I have to export TweenMax first for the Draggable module or is there another method for making the TweenMax module available for the Draggable module?