martinval Posted November 25, 2020 Share Posted November 25, 2020 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 25, 2020 Share Posted November 25, 2020 Hi and welcome to the GreenSock forums. Could you setup a live reduced sample in codesandbox in order to have a better look at it? https://codesandbox.io/ They have a VueJS template based (I believe in Vue CLI) so setting it up is not too complicated. This is a simple example of a GSAP app with Vue in codesandbox, feel free to fork it and adapt it to your scenario: https://codesandbox.io/s/l261n378km Happy Tweening!!! 2 Link to comment Share on other sites More sharing options...
martinval Posted November 26, 2020 Author Share Posted November 26, 2020 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now