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?

ok I fixed it. started fresh and got it working.

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?

since we are updating this bad boy! Might as well give it a nice transition so when your mouse hits the edge of the view it doesn't snap. https://jsfiddle.net/Zuriel/qGcd9/394/

yeah i added the -ms-overflow-style: none;}and that did indeed fix those scrollbars! Sorry everyone for butchering your names! This is why I have a realtime code validator in my IDE Glad this is resolved Love my tweenmax

Hey guys! I wanted to take a look at this myself to see what all the fuss is about, so here is what I came up with. First, make sure you are using IE 9-11, this obviously doesn't show up in Chrome or Safari. 1) Using the codepen URL that louredun first posted, http://codepen.io/anon/pen/gaBYGe I absolutely see the scrollbars showing on his pen. So the problem is obviously there on "his" demo. 2) Using the codepen URL that Johnathan providen, http://codepen.io/jonathan/pen/MaPYxz Its no longer there. So i said, ok.. well... is it really still there but hidden? and the answer is, yes, its absolutely still there. take this example. You have a big roach on your floor, and your friend walks in and says, "HEY! its a roach!!!" and you then walk over and throw a carpet down over the top of it and say.. no its gone? i don't see it. So the question is, is the roach still there? or is it gone? well, its still there, its just hidden from view. and thats exactly what johnathan's code does. See setting the HTML and body to 100% height, and settings a wrapper to 100% height basically puts the scrollbars that loureadan is seeing down below the viewport. its absolutely still there you just don't see it because your seeing a div 100% the size of your screen. so you can debate if thats a actual fix, or just a way to hide the bug. thats up to you. now.. next point: loureadon says this code is causing the scrollbars in IE11, so i forked johnathans demo, modified the heights to 200px so you can indeed see the scrollbars are still there, and then i took louredans code and modified it IN draggable so that it has a background of GREEN and a custom size of 250px, and guess what... the scrollbars you see are absolutely 250px and green. so its definetally the offending code. http://codepen.io/Zuriel/pen/OyaWeL // in some browsers (like certain flavors of Android), the getScreenCTM() matrix is contaminated by the scroll position. We can run some logic here to detect that condition, but we ended up not needing this because we found another workaround using getBoundingClientRect(). div.style.cssText = "background:green;width:250px;height:250px;overflow:scroll"; so his question is valid, will changing that code have an effect on IE9-11 (if you made it overflow:hidden). Also is this a actual bug? if this code is suppose to be for android, why does it show up on internet explorer, can the next version of greensock draggable just check for android and do that code, or like (if !IE) do the code?

Thank you Jamie for the awesome demo and thank you Jack for adding your masters touch. I know that greensock performs great and I know that velocity performs great as well. I was really impressed with Julians video cast where he showed off velocity as well as all the code behind it and why he did what he did. I loved his demo. When I saw it I thought about tweenmax and using timeline max and what it would look like and you both hit that on the dot. with the 2 timeline calls you can really isolate each individual section and give artistic impression and change things up quickly to experiment. thanks for your great work guys!

can someone port this demo over to GSAP. I'd love to see the differences in the code as well as the speed / performance, etc. http://julian.com/research/velocity/demo.html and by port, i mean you can improve it. if timelineMax will make it better, for example.

You should really start with angular and learn it without any animation. The animation is the very very last step. With that said, check out this fiddle. This is how you animate something as a directive with a mouse event as well as I put it on a ng-repeat so you could see that the items don't actually exist in the dom yet and you can call them with the element attribute. http://jsfiddle.net/Zuriel/HEhkH/ You also shouldn't call anything with $('whatever') unless you plan on never reusing that component or directive for anything other than that sole purpose... which is difficult to understand and takes a little bit of angular to grasp. because in jquery you just bind to the class or ID of a item and animate it, but with angular you are creating reusable code. So you want something to animate on hover, you want to aim to create it so that it can be reused. I would check that fiddle out so you can see what i mean about creating a directive to do your animation, then I would read up on YearofMoo's animation article. You really need to focus on just learning angular because there is alot of stuff you can do but you want to make sure you do it correctly from the start. if you start doing alot of jquery body ready on load stuff then you are outside of angular at that point and anything goes! YearOfMoo's Animation Article Egghead.io Videos Thinkster build an angular app Good Luck!

I haven't upgraded to 1.2.1 yet but I was using the 1.2 RC and it did indeed fix itself. The only issue i have is throttling pages. with a animation time of 0 seconds you can rapidly click links and pages have no problem unloading and loading without issue but when you put animation into the equation you have to throttle the requests or you will have issues. If we assume a normal person won't rapidly click links we'd be ok but you start to notice the issue when you use the forward and back browser history (like clicking back 3 or 4 times) which invokes the in and out animations 3 or 4 times. I've remedied this mostly by telling tweenmax to force complete on all the cancelled animations which then calls the done(); for angular, but I feel like its still alot of code to deal with. You can see this problem on your own page here at http://yearofmoo-articles.github.io/angularjs-2nd-animation-article/app/#/ try rapidly clicking the views and you can see how angular doesn't clear the last view out and the new view is coming in. I was having this same issue on my pages using the forward and back buttons of history or rapidly changing pages. Another issue I am having is that because angular overlaps the animations. in and out happen at the same time, we have to responsibly control the delay of them.. and if we decide to do a fade between two scenes then we have to absolute position the views briefly when we fade them over top of eachother. otherwise if they are position:relative then they will stack and push eachother around. I don't know if the solution is that we have to create our own containers or ways to wrap the object of if there is a universal fix that could be applied at the core level for all animations people do with overlapping transitioned ng-views?

awesome! thank you for checking! on a side note, I rebuilt a project with angular 1.2rc2, UI-ROUTER 0.2.0-1.2angular branch and tweenmax and I don't have the same issues with a simple ng-view (or ui-view in ui-router) it works as it should... I am going to move forward with some stuff with 1.2 and see if any other more complex animations break when I start including more nested views and other controls, but i love the way 1.2 animations work so far. still don't think I can do any animation in cancel can i? or is there a way to defer the loading of a new state when you cancel the old state. but thats another question unrelated