Jump to content
Search Community

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

fedehache test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...