Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Niklas EasyCode

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

Go to solution Solved by Niklas EasyCode,

Recommended Posts

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

  • Solution

EDIT:

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

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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".

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×