ScrollTrigger (Invalid property ScrollTrigger set to [...] Missing plugin? gsap.registerPlugin())

[Arman151]

Hi,

 

I was trying to create an animation using ScrollTrigger but is says that the element I set as trigger is not allowed. Here is how I wrote my code:

 

for (i=0, len=options.length; i<len; i++){
  			console.log(i);
			gsap.fromTo(options[i], {
					opacity: 0,
					scale: 0.9,
					y: function(index, target, targets) {
						let y = target.id == "new" ? "50%" : "30%";
						console.log("y: " + y);
						return y;
					}
				}, {
					ScrollTrigger: {
						trigger: options[i],
						start: function(self){
							let rect = self.trigger().getBoundingClientRect(),
								start = self.trigger().id == "new" ? (-0.55*rect.height) + " " + rect.y : -0.35*rect.height + " 90%";
							console.log("start: " + start);
							return start;
						},
						end: function(self){
							let rect = self.trigger().getBoundingClientRect(),
								end = self.trigger().id == "new" ? (-0.55*rect.height) + " " + (6*vh+90) : "+=" + rect.height;
							console.log("end: " + end);
							return end;
						},
						scrub: function(self) {
							let scrub = self.trigger().id == "new" ? 1 : 0.5;
							console.log("scrub: " + scrub);
							return scrub;
						},
						once: true,
						markers: true,
					},
					opacity: 1,
					scale: 1,
					y: 0,
					ease: 'sine.inOut'
				});
		}

"options" is an Array of elements and "new" is the ID of the first (index = 0) element. Different settings should be applied to #new.

The error I get says there is something wrong with the trigger, but I can't figure out what. I am certain that I'm not missing a plugin because I tried writing the same code differently  like this:

var rect, offset, top, start, end, scrub;
	for (i=0, len=options.length; i<len; i++){
      console.log(i);
		rect = options[i].getBoundingClientRect();
		if (i == 0){
			offset = "50%";
			top = -0.55*rect.height;
			start = top + " " + rect.y;
			end = top + " " + (6*vh+90);
			scrub = 1;
		}
		else {
			offset = "30%";
			start = -0.35*rect.height + " 90%";
			end = "+=" + rect.height;
			scrub = 0.5;
		}
		gsap.fromTo(options[i], {
			opacity: 0,
			scale: 0.9,
			y: offset
		}, {
			scrollTrigger:{
				trigger: options[i],
				start: start,
				end: end,
				scrub: scrub,
				once: true,
				markers: true
			},
			opacity: 1,
			scale: 1,
			y: 0,
			ease: 'sine.inOut',
			onEnter: function(){
				console.log(this.targets()[0]);
			}
		});
	}

and this version works perfectly fine. It wouldn't have if I was missing a plugin.

Can someone tell me why the second version works and the first one does not?

 

The design is for mobile, so decrease your browser window's width if it didn't look good.

See the Pen jOmrrrb by Arman151 (@Arman151) on CodePen

[OSUblake]

You have a capital "S" in ScrollTrigger in the first one. When using inside an animation, it should be camel cased like scrollTrigger.