# Recreate this gsap animation with PG Interactions?

**URL:** <https://forum.pinegrow.com/t/recreate-this-gsap-animation-with-pg-interactions/4884>\
**Category:** Pinegrow Interactions Add-on\
**Created:** [January 25, 2021, 12:45pm UTC](https://forum.pinegrow.com/t/recreate-this-gsap-animation-with-pg-interactions/4884 "2021-01-25T12:45:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [January 25, 2021, 12:45pm UTC](https://forum.pinegrow.com/t/recreate-this-gsap-animation-with-pg-interactions/4884/1 "2021-01-25T12:45:36Z")

</div>

Could anyone give me a hint on how to do this? There is this animation made with Gsap that I am trying to recreate with PG interactions tools.  
No luck so far.

https://codepen.io/GreenSock/embed/preview/bGeeRxg?height=300&slug-hash=bGeeRxg&default-tabs=js,result&host=https://codepen.io

Thanks!

---

<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 25, 2021, 1:07pm UTC](https://forum.pinegrow.com/t/recreate-this-gsap-animation-with-pg-interactions/4884/2 "2021-01-25T13:07:51Z")

</div>

Add interaction with trigger **Mousemove/Touchmove** \> **Animate X position**

And create 2 transition for translate X, for example one for 20% and another for -20%. And for the transition type keep the first one as **Set** and second one as **Tween**

---

<div class="post-metadata">

**Author:** ![red-rosefields](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/red-rosefields/32/5392_2.png) [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)\
**Post date:** [January 25, 2021, 1:29pm UTC](https://forum.pinegrow.com/t/recreate-this-gsap-animation-with-pg-interactions/4884/3 "2021-01-25T13:29:32Z")

</div>

Works like a charm, thanks man!

---

<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 25, 2021, 1:50pm UTC](https://forum.pinegrow.com/t/recreate-this-gsap-animation-with-pg-interactions/4884/4 "2021-01-25T13:50:34Z")

</div>

You are most welcome 🙂