dmitryBz

Locally now i am importing gsap to build: import { TweenMax, TimelineMax } from 'gsap';import Draggable from 'gsap/Draggable';It is another problem, that i resolve by updating to typescript 2.2.1. New typescript fixes the missing imports. (Before i was importing with require). But my thread-main problem was in both ways. I made a repo with clean test app, that reproduces the afterViewUpdate problem.

But be carefull with that kind of help. I am still not sure that my implementation is a good practise. I can't now test it on other setups of Angular (At this time i use angular-cli@1.0.0-rc.0, angular@2.4.8, typescript 2.2.1), but in plunker (Angular 2.4.1) i cant reproduce Draggable viewCheck loop. In clean angular-cli app (from my setup) problem exist.

OSUblake, dear, you saved my nerves by finding this article! I am watching on this github issue from start using angular2. Animations..Few week's they said... So I started to use greensock power again. At this moment problem seems to be fixed. Running gsap tools outside the Angular works fine for me. No more tonns of viewUpdates and not updated bindings. For persons, who have similar problems, i just leave it here: import { ..., NgZone} from '@angular/core'; constructor(private ngZone: NgZone) {} //Run things outside angular this.ngZone.runOutsideAngular(() => { this.draggable(); // Draggable.create(..etc) this.myTweens(); // Tweenmax.to(..etc) }); //Tell angular to fire view check (in somewhere outside function) this.ngZone.run(()=>{ this.someVar = true; //change var and tell angular to update it }); That look's not good, but as OSUblake noticed- at this time angular2 not properly supports 3rd party animations. Thank you all for answers, especially OSUblake.

OSUblake, i think, you made my night! Last article talking about ngZone and perfomance of excluding something with ngZone.runOutsideAngular(). It got me thinking about ngAfterViewChecked hook, that I didn't used before. In my posts i didn't say that i have a Draggable instance here, because i did a lot of test variations and thought that it not causes problems, I was wrong.. my bad.. Back to ngZone: When i create a draggable instance - afterViewChecked event fires in a loop! When you leave the browser tab - it stops and when you come back after cople of time - it doesn't. And it doesn't fire on tweens anymore. I think that represent a part of my problem. I removed draggable from my component and now all seems to work fine. By the way, tweening fires viewChecked event too, i think, because of RequestAnimationFrame(), should i run all my tweens outside the Angular? Now i leave to play with ngZone and gather back my test-scattered code.

As logic, my tween's are very simple: var selectedIndex =0; Slide in img[selectedIndex] and text[selectedIndex] On mousewheel - fade out text, slide out current img onComplete: promise selectedIndex++, then slide In img/text[selectedIndex]..etc As single tween everything working just fine. But all this complicated with some other tweens, routing change, callbacks.. You're right about $scope.$apply() in Angular 1.x, in Angular 2 zone.js do all this things for us. You reminded me...callbacks... Is it normal to use it like this? TweenMax.to(element, 0.5, { vars, onComplete: () => {this.callFunction()} }); I do that, because i cant call component functions iside the normal onComplete: function(), onCompleteParams: [{}]. This is because onComplete has a different scope, as i think. If it is normal, my second thought - what if my stucking variable is changing in different scope, that zone is not watching or get bugs over there?

Yes, i did that, and then did that one more time before posting thread here All my code is based on similar questions on stackoverflow. But i can't decide - is my way correct or not... Can dynamic property binding of Angular2 brake something in already tweened element? Because without setTimeout first tweens iteration are just fine (on page load), but next are done again with previous text binding (on changing slide and description in my project). After tweening - bindings are not updated until click/touch/mousewheel.

You're right, but: Adding event listener to component is not an 'Angular2 way'. I have a load bar here, that subscribed and animating by another component callbacks and don't want to wait untill DOM is loaded. I have to wait when only specific elements resolves. .delayedCall() is fine, but just another implementation of setTimeout, that can't provide expected result for all possible cases. (e.g. slow device/slow connection...etc)

Creating an example to reproduce the problem is very complicated in this case. This thread was a cry from the heart after a few days trying to fix this problem. Now i think i found the problem source. Over the past few days i did a component elements refs checker, because i start tweening immidately after app loads, that looks like: @ViewChild('projectsWrapper') projectsWrapper:ElementRef; @ViewChildren('qprojectsWrapper') qprojectsWrapper: QueryList<any>; ngAfterViewInit() { this.qprojectsWrapper.changes.subscribe((res:QueryList<any>) => { console.log('VI: PROJECTS WRAPPER', this.projectsWrapper.nativeElement.children); this.cmpCount(); }) //...same for each checked element }; cmpToLoad = 3; //ELEMENTS TO CHECK cmpCount() { if(this.cmpToLoad > 1) { this.cmpToLoad--; console.log('PROJECTS-CMP: to load: ' + this.cmpToLoad); } else { this.afterViewLoaded(); } } afterViewLoaded() { //do GSAP stuff }; I did a few tests and found that it worked as i want, but NO. Today i wrap afterViewLoaded() to setTimeout function with delay of 1s and everything start to works fine. Now my question is how to correctly delay my GSAP tools to wait for app fully loads?

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?