(Angular) Scrolltrigger works in localhost but not after build on server

[Niklas EasyCode]

Hey guys,

 

I am using gsap for the first time in Angular and was trying the Scrolltrigger. In my localhost all works fine with this code:

 

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

ngOnInit(): void {
    // GSAP Animations
    gsap.registerPlugin(ScrollTrigger);
    this.ScrollAnimations();
}

  ScrollAnimations() {
    document.querySelectorAll('.readmore-block').forEach((box) => {
      const scrollBox = gsap.timeline({
        scrollTrigger: {
          trigger: box,
          start: 'top bottom',
          markers: false,
          scrub: 1,
          end: 'top center',
        },
      });
      scrollBox.from(box, { opacity: 0 });
    });
  }

 

The boxes faded in nicely but now we come to my problem.

I use "ng build --prod" to generate my project and loaded it on my server.

If I now look on my page, there isn't any animation and I got the following error in console:

Invalid property scrollTrigger set to {trigger: p.readmore-block.fadeIn.ng-tns-c45-3, start: "top bottom", markers: false, scrub: 1, end: "top center"} Missing plugin? gsap.registerPlugin()

 

Can anyone help me out?

Greetings, 
Niklas

[ZachSaucier]

Hey Niklas and welcome to the GreenSock forums.

 

7 minutes ago, Niklas EasyCode said:

Invalid property scrollTrigger set to {trigger: p.readmore-block.fadeIn.ng-tns-c45-3, start: "top bottom", markers: false, scrub: 1, end: "top center"} Missing plugin? gsap.registerPlugin()

That warning means that ScrollTrigger is not being loaded. So it seems that treeshaking is getting rid of it for some reason. It shouldn't be treeshaken given you're referencing it in the file though... What are you using to build your project?

[Niklas EasyCode]

Hey Zach,

thanks for the fast response. I am using the build in Angular CLI to build my project and using the command "ng build --prod".

 

I don't know why its is getting rid of this one line of code..

[Niklas EasyCode]

EDIT:

If I am using "ng build" all is working.

If I am using "ng build --prod" I got the described error!

[ZachSaucier]

I can't reproduce this.

• I used ng new to generate a new Angular project.
• I installed GSAP via npm install gsap.
• I edited my app.component.ts file to be the following:

  import { Component } from '@angular/core';
  import { gsap } from 'gsap';
  import { ScrollTrigger } from 'gsap/ScrollTrigger';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'ng-test';
  
    ngOnInit(): void {
      // GSAP Animations
      gsap.registerPlugin(ScrollTrigger);
      this.ScrollAnimations();
    }
    
    ScrollAnimations() {
      gsap.to(document.body, {
        opacity: 0,
        scrollTrigger: {
          trigger: document.body,
          start: 'top top',
          end: 'bottom bottom',
          scrub: 1,
        },
      });
    }
  }

• I built it using ng build. Ran it via http-server. It worked great! (the fade is only visible if your browser is small enough to require scrolling)
• I built it using ng build --prod. Ran it via http-server. It worked great!

So it seems it's some environmental issue that we can't help with at this point. I recommend following the steps that I took above to make sure it works on your system. Past that I'm not sure what to tell you.

[Niklas EasyCode]

Thank you for your response. 

I don't know the exact environmental issue but it is okay for me if it works with "ng build".