Jump to content
Search Community

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

jeffdev test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

 

Link to comment
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
Link to comment
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 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...