jnalvit

Hi @OSUblake, Thanks a lot for providing the awesome feedback. I am glad you're here for help. One thing that I noticed is, when the browser window is resized to smallest size (~400px) or when debugging with mobile preview on Chrome, all the animations and scrolling runs very smoothly. Animations has improved on desktop. I believe I am still doing it wrong somewhere. I have updated the CSS and using NgZone for running animation code. Below is the code for homepage animation. I am doing it in a similar way for all pages. // A Node is the list-item containing Image + Description for each product on the page ngAfterViewInit() { this.nodes = this.eleRef.nativeElement.querySelector('.category-list').querySelectorAll('li'); this.nodes.forEach(node => { let nodeF = node.querySelector('.filler'), nodeT = node.querySelector('.text'), tl = new TimelineMax(); if (nodeF != null && nodeT != null) { this.ngZone.runOutsideAngular(() => { this.scene = new ScrollMagic.Scene({ triggerElement: node, reverse: false }) .setTween(tl .fromTo(nodeF, 1, {force3D: true, x: 0, ease: Power0.easeInOut}, {force3D: true, xPercent: '101' }, "trigger") .fromTo(nodeT, 0.5, {force3D: true, opacity: -1, x: -20 }, {force3D: true, opacity: 1, x: 0 }, "-=0.8", "trigger")) .addTo(this.controller); }); } }); } Now, I am using "will-change" only for the <span class="filler"> tag that rolls over the image to give a reveal effect. Thank again for helping me so far @glinkot Thank you for your suggestion. I will definitely look into it

Thanks a lot for your help on import issue! I figured out the issue with disappearing text. It was happening as I was Splitting the text on ngOnInit() method but doing it on ngAfterViewInit() solved it. Now, I am really stuck in finding the problem with animations on scrolling. This is the link of the site that I am working on. I am using ScrollMagic for animating images and text with TimeLineMax. In Google Chrome the scrolling is very slow; the FPS is around 25-30 on desktop and on mobile scrolling is pretty much dead. However, in Firefox there is no issue in scrolling but animations doesn't happen smoothly and it shows "will-change memory consumption" warning in console. I have included the snapshot for it. Can you please help/guide me on how to resolve this?

Yes, I used file from "commonjs-flat" folder. I used the uncompressed and minified files and put them in respective folders. Following works, but now the text in the tag disappears (will figure that out...hopefully) import from 'gsap/SplitText'; Thanks!

I am having issues importing SplitText as it was not included in package when installed through 'npm'. So, I pasted in to the package folder manually. And I tried this in Hero component: import { SplitText } from 'gsap/SplitText'; But this is giving error: TypeError: __WEBPACK_IMPORTED_MODULE_1_gsap_SplitText__.SplitText is not a constructor at HeroComponent I also add the variable in typings.d.ts along with other variable declaration like TweenMax, Power, ease etc. but it didn't help. Starting fresh doesn't help as mentioned here. Is anyone having issues like this. Kindly Help!