Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Katie Nolan

onReverseComplete not firing for timeline causing marquee to break

Recommended Posts

Hello! I am trying to recreate a scrolling marquee inside of a Vue Component that is extremely similar to the marquee shown below

See the Pen rNjvgjo?editors=1111 by GreenSock (@GreenSock) on CodePen

.

 

I have been trying to debug the issue but I find myself stuck. It looks like onReverseComplete is not firing causing the playhead to stop when the animation completes (instead of scrolling infinitely). I tried and onComplete does not seem to be firing either, only onStart, although from the docs/example it looks like I am using both correctly?

 

Could Vue be causing the issue or am I overlooking something? I'm still getting the hang of things. Any help or insight would be very much appreciated - thanks!

See the Pen xxdVaow by nolakat (@nolakat) on CodePen

Link to comment
Share on other sites

Everything seems to be working fine. You're not scrolling, so there's that...

const roll1 = this.rollText(".rollingText", {duration: 10});
gsap.to([roll1], {timeScale: direction * -1, overwrite: true});

 

this.direction doesn't exists.

 

And your animation has an ease on it. Look at the original.

vars = vars || {};
vars.ease || (vars.ease = "none");

 

  • Like 1
Link to comment
Share on other sites

Hi @OSUblake thanks for the help but my pen does not have an ease on it ( see line 56 ) and the text is scrolling (unless we are seeing something differently?). Thank you for pointing out the error in this.direction . It was left over from when I was trying to resolve why onComplete is not firing. I fixed that error, but unfortunately onComplete is still not firing when the timeline completes.

 

I'm trying to make the marquee match what GreenSock did in the example I posted above, only in Vue instead of vanilla js. It's not supposed to stop at the end and restart, like my pen does, but go on forever. 

 

 

 

 

 

Link to comment
Share on other sites

The default ease is power1.out. You need to have it as none. Look at the original code.

 

function roll(targets, vars, reverse) {
  const tl = gsap.timeline({
    repeat: -1,
    onReverseComplete() { 
      this.totalTime(this.rawTime() + this.duration() * 10); // otherwise when the playhead gets back to the beginning, it'd stop. So push the playhead forward 10 iterations (it could be any number)
    }
  });
  
  vars = vars || {};
  vars.ease || (vars.ease = "none"); // !!! 😀 Right here
  
  
  gsap.utils.toArray(targets).forEach(el => {
    let clone = el.cloneNode(true);
    el.parentNode.appendChild(clone);
    gsap.set(clone, {position: "absolute", top: el.offsetTop, left: el.offsetLeft + (reverse ? -el.offsetWidth : el.offsetWidth)});
    tl.to([el, clone], {xPercent: reverse ? 100 : -100, ...vars}, 0);
  });
  return tl;
}

 

Link to comment
Share on other sites

Sorry but I do have  vars.ease = "none"  inside my code as far as I can tell. Or am I misunderstanding something?

 

Please see the code snippet I posed below. It is also in my pen as well inside the method rollText.

 

      rollText(targets, vars, reverse){
            const tl = gsap.timeline({
                repeat: -1,
                onStart(){
                    console.log('START'); //<-- fires
                },
                onComplete(){
                    console.log('FIRE COMPLETE') //<-- does not fire
                },
                onReverseComplete(){
                     console.log('FIRE REVERSE COMPLETE'); //<-- does not fire
                     this.totalTime(this.rawTime() + this.duration() * 10);
                }
            });
          
          
            vars = vars || {};
            vars.ease || (vars.ease == "none"); // <-----HERE IS THE EASE  
          
          
            gsap.utils.toArray(targets).forEach(el => {
                    let clone = el.cloneNode(true);

                    el.parentNode.appendChild(clone);

                    gsap.set(clone, {position: "absolute", top: el.offsetTop, left: el.offsetLeft + (reverse ? -el.offsetWidth : el.offsetWidth)});

                    tl.to([el, clone], {xPercent: reverse ? 100 : -100, ...vars}, 0);
                });
                return tl;
        }

 

 

 

Link to comment
Share on other sites

The onReverseComplete will fire when it goes the other direction. Right now it's not changing directions because you're not scrolling.

 

  • Like 1
Link to comment
Share on other sites

And onComplete will not fire for an infinite animation unless you move the playhead way, Way forward. onReverseComplete fires because the playhead isn't that far away from the start.

  • Like 1
Link to comment
Share on other sites

Oh gosh I wrote '==' instead of '=' and that is why the ease 'none' wasn't setting. Guess I haven't had enough coffee today 🤪 Thanks so much for the help!

  • Like 2
Link to comment
Share on other sites

5 minutes ago, OSUblake said:

And onComplete will not fire for an infinite animation unless you move the playhead way, Way forward.

 

Example code to test that.

let obj = {
  value: 0
};

let animation = gsap.to(obj, {
  value: 100,
  repeat: -1,
  onComplete() {
    console.log("DONE")
  }
});

let duration = animation.totalDuration();
console.log(duration);
animation.totalTime(duration - 1);

 

  • Like 3
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.
×