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