martinval
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by martinval
-
-
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.
animating width in dynamic vue component not working
in GSAP
Posted
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.