Questions about the progress of the timeline.

[PlasticKernel]

Hi, I’m a beginner who has just started learning GSAP. I came across a really great example in the docs:

https://greensock.com/docs/v3/HelperFunctions#loop

I would like to write a similar function, but understanding and modifying the code inside it is very challenging for me right now.

Currently, I have been experimenting with writing some code based on the example in the documentation, but the result doesn’t meet my expectations. I have encountered several issues, such as:

When triggering onDragEnd, if the value of progress is less than 0, it is adjusted to a value greater than 0 but less than 1 due to the wrap function. I want the fromTo animation to play counterclockwise, but it often ends up playing clockwise. The opposite situation can also occur. I am unsure about the working logic of progress exceeding 1 or being less than 0 in the context of the timeline. If you could answer my question, I would greatly appreciate it. This has been bothering me for a week.

This is my CodePen, and if you drag in a full circle, it will reproduce the issues I mentioned.

See the Pen zYyOpgQ by gpjvodti-the-looper (@gpjvodti-the-looper) on CodePen

[GreenSock]

32 minutes ago, PlasticKernel said:

if the value of progress is less than 0

An animation's progress can never be less than 0. It should always be between 0 and 1.

 

34 minutes ago, PlasticKernel said:

if you drag in a full circle, it will reproduce the issues I mentioned.

What do you mean "in a full circle"? It look like it only goes horizontally. Do you mean all the way in one direction so you get to the loop spot?

 

It sounds like you're running into logic issues related to infinite loops. For example, if a value goes from 0 -> 100 and you try to go forward from 80 to 20, that would mean it goes from 80 -> 100 and then instantly has to jump to 0 and proceed to 20. Likewise, if you want it to go in the opposite direction and you start at 20, it must go down to 0 and then jump up to 100 and go backwards to 80. That's essentially what the helper function does internally to do its infinite looping. If you're trying to replicate that on your own outside that function, you'll need to follow that concept, like mapping the direction of the values and then creating 2 sequenced tweens accordingly. It's beyond the scope of help we can provide in these free forums which are focused on GSAP-specific questions (like about the API) rather than logic and custom consulting services, but we do offer paid consulting if you'd like to contact us about that. Or you can post in the "Jobs & Freelance" forum. 

 

Good luck!