# Yoyo function in pinegrow

**URL:** <https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [January 23, 2022, 11:21am UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177 "2022-01-23T11:21:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 23, 2022, 11:21am UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/1 "2022-01-23T11:21:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 23, 2022, 1:06pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/2 "2022-01-23T13:06:28Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/eb2f9aa1630f4b44580e755e9b2a6149d969fe97.png)  
Hope this helps,  
Bob

---

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 23, 2022, 1:30pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/3 "2022-01-23T13:30:58Z")

</div>

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](https://codepen.io/jvonasek/pen/avQKEb)

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 23, 2022, 1:46pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/4 "2022-01-23T13:46:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 23, 2022, 2:01pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/5 "2022-01-23T14:01:39Z")

</div>

Hi Bob, A screen capture if it helps 🙂

 ![Capture d’écran 2022-01-23 à 14.58.04](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/c/ca24e9bc0719015b37ae0810b41bad90663bc487.png)

---

<div class="post-metadata">

**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 23, 2022, 2:41pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/6 "2022-01-23T14:41:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 23, 2022, 3:08pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/7 "2022-01-23T15:08:39Z")

</div>

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 😉 How achieving this in pinegrow. Thanks for your support

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 24, 2022, 10:28am UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/8 "2022-01-24T10:28:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 24, 2022, 10:49am UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/9 "2022-01-24T10:49:40Z")

</div>

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](https://greensock.com/docs/v3/GSAP/Tween/yoyo()))  
Some help is welcome.  
Erik

---

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 25, 2022, 5:25pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/10 "2022-01-25T17:25:48Z")

</div>

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 !

---

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 25, 2022, 7:33pm UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/11 "2022-01-25T19:33:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![erik-k](https://avatars.discourse-cdn.com/v4/letter/e/c68b51/32.png) [@erik-k](https://forum.pinegrow.com/u/erik-k)\
**Post date:** [January 26, 2022, 7:27am UTC](https://forum.pinegrow.com/t/yoyo-function-in-pinegrow/6177/12 "2022-01-26T07:27:09Z")

</div>

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