Why does onUp not work?

[FrEZ 0 Likes (Newbie)]

The codepen is self expanatory.

See the Pen NWByoop?editors=1111 by FrEZy (@FrEZy) on CodePen

[akapowl 5,140 Likes (Superhero)]

 

As you can see from the logs I added in the onUp and onDown callbacks, Observer's onUp works just fine - what fails is your custom logic.

 

You are getting an error in console that points you to what is wrong

 

funcs[index] is not a function

 

If you log out the different indexes you are working with, you will notice that you are pointing towards an item of an array with a negative value for the index in multiple occasions, and arrays inherently do not have / work with negative indexes. So you will need to rework your logic with that regard, to make it work.

 

BTW, you have a typo in your Observer: targer --> target

 

See the Pen poZLjpZ by akapowl (@akapowl) on CodePen

 

 

Edit:

One suggestion I have is taking a look at GSAP's utility methods.

 

Here is an example of how you could e.g. use .wrap() to wrap around your variable value to the last one in your array, if it becomes negative. Click anywhere on the body in this example to decrease the variable I'm working with by 1.

 

See the Pen QWBmjJB by akapowl (@akapowl) on CodePen

 

 

... the wrapping also works in the positive direction, btw.

 

See the Pen QWBmyLJ by akapowl (@akapowl) on CodePen

 

 

[FrEZ 0 Likes (Newbie)]

2 hours ago, akapowl said:

 

As you can see from the logs I added in the onUp and onDown callbacks, Observer's onUp works just fine - what fails is your custom logic.

 

You are getting an error in console that points you to what is wrong

 

funcs[index] is not a function

 

If you log out the different indexes you are working with, you will notice that you are pointing towards an item of an array with a negative value for the index in multiple occasions, and arrays inherently do not have / work with negative indexes. So you will need to rework your logic with that regard, to make it work.

 

BTW, you have a typo in your Observer: targer --> target

 

 

 

 

 

Edit:

One suggestion I have is taking a look at GSAP's utility methods.

 

Here is an example of how you could e.g. use .wrap() to wrap around your variable value to the last one in your array, if it becomes negative. Click anywhere on the body in this example to decrease the variable I'm working with by 1.

 

 

 

 

 

... the wrapping also works in the positive direction, btw.

 

 

 

 

 

Thanks for the reply! Wrapping fixes most of it! My current issue is calling the timeline a second time. For example, when I call onDown, it does the animation, but when I call it again, it doesn't. I believe that that's an issue from calling a timeline twice? Could possibly be having issue with the reverse method. Any idea on how to fix it? Thanks! Please make sure to check out the updated codepen 

See the Pen NWByoop?editors=1111 by FrEZy (@FrEZy) on CodePen

[akapowl 5,140 Likes (Superhero)]

 

Sorry, but I don't have the time to wade through all that logic, especially since I can't even imagine what outcome you expect and your initial setup in combination with the elements then suddenly jumping off-screen before tweening in, doesn't make that much sense to me.

 

Also it is quite a bit out of scope from what to expect from this forum, please see the Forum Guidelines.

 

From what it looks like to me, you are creating your timelines upfront and then only adding more and more tweens to them when calling your functions - not sure how much that does affect things, but that doesn't look quite right to me.

 

I'm also not sure you need functions to begin with; couldn't you just create your timelines upfront and iterate through those pre-made timelines in your logic. For your convenience, here is a rather simple example with the logic transfered to click-events rather than scrolling.

 

See the Pen OJwvXYz by akapowl (@akapowl) on CodePen

 

[Cassie 5,148 Likes (Superhero)]

Quote

couldn't you just create your timelines upfront and iterate through those pre-made timelines in your logic. For your convenience, here is a rather simple example with the logic transfered to click-events rather than scrolling.

 

That's exactly what I suggested here yesterday - It seems like we're going around in circles and covering the same ground in multiple threads at the moment.

 

[FrEZ 0 Likes (Newbie)]

5 hours ago, Cassie said:

 

That's exactly what I suggested here yesterday - It seems like we're going around in circles and covering the same ground in multiple threads at the moment.

 

Well, for some reason I understood it better from this person and managed to do it