Hi GSAPpers! First post in the forum... I code mainly html and css (and some -little- jQuery) and now I'm learning GSAP and "modern" vanilla JS since two week ago.
Today I'm testing GSAP combined with Scrollmagic. I'm trying to apply the same scene (a simple TweenMax with a fade in from the bottom) to all the elements of the page with the class "fadeInBottom". I can do it with this jQuery:
let controller = new ScrollMagic.Controller();
$('.fadeInBottom').each(function () {
// build a tween
let fadeInBottom = TweenMax.from($(this), 1, { y: 100, opacity: 0 });
// build a scene
let scene = new ScrollMagic.Scene({
triggerElement: this,
offset: -200,
reverse: false
})
.setTween(fadeInBottom)
.addTo(controller)
});
Now i'm trying to do the same in plain vanilla JS:
let controller = new ScrollMagic.Controller();
// FadeInBottom
let fadeElem = Array.prototype.slice.call(document.querySelectorAll(".fadeInBottom"));
let self = this;
fadeElem.forEach(function(self) {
// build a tween
let fadeInBottom = TweenMax.from(self, 1.5, { y: 100, opacity: 0 });
// build a scene
let scene = new ScrollMagic.Scene({
triggerElement: self,
offset: -200,
reverse: false
})
.setTween(fadeInBottom)
.addTo(controller)
})
But it just doesn't work. And the console says
Uncaught ReferenceError: controller is not defined
at index.html: ".addTo(controller)"
at Array.forEach (<anonymous>)
at index.html:861 "fadeElem.forEach(function(self) {"
Any help would be appreciated. Thank you!