[Dynamic play function $variable.play();]

Hi all,

 

I am trying to make some sort of a dynamic play function. But.. I am have some difficulties to make it work!

 

My timeline:

 var slide1 = new TimelineMax({paused: true, onComplete:slide1DoneFunc}) ;        
    var homeIntro = $(".verticalHelper");
    var text1 = $(".homeText1");
    var text2 = $(".homeText2");
    var text3 = $(".homeText3");
    var text4 = $(".homeText4");
    var clickExplore = $("#centerBottom");
    slide1.set(homeIntro,{display:"block"})
    .set(clickExplore,{display:"block"})
    .to(text1,0.5,{opacity: 1, ease:Power1.easeIn})
    .to(text2,0.5,{opacity: 1, ease:Power1.easeIn})
    .to(text3,0.5,{opacity: 1, ease:Power1.easeIn})
    .to(text4,0.5,{opacity: 1, ease:Power1.easeIn})

 

function slide1DoneFunc() {

        console.log("done!")

    } 

 

 

 

 

 

 

 

   

 

To play the timeline I am using this code: (which works, but not dynamically)

$(".play").click(function() {
    
slide1.play();
    
});    

In order to retrieve the value "slide1" I made a variable. The variable is updating once a vistor is visiting the next slide.  I want to pass the value of the variable into the play(); function. Please take a look at the code below.

$(".play").click(function() {

   $currentSlidePlay = $currentSlide.attr("id");
   $currentSlidePlay.play();  

}); 

In other words, I would like to achieve this: $variable.play();

 

It would be great if someone can help me.

 

Thanks in regards!

 

Tim