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.