Jump to content
Search Community

animating width in dynamic vue component not working

martinval test
Moderator Tag

Recommended Posts

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: -50duration: 2opacity:0ease: "power4.out"})

 

but this one does not:

let tl = gsap.timeline(); 
           tl.fromTo('#arrow1', {width: '0px'}, {width: '36rem'duration: 2ease: "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. 

arrows.png

Link to comment
Share on other sites

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!!!

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...