Yoyo function in pinegrow

Hi, continuing practicing pinegrow interaction. More easy than typing code. I want to loop an animation back and forth in gsap it is the “yoyo” funtcion and how do you call it and where is it in pinegrow ? Thanks in advance

Hi @erik-k,
Not completely positive that this is what you want, but under advanced options there is a checkbox for “Alternate forward/reverse”.


Hope this helps,
Bob

Hi Bob. No success with this. Here is an example with this URL to see what I want to achieve
https://codepen.io/jvonasek/pen/avQKEb

Hi @erik-k,
I would have to see your exact Interaction animation to provide further trouble-shooting. Do you have the Repeat set to -1?
Cheers,
Bob

Hi Bob, A screen capture if it helps :slight_smile:

When creating complex animations you can do a lot just from Timeline editor, just by adding more transitions.

Like you have transition for Transform Y = 40 now you can add another transition for Transform Y = 0

So now you can get animation that goes from 0 to 40 and back to 0 and use it with your repeat animation.

Hi Abirana,
But in my case I want my object to move from +40 to -40. In gsap I just add a line of code => ‘yoyo = true;’ and that’s it, no jumping in the animation :wink: How achieving this in pinegrow. Thanks for your support

Hi @erik-k,
For a larger transform, just add Transform Y = -40 for your second transition. Where is the jumping occuring?
Cheers,
Bob

Hi Bob
Yes still jumping. I trying that cause in this scenario the playhead jump back to x=40. Very surprised that a so simple animation is so hard to achieve in pinegrow. In gsap this “yoyo” function is “false” by default just type '“true” and let’s go !!
Maybe pinegrow dev doesn’t integrate this function.
(Docs - GreenSock)
Some help is welcome.
Erik

Hi, after several attempts still no success with this. It seems there is a bug with the checkbox “Alternate forward/reverse” in the advanced options. Can the dev team confirm ? Thanks in advance !

Hi @erik-k
It is a little hard to troubleshoot descriptions. Can you at least give some screenshots to show what you are trying? Here is a GreenSock thread about troubles with yoyo. It seems like the solutions suggest adding Power1.easeInOut.
I agree with you that the alternate doesn’t seem to work if you have a repeat of -1. We will look into it.
My best attempt of making it smooth has been to have 3 blocks of animation. The first transforms it the entire distance (for example 60) one direction. The next transforms the entire distance the other direction (ex. -60). The final animation transforms back to the original - 0. Animations 1 and 2 are 1 second each in duration, and the 3rd is 0.5sec. the pause is very miniscule - no jump when it repeats.
Cheers,
Bob

Hi Bob,
Thanks for your answer and advice. I will give it a try and good bug hunting !
All the best
Erik