[animating width in dynamic vue component not working]

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.  

[animating width in dynamic vue component not working]

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.