# Animate target X by 100% of it's own width

**URL:** https://forum.pinegrow.com/t/animate-target-x-by-100-of-its-own-width/6979
**Category:** Pinegrow Interactions Add-on
**Created:** [September 21, 2022, 11:07am UTC](https://forum.pinegrow.com/t/animate-target-x-by-100-of-its-own-width/6979 "2022-09-21T11:07:58Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![mmelon](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mmelon](https://forum.pinegrow.com/u/mmelon)
#### Post date: [September 21, 2022, 11:07am UTC](https://forum.pinegrow.com/t/animate-target-x-by-100-of-its-own-width/6979/1 "2022-09-21T11:07:59Z")

</div>

Hi,  
I have a target ul that is the width of all of the inline LI’s inside. I want to do a pinned scroll scene to move it from 0% at the beginning, to -100% X so that it is offscreen. It seems to be using some other metric than it’s own width. When I find the right attribute to animate i would expect it to work on any width viewport.

thx for any help.  
Mike

---

<div class="post-metadata">

### Author: ![mmelon](https://avatars.discourse-cdn.com/v4/letter/m/54ee81/32.png) [@mmelon](https://forum.pinegrow.com/u/mmelon)
#### Post date: [September 21, 2022, 12:14pm UTC](https://forum.pinegrow.com/t/animate-target-x-by-100-of-its-own-width/6979/2 "2022-09-21T12:14:59Z")

</div>

should this work as the property for x:

“-”+${target.innerWidth}+“px”

---

<div class="post-metadata">

### Author: ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)
#### Post date: [September 22, 2022, 11:44pm UTC](https://forum.pinegrow.com/t/animate-target-x-by-100-of-its-own-width/6979/3 "2022-09-22T23:44:14Z")

</div>

@mmelon use the X% and Y% animation properties to transform by % of element own size.

Here is a quick example:

https://pinegrow.online/@matjaz/transform-based-on-its-own-size/