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!!
