Calling Timeline from a variable

[studiogram]

Hi, 

 

I try to call timeLines depending on which button is clicked, but I get errors. I've set a basic example on codepen.

What I try to achieve, is depending on the button clicked, to restart a TimeLine.

On my project, I have a lot of button, and I want to call the timeLines dynamically, without creating a different event for each button, 

 

Does anyone have an idea how to solve this ?

 

Thanks in advance,

 

Olivier

 

See the Pen GRKoMgZ by alguna (@alguna) on CodePen

[ZachSaucier]

Hey alguna and welcome to the forums,

 

One way to do that would be to create an object that maps the ID to the timeline like so:

 

const map = {
  "tl_A": tl_A,
  "tl_B": tl_B,
  "tl_C": tl_C
}

and in your click listener you use the map to fire the right timeline:

 

map[triggerId].restart();

See the Pen pozgWRK?editors=0010 by GreenSock (@GreenSock) on CodePen

[studiogram]

Waw ZachSaucier , didn't think about that, nice solution! Thank you very much!

[Shaun Gorneau]

Hi @alguna,

 

It's a namespace issue. Putting that Timelines in the window namespace will help you dynamically address them.

 

See the Pen ZEzQXem?editors=1111 by sgorneau (@sgorneau) on CodePen

 

EDIT: 30 minutes in and I'm already falling over other answers ?

What @ZachSaucier said!

[studiogram]

3 minutes ago, Shaun Gorneau said:

Hi @alguna,

 

It's a namespace issue. Putting that Timelines in the window namespace will help you dynamically address them.

 

 

 

 

Thank you very much Shaun Gorneau , that helped me a lot!

[Shaun Gorneau]

1 minute ago, alguna said:

 

Thank you very much Shaun Gorneau , that helped me a lot!

 

Happy to have helped in some way!

[PointC]

In addition to the great advice from Shaun and Zach, I thought I'd point you to this similar thread. It has a little bit of extra info which might help too.

Happy tweening.