[Custom slider - How do I control my timeline with it?]

Hi everyone!

 

I'm currently working on a vue project where I use a custom slider (vue-component-slider).

 

What I basically currently doing is - In my slider component I send sliderValue (e.g INT: 5) to my animation component where I have my elements I want to animate. So In that component I have a simple timeline which I want to control with the sliderValue as input.

 

Being kind of new to GSAP and been testing aaaaalot of examples, can someone perhaps give me some help/advice or guide me to right place?

 

This is how my timeline looks today (side note: myFunction is being called everytime the slider moves):

 

          myFunction : function(inputValue) {

            let tl = new TimelineLite();

            //Set initial tl state to inputValue
            let progress = tl.progress(inputValue);

                tl
                .to( '#el-1', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-2', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-3', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-4', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-5', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-6', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-7', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-8', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-9', 0.5, {opacity: 0,  ease: Elastic.easeInOut})
                .to( '#el-10', 0.5, {opacity: 0,  ease: Elastic.easeInOut})

            //When this function gets called agian, go to inputValue
            tl.progress(inputValue)

          }

So this timeline works good. All elements gets hidden in a chronological order. But after that initial timeline run I want to be able to go back or forward in the timeline based on the input value.

 

 

Any suggestions? Thanks!!