timeline replay issue

[evilSpookie878]

Hi guys.  
I'm new to gsap as well as javascript.

I am trying to make 'when user switch to another tab, the timeline effect will replay',but now got kind of stuck..

the effect will show at first, but when I switch to another tab, it won't display.
By the way,I use bootstrap 3.37 for framework.

Here's the codepen

See the Pen GbJYza by UHU (@UHU) on CodePen

[GreenSock]

I'm not sure I understand your question - when you say "switch to another tab" do you mean the circles, part1, part2, and part3? Or do you literally mean another tab of the browser? 

 

I definitely see a problem in your code: 

tweenLi[i].addEventListener('click',tweenAni());

 

When you put "()" after the function reference, it tells the browser to call that function immediately, so you're putting the RESULT of that function (whatever is returned) as the event listener which I'm sure isn't what you meant to do. Your tweenAni() function doesn't even return anything. It just creates and executes a timeline immediately. 

 

If your goal was to call tweenAni() whenever someone clicks on one of the elements in the tweenLi[] list, remove the "()" so you're just passing the function reference in. But again, I'm not really sure what you're trying to accomplish so that may not solve all the problems. 

[evilSpookie878]

Sorry for my unclear expression.
Yes, "switch to another tab" means clicking the circles part1 , part2 and part3.
Thank you guys @GreenSock for the crisp reply , I just solve the question.

But I think my code is lengthy. is there any way to improve this code?

Much appreciated!