Buggy className tweening

[mk1]

Can you scroll multiple time up and down and advise me why  the nav dots in the right top corner are not loosing their "isactive" classes on reverse? Mostly concern sections 4 and 5, sometime it's working well sometimes not, there is no visible pattern. Maybe there is a better way to tween classes the using .to with immediateRender.

 

Thanks in advance & Happy New Year!!!

function mainTimeline() {
    timeline_s1.add("start")
        .to("#S0", 0, {className: "+=isactive", immediateRender: false})


        .add("End S0")
        //.add("S1start")
        .addPause()

        .to($section_one, .4, {y: '+=40', autoAlpha: 0, ease: Power4.easeInOut})

        .add("S1start")

        .to("#S0", 0, {className: "-=isactive", immediateRender: false})
        .to("#S1", 0, {className: "+=isactive", immediateRender: false})
        .staggerFrom($section_two, .4, {y: '+=50', autoAlpha: 0, ease: Power4.easeInOut})

        .add("S1end")

        .addPause()

        //.add("S2start")

        .to(leftGif, .4, {x: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
        .to(rightGif, .4, {x: '+=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")
        .to($section_two, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S2")

        .add("S2start")

        .to("#S1", 0, {className: "-=isactive", immediateRender: false})
        .to("#S2", 0, {className: "+=isactive", immediateRender: false})
        .staggerFrom('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px"}, "S22")
        .staggerFrom($section_three, .4, {y: '+=50', autoAlpha: 0, ease: Power4.easeInOut}, "S22")
        .to(imessagewrapper, .4, {autoAlpha: 1, ease: Back.easeOut.config(1.7)}, "S22")

        .add("S2end")

        .addPause()

        .to('#innerDotWrapper', 0.4, {autoAlpha: 0, height: 0, marginBottom: "0px"}, "S3")
        .to(imessagewrapper, .4, {autoAlpha: 0, ease: Back.easeOut.config(1.7)}, "S3")
        .to($section_three, .4, {y: '-=40', autoAlpha: 0, ease: Power4.easeInOut}, "S3")

        .add("S3start")

        .to("#S2", 0, {className: "-=isactive", immediateRender: false})
        .to("#S3", 0, {className: "+=isactive", immediateRender: false})
        .staggerFrom($section_four, .4, {
            y: '+=50',
            autoAlpha: 0, ease: Power4.easeInOut, onComplete: function () {

                timeline_s3.play();

            }
        }, "S33")

        .add("S3end")

        .addPause()


        .to($section_four, .4, {autoAlpha: 0, ease: Power4.easeInOut})

        .add("S4")
        .to('#showQuote', 0.35, {y: '-=40px', autoAlpha: 0, ease: Power4.easeInOut})
        .to("#S3", 0, {className: "-=isactive", immediateRender: false})
        .to("#S4", 0, {className: "+=isactive", immediateRender: false})

        .staggerFrom($section_five, .4, {
            y: '+=50', autoAlpha: 0, ease: Power4.easeInOut, onComplete: function () {
                timeline_s4.play();
            }
        }, "Change class4")


        .add("end");
}

mainTimeline();

See the Pen by (@) on CodePen

[PointC]

HI mk1 

 

Could you put your question into a simplified CodePen for us please?

 

I know when you look at your own code it all makes perfect sense how everything is supposed to work, but when we're asked to look at it with fresh eyes it can be a bit difficult to troubleshoot. That's one reason we ask for a CodePen with all questions. The other reason is that we're able to fork your work, make changes and show you an edited solution. 

 

It doesn't have to be your active site. Just enough to demonstrate the problem. If you can recreate the issue with a few divs and a few dots, we should be able to help you.

 

For more info about creating a CodePen please see Carl's blog post.

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks and happy tweening.

[mk1]

Here's the codepen with core functions. However I am unable to recreate this bug on codepen. 

See the Pen bgbojM by Nikolaus91 (@Nikolaus91) on CodePen

[OSUblake]

You're only changing the background color, so why do you even need to tween the class? That can lead to problems, like setting the same class name more than once. 

[mk1]

So obvious solution... Thanks OSUblake! Fresh look usually provides a solution in times like this )