Trouble reversing timeline when inside function

[thepandalion]

Hi,

My issue is to do with triggering a nested timeline in reverse, using Greensock and ScrollMagic. I realise ScrollMagic is a separate library but the difference in behaviour I am experiencing is to do with creating timelines either inside a function, or directly on a scrollmagic scene, so I hope somebody can possibly help.

 

I have created two codepens that sort-of replicate my issue. Unfortunately my actual issue is client work so I can't show the same code. But I've recreated the crux of the issue. Additionally my actual code has a pinned element rather than these elements being separate, but hopefully this is enough to explain my issue.

 

Expected behaviour: Scroll down the page - section 1 animation staggers out, section 2 animation staggers in. Scroll down again, section 2 animation staggers out, section 3 animation staggers in. Scroll back up the page - section 3 animations staggers out, section 2 animation staggers in. Again, section 2 animation staggers out, section 1 animation staggers in. 

 

I have created a function for fadeIn and fadeOut, and I then create another function "section2Anim", "section3Anim" that is a timeline containing both fadeout and fadein, in order for these two to happen at exactly the same time. (It's not visible on my demo because I don't have the element pinned, but on my pinned version, doing them at the same time basically means one set of dots appear to transform into the next set of dots. 

 

Problem: So, I found that the smoothest way to do this, which worked super well for me, when scrolling down the page, is method one, creating section2Anim as a function, and then applying it to the scrollmagic scene. This is this bit of my code: 

 

var section2Anim = function () {
    var tl = new TimelineMax();
    tl
      .add(fadeOutAnimation('#section1 svg circle'), 0)
      .add(fadeInAnimation('#section2 svg circle'), 0);
    return tl;
  };

new ScrollMagic.Scene({
  triggerElement: '#section2'
})
  .setTween(section2Anim)
  .addTo(controller);

 

You can see this working nicely scrolling down the page in my first codepen, however it does not work in reverse when scrolling up : 

 

See the Pen VGGQwp by thepandalion (@thepandalion) on CodePen

 

I have found that the only way to make it work in reverse too, is to not use the function and instead directly assign section2Anim to be the new TimelineMax. like this :

 

  var section2Anim = new TimelineMax();
  section2Anim
    .add(fadeOutAnimation('#section1 svg circle'), 0)
    .add(fadeInAnimation('#section2 svg circle'), 0);


new ScrollMagic.Scene({
  triggerElement: '#section2'
})
  .setTween(section2Anim)
  .addTo(controller);

 

You can see this working both forwards and backwards in my second codepen :

 

 

See the Pen ZMmEEb by thepandalion (@thepandalion) on CodePen

 

So why not just use the latter method, you ask? Well my problem is, as soon as I use this latter method instead in my client code, my animation starts not working properly from the outset, it leaves some of the dots behind (the SVG circles), and doesn't fully trigger the animation. It seems to get stuck and lag, even when just scrolling down. After a while of scrolling it may start to work smoothly.

 

What I am confused about is that in my first method, assigning the function, the animation works really smoothly which is what I want! But I just need it to work in reverse... and because this is all fairly new to me and I am not the best at Javascript anyways (more of a CSS gal), I am confused about why one way reverses and the other way doesn't.

 

I should mention I have also tried some other things with the second method, like pausing the timeline, then playing it on enter of the scroll magic scene, sadly it was still laggy. I appreciate my demo does not show the lagginess or leftover dots, because I had to cut them down for the demo, so maybe this seems fine. But I just can't wrap my head around why the first method, assigning the function of "section2Anim" to the scroll magic scene, works so nicely, but doesn't reverse, whilst the second does reverse, but doesn't work nicely in my actual code.

 

Any help at all much appreciated, thanks so much.

 

Panda

 

See the Pen VGGQwp by thepandalion (@thepandalion) on CodePen

[mikel]

Hi @thepandalion,

 

Welcome to the GreenSock FORUM.

 

Maybe this will help you further:

 

 

Happy tweening ...

Mikel

 

 

[thepandalion]

Hi Mikel,

Thanks, I have tried this method but unfortunately this is where I am finding my animation will not fully complete, I get some dots left over. (I only seem to be able to avoid this problem when I use the function method, but this doesn't reverse).

 

This is what I tried following looking at that codepen:

 

        var section2Anim = new TimelineLite({
            paused: true
        });

        section2Anim
            .add(fadeOutAnimation('.animation-intro .colored-circles'), 0)
            .add(fadeInAnimation('.animation-impact .colored-circles'), 0);



        new ScrollMagic.Scene({
            triggerElement: '#section2'
        })
        .on('start', function () {
            section2Anim.play();
        })
        .addIndicators()
        .addTo(controller);

 

My animation doesn't fully get removed and I'm not sure why. I must have having a very specific problem!   I can't attach the whole image but if you see below, the grey is my second image fading in, and the other dots on the left are ones left over from the first animation. But this only happens if I set section2Anim to a timeline itself and not to a function that creates the timeline. Not sure what the difference is! 

Thanks anyway,

Panda

[mikel]

Hi @thepandalion,

 

Do you mean the 'circles' in line 124, 303, which are paths and still 'hidden'.

 

What the reason to have here a path?

 

Best regards

Mikel

 

[thepandalion]

Hi Mikel,

The problem wasn't the paths, those should have been circles too but was an issue with the creation of my SVG.

 

Anyway I have found a way to fix my problem, in case anyone else comes across this. Instead of creating a new timeline max, I just triggered the fadein and fadeout functions at the same time on entering or leaving my scrollmagic scenes. This works in reverse and runs smoothly for me (no loss of circles)

 

        new ScrollMagic.Scene({
            triggerElement: '#section2'
        })
        .on('enter', function () {
            fadeOutAnimation('.animation-intro .colored-circles');
            fadeInAnimation('.animation-impact .colored-circles');
        })
        .on('leave', function () {
            fadeOutAnimation('.animation-impact .colored-circles');
            fadeInAnimation('.animation-intro .colored-circles');
        })
        .addTo(controller);

 

This works nicely for me. Still not sure why the other way lagged but maybe this just plays nicer with scrollmagic?

Cheers

Panda