Jump to content
GreenSock

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

Scrollmagic + GSAP: apply the same scene to all the elements of the page with the same class

Recommended Posts

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!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Very tough to diagnose without a reduced demo.

However, I'm not really sure how this question relates to GSAP. Seems something is making controller undefined and that isn't obvious to me.

 

Perhaps if you create a super simple demo as explained here: 

it might be easier to help. 

  • Like 1
Link to comment
Share on other sites

Thanks Carl.

Made a codepen with a reduced test case and the JS code I already had works just fine!
Anyway, here is the codepen in case there is someone trying to do the same thing.

 

See the Pen oOXrRY by fedechinaski (@fedechinaski) on CodePen

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×