Jump to content
GreenSock

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

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

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

First of all, welcome to the forums @jeffdev!

 

A few things...

  1. If myFunction() is just supposed to adjust the progress of the animation, you should definitely create the TimelineLite OUTSIDE of that function and simply set tl.progress(inputValue) in myFunction(). Currently it sounds like you're re-creating the timeline every...single...time the a drag event occurs. That's not only very wasteful, but you'll get odd effects because your values will all be skewed because the starting values would be whatever they are at that particular time. So, for example, if opacity starts at 1 and you're animating to 0, the first time will be correct, and let's say you set inputValue to 0.5 (and let's use Linear easing to make this simple)...that means opacity will be 0.5. Then on the very next drag event, it'll re-create the whole timeline again, and you're animating to 0 again but this time the "from" values will be 0.5 because that's what they are at the monent. So if you set progress to 0.5 at that point, opacity will get set to 0.25 (halfway between 0.5 and 0 is 0.25). See the problem? So just create the timeline ONCE (outside myFunction()) and you'll be golden. 
  2. It seems very odd to me that you're using an Elastic.easeInOut for animating opacity. Remember, elastic values shoot PAST the starting/ending values, but that's nonsensical for opacity (what would -0.3 or 1.25 be???). I mean it's totally fine in terms of GSAP to do that...I just thought logically it was odd. 
  3. You're writing a lot of to() calls there, but you could probably handle this with much less code using a staggerTo() call. See https://greensock.com/docs/TimelineLite/staggerTo()

I hope that helps. Happy tweening!

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Whoa!! another slider controlled GSAP instance question, using a reactive library??

hqdefault.jpg

 

Deja Vue :D 

 

As Jack points, it would be better to move the GSAP instance to the data callback in order to access it everywhere in the component. Also you can populate it in the mounted method, using $refs.

 

Hopefully this sample comes close to what you need:

https://codesandbox.io/s/0yr5oko6pl

 

Feel free to fork it and accommodate it to your scenario.

 

Now I'll go for a drive:

 

giphy.gif

 

Happy Tweening!!

 

 

 

  • Thanks 1
  • Haha 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×