Zuriel

Although I don't use blakes implementation in this post (I use scrollmagic which is a scrolling system made for TweenMax and has parallax , pining, easing, and a ton of other advanced features) I have parallax / fading / scroll based animations on my personal site and it works great on mobile. check it out at zadesigns.com I use a combination of iNOBounce and ViewportUnitBuggyFill to get it to work. the only downside is that you are stuck with the address bar and the tab bar... but blame Apple for that. good luck

I haven't tried Angular7 so I can't comment on if there is any change there, but for me, I just don't use build-optimizer. you can see the full list of optimizations that build optimizer does here I am not sure if anyone higher up has time to look at the optimizations build optimizer does and see if there are any workarounds or can give us any more insight

ok a bit of a update. I took the super simple approach. Brand new 100% spanking new blank folder. Angular-cli ng new my-dream-app went into the single page hello world app, and did npm install --save gsap went into my app component. import { AfterViewInit, Component } from '@angular/core'; import { TweenMax } from 'gsap/all'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { title = 'my-dream-app'; ngAfterViewInit () { TweenMax.to('#logo', 10, {x: 500}); } } HTML template has #logo as the image. run it. works fine. ng build --prod --aot --build-optimizer and this is the result Navigated to http://localhost:8000/ 10:13:51.319 main.5ee00d0bacee9aaa3c86.js:1 ERROR TypeError: Cannot read property 'to' of undefined at e.ngAfterViewInit (main.5ee00d0bacee9aaa3c86.js:1) at ni (main.5ee00d0bacee9aaa3c86.js:1) at ti (main.5ee00d0bacee9aaa3c86.js:1) at ei (main.5ee00d0bacee9aaa3c86.js:1) at Object.wi [as checkAndUpdateView] (main.5ee00d0bacee9aaa3c86.js:1) at e.detectChanges (main.5ee00d0bacee9aaa3c86.js:1) at main.5ee00d0bacee9aaa3c86.js:1 at Array.forEach (<anonymous>) at e.tick (main.5ee00d0bacee9aaa3c86.js:1) at e._loadComponent (main.5ee00d0bacee9aaa3c86.js:1) Cannot read property 'to' of undefined. which is TweenMax Is there something I am missing that I need to be doing to get this working? or are we under the agreement that build-optimizer doesn't work? and since it doesn't work, is there any workaround to get it to work? This is a pretty easy test to replicate with angular-cli as it took me about 30 seconds to setup and 1 minute to install angular-cli. Any takers?

This is how far I get with --build-optimizer ERROR TypeError: Cannot read property 'fromTo' of undefined and this is the first offending result const sceneIn = new Scene({ triggerElement: this.heroWrapper, offset: '0', triggerHook: 0, duration: '100%' }) .setTween(TweenMax.fromTo([this.strip, this.scrollWrapper], 1, {opacity: 1}, {opacity: 0})) .addTo(this.aboutSMsc); } If i don't do build-optimizer = true in my config and i leave it just --aot and --prod, it works but the bundle is larger, etc. Also using a webpack analyzer TweenMax is in both builds, so its something else that its doing to it.

well regardless, nothing I do makes build-optimizer work. I turn it off my vendor bundle is 1.2 megs, turn it on its 900k. but the site doesn't work, so either its just dumping the entire tweenmax out completely, or its just not happy with some of the stuff GSAP does so it can't optimize correctly. If anyone has successfully gotten build optimizer to work that is what I am trying to figure out.

sorry I edited my post as you were replying. I was saying it doesn't work, not works. so when I do declare module 'gsap/all' { export = gsap; } it gets rid of the intellisense errors because now all is gsap, but it doesn't work, i stll get errors in the site and no animations work. the only way i've ever gotten TweenMax to work in the past was a full .min.js include in my scripts, but I get a larger vendor bundle. build-optimizer is new in Angular6 I believe? not sure I didnt use it in 5 and had no issues but thats the only way i can get it to work but all my file sizes are larger with build-optimizer off. @types/gsap seems like its for 1.19 // Type definitions for GSAP 1.19 // Project: http://greensock.com/ // Definitions by: VILIC VANE <https://vilic.github.io/>, Robert S <https://github.com/codebelt>, Richard Fox <https://github.com/ProbablePrime>, Philip Bulley <https://github.com/philipbulley> // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped /// <reference path="Animation.d.ts"/> /// <reference path="Ease.d.ts"/> /// <reference path="TweenConfig.d.ts"/> /// <reference path="Tween.d.ts"/> /// <reference path="Timeline.d.ts"/> /// <reference path="Plugins.d.ts"/> declare module 'gsap' { export = gsap; } seems like maybe thats part of the issue, gonna just keep digging i guess

Oddly enough when I try to do import { TweenMax } from "gsap/all"; I get a module not found error with this message. TS7016: Could not find a declaration file for module 'gsap/all'. '/Users/Zuriel/Repository/ZA2017/node_modules/gsap/all.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';` So I installed @types/gsap and it still didn't change, so then I just did the declare module'gsap'; in my typings file in angular. it doesn't work and the Module still doesn't color code correctly in my syntax. Something doesn't seem right Also get console errors that it can't find "fromTo" so tweenmax isn't working

https://stackoverflow.com/questions/51123831/ng-build-prod-cannot-set-property-autoactivated-of-undefined That is not my stack overflow question but I had the same issue when I was recently updating my site to Angular6. Couldn't use the AOT option in Angular6. I saw somewhere that the next version of GSAP would be modular? Do you know of any current workarounds or have any more info about what they were saying in that post?

I use scrollmagic and tweenmax in my angular projects and I recently swapped over to a newer ES6 version of scrollmagic called Scroll Wizardry its a drop in replacement so you can replace your calls from scrollmagic to scroll wizardry. I am not sure how much difference the performance is but it seems to work great for me. https://github.com/homerjam/scrollwizardry and if you use vue.js here is a wrapper for it, but if you use something like angular or plain JS you can just call it the standard way. https://gist.github.com/zurie/f816c1d6569d28b2eafa7fea71b7ed95

thanks Carl! I figured we were doing something similar because of the rock solid smooth performance, guess that is why i never needed another tool

Can you tell me anything about FastDOM and if GSAP uses something similar or if you have ever heard of it, etc? I personally haven't heard anything about it until recently when someone recommended it to prevent some layout thrashing (something you see commonly with parallax animation where you are trying to move something based on scroll position, etc, etc). Whatever it is doing or whatever it does, it seems to boost performance. Do you know anything more about the techniques it uses and does GSAP do something similar? different? better? or are there some drawbacks to the process that FastDOM is using? etc. https://github.com/wilsonpage/fastdom

I didn't know if there was a showcase thread but I wanted to share my latest website with you all. https://zadesigns.com make sure to check it out on both the Phone and Browser because it's been designed to be friendly to phones. The site was created with Angular 4.4.6 / UI-Router / Material Design / GSAP 15 / ScrollMagic / SplitText Thanks to Jack and everyone at GSAP for making really great products! Been using GSAP since the good old days of Flash. Also congrats on the new Animation UI dev tool! I haven't had a chance to use it yet but I wish I saw it before I made my site! Thanks! Zuriel

I can't speak for visual studio but if you are using node.js or npm to install dependencies you could try a alternate version npm install @types/greensock --save-dev for some reason the types/gsap was not working for me but this forked version did.

found it. Had a Navigation component with some left over code that refrenced the app-about page. so when you start with app-about it blows up on exit, but not sure why it works after that, either way, it was a bug and removing that code it works great. so good to go. and the left over code was a Scrollmagic scene, so it was indeed something that involved TweenMax (indirectly)/ScrollMagic

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?