Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

jeffdev

Members
  • Content Count

    1
  • Joined

  • Last visited

Everything posted by jeffdev

  1. 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!!
×