martinval

Yes, I will do once I have a little spare time. in the meantime, I have found a workaround by creating 3 seperate components for each of the arrows and have distinct id's and timelines inside each of them.

Hi there, I'd like to animate 3 arrows that are part of a vue application page. The parent component has a list of 3 child components that look like this: <div id="arrow1" style="width:36rem"> <div class="a1 v1"><PipeArrow :width="32" :content="content.tabs[0]" :color="color1" /></div> </div> Inside thie child component the arrows are 2 divs, one of which is absolutely positioned behind the other. The arrow head is made with css. I'd like to animate each arrow from a width 0 to its respective size, but nothing happens, no errors in the console. I can confirm that the set up works because this animation works: let tl = gsap.timeline(); tl.from('#arrow1', { x: -50, duration: 2, opacity:0, ease: "power4.out"}) but this one does not: let tl = gsap.timeline(); tl.fromTo('#arrow1', {width: '0px'}, {width: '36rem', duration: 2, ease: "power4.out"}); I can get a simple div to resize as expected on the page, so I imagine this has to do with some of the dynamic aspects or with the absolute positioning on the page. I've also tried to animated inside the child component. I can get the arrow to animate, but because there are 3 of them, they all pick up the size of the last value passed, so that of the third arrow. Thanks for any pointers from anyone that has made something similar work.