Jump to content
GreenSock

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

Niklas EasyCode

Members
  • Posts

    4
  • Joined

  • Last visited

Posts posted by Niklas EasyCode

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

×