forEach Trigger on Timeline Function

[pauljohnknight]

Hi,

 

I have a text slider than has two alternate text slides animating in and out within a container, and this code is animated with GSAP (Codepen link provided).

 

I want it to trigger with a forEach function, because I have a couple of instances of this same effect on a page.

 

So I set up a basic forEach function that will trigger the animation as it scrolls into view, but when I use this method to invoke the sliders() animation function, I get all sorts of unexpected behaviour.

 

In my if/else statement when i just do a basic test line (i.e. item.style.background = "green";) it works, but when add put the sliders() function call in it all goes a bit haywire.

 

Does anyone know what is happening? Or what the best solution would be?

 

P.S if you want to see the intended behaviour of the animation, if you comment out the forEach section and re-comment in the slider() function call you'll see what the animation is meant to look like.

 

P.P.S Any help would be hugely appreciated.

 

function sliders () {
    var timerbar = document.querySelectorAll(".timerbar");

        var tl1 = new TimelineMax({repeat: -1});

        tl1
        .from(timerbar, 2, {scaleX: 0, ease:Power0.easeNone})
        .staggerTo(".js-stagger-1", .5, {y: -30, opacity: 0}, .2)
        .staggerTo(".js-stagger-2", .5, {y:0, opacity: 1}, .2)
            .to(timerbar, 0, {scaleX: 0})
        .to(timerbar, 2, {scaleX: 1, ease:Power0.easeNone})
        .staggerTo(".js-stagger-2", .5, {y: -30, opacity: 0}, .2)
            .to(".js-stagger-1", 0, {y:30, opacity: 0})
        .staggerTo(".js-stagger-1", .5, {y:0, opacity: 1}, .2);

}

// sliders();


// FOREACH TRIGGER ON TEXT SLIDES

var triggerBox = document.querySelectorAll('.one-col.js-scroll-trigger');

function scrollTrigger() {

    triggerBox.forEach(function(item){
        var boxPosition = item.getBoundingClientRect().top;
        var boxPositionPercent = (boxPosition / window.innerHeight) * 100;

        if (boxPositionPercent <= 100) {  // 100% equals bottom of viewport
                sliders();
            } else {
              // somehow kill the function
            }
    });

}

window.addEventListener("scroll", scrollTrigger);

 

See the Pen PQPxOG by pauljohnknight (@pauljohnknight) on CodePen

[PointC]

You're firing your scrollTrigger() function multiple times which in turn is firing the sliders() function over and over. The timeline that is created in the sliders() function is starting to play and then is immediately overwritten (many times) so all the starting positions of the elements get out of whack quickly. Recreating the timelines every time you hit the trigger is going to be problematic. I'd recommend looping through and creating your timelines in advance and simply play/reverse/pause them when needed. 

 

You may also want to look at something like ScrollMagic or perhaps the new Intersection Observer to trigger those animations. Here's a good discussion which talks about the Intersection Observer.

Here's a recent article on Smashing

https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/

 

Happy tweening.

 

[Visual-Q]

Point C is correct Scroll Majic is good for this type of thing. Here's a recent post that demonstrates somewhat similar functionality using scrolMajic and how to isolate the animation so it only fires when intended.

 

 

[pauljohnknight]

Hi Thanks PointC.  I have normally used scrollMagic for such things.  I was perhaps getting ahead of myself and thinking I'd found a simple solution for such a basic use case.  I should realise by now seemingly simple things are never simple. I'll have a look at the sectional observer article as well, I think i have seen an an Intersection Observer library by the guy who wrote that article. 

Thanks again,

 

Paul.

[pauljohnknight]

Also I forget to say,  if Greensock did a lightweight scroll trigger plug-in specifically for Greensock and had it as part of one of the paid memberships i think they'd make a small fortune.

[Visual-Q]

Quote

Also I forget to say,  if Greensock did a lightweight scroll trigger plug-in specifically for Greensock and had it as part of one of the paid memberships i think they'd make a small fortune.

3

 

It would certainly be nice... animation and scroll interaction pretty much go hand in hand these days.