Scrollmagic: Calling a function when an element scrolls into view

Created on 27 Mar 2015 · 8Comments · Source: janpaepke/ScrollMagic

My requirement is to call a function when an element scrolls into view. The trigger will be selected based on the class, and I will need to get the ID of the element it has selected.

So, as the user scrolls down and a new instance of this class appears (at the bottom of the viewport when scrolling down or the top of the viewport when scrolling up), I would like to call a function.

Is this possible with ScrollMagic? I have tried lots of different things but cannot get anything to fit what I need it to do. An example of what I have tried is below, but this is only called when the page first loads, and returns 'undefined'.

    tween = new TimelineMax()
            .add(function () { alert(jQuery(this).attr('id')) })

    scene_GetCurrentScreen = new ScrollMagic.Scene({ triggerElement: ".Screen", duration: 100, offset: 0 })
                    .setTween(tween)
                    .addTo(controller);

Thanks so much for your help, and keep up the good work. What you have done here is superb.

Ben

support

Source

BenjoJ

Most helpful comment

Hi BenJo

ScrollMagic, unlike Superscrollorama, supports its own events.
There's really no need to make the detour via TweenMax. You don't actually need GSAP at all for this.

You can do it just like this:

new ScrollMagic.Scene()
    .on('start', function () {
        console.log("passed trigger");
    })
    .addTo(ctrl);

Check out this fiddle: http://jsfiddle.net/janpaepke/qtx2Lju1/

For more information on events, check the documentation.
For an example on what you can do with custom events, check out this example.

hope this helps,
J

janpaepke on 27 Mar 2015

👍13

All 8 comments

Hi, I feel I'm getting a little closer. I have added the scene init code to the jQuery scroll listener and it is now calling it when the user has stopped scrolling.

The problem now lies in the fact that in my function I am using jQuery(this), but I think the object it is finding is the scene (or tween) iteself, rather than the .Screen element.

jQuery(window).scroll(function () {
    clearTimeout(jQuery.data(this, 'scrollTimer'));
    jQuery.data(this, 'scrollTimer', setTimeout(function () {
        tween_GetCurrentScreen = new TimelineMax()
        .call(function () { console.log(jQuery(this).attr('id')) })


        scene_GetCurrentScreen = new ScrollMagic.Scene({ triggerElement: ".Screen", duration: 100, offset: iScreenSize })
                        .setTween(tween_GetCurrentScreen)
                        .addTo(controller);
    }, 150));   
});

Apologies for the way github is formatting my code.

Thanks

Ben

BenjoJ on 27 Mar 2015

Hi BenJo

ScrollMagic, unlike Superscrollorama, supports its own events.
There's really no need to make the detour via TweenMax. You don't actually need GSAP at all for this.

You can do it just like this:

new ScrollMagic.Scene()
    .on('start', function () {
        console.log("passed trigger");
    })
    .addTo(ctrl);

Check out this fiddle: http://jsfiddle.net/janpaepke/qtx2Lju1/

For more information on events, check the documentation.
For an example on what you can do with custom events, check out this example.

hope this helps,
J

janpaepke on 27 Mar 2015

👍13

Thanks J, that's a much better solution.

I'm still having trouble getting the ID of the element that has passed the trigger, as no matter what I try I always receive 'undefined'. jQuery(this) obviously does not get the element itself, but the scene, I expect. Is there any way of doing this please?

new ScrollMagic.Scene({ triggerElement: ".Screen", duration: 500, offset: iScreenSize / 2 })
    .on('start', function () {
        console.log(this.id); <-- Pseudocode
    })
    .addTo(controller);

BenjoJ on 28 Mar 2015

Indeed this in the callback refers to the scene.
If you want to return the trigger element, you can use this.triggerElement().

Note, that one scene can only have one trigger element.
So if the .Screen selector returns multiple elements, the first one will be used.

If you want the same scene for multiple elements, check this out: https://github.com/janpaepke/ScrollMagic/issues/215

janpaepke on 28 Mar 2015

👍5 😄3

That worked perfectly Jan, thanks so much for your help.

jQuery('.Screen').each(function () {
    var currentScreen = this;
    new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H })
        .on('start', function () {
            console.log(this.triggerElement().id);
        }).addTo(controller);
});

BenjoJ on 31 Mar 2015

👍4 😄3

@BenjoJ thanks a lot for the raising this issue and for your good conclusion 👍 😄