svyar

Canvas animation in Vue.js

Recommended Posts

There are 4 same sized pictures that's I have cut in 4 equal parts, the problem is I can't make them animate on hover.  The part I have hovereda should become wider. 
I tried to make it this way - 

 

but this example doesn't work with reactive variables in Vue, I'd declared in object with coordinates.


 

Share this post


Link to post
Share on other sites

You can't say it doesn't work if there isn't any animation code.

 

Try making the animation work without Vue first. If you need help with canvas, check out this post, and everything it links to.

https://greensock.com/forums/topic/18873-animating-canvas-fillstyle-with-gsap/?tab=comments#comment-87524

 

And I'm pretty sure you can make a canvas animation reactive. These examples use state.

https://vuejs.org/v2/guide/transitioning-state.html

  • Like 4

Share this post


Link to post
Share on other sites

Looks like @OSUblake is taking over the Vue questions now.

 

I thought this topic was gonna be handled by Vue-Master @Dipscom. Where has he been hiding lately? Is his parking spot up for grabs?  🤔

  • Like 1
  • Haha 1

Share this post


Link to post
Share on other sites
1 hour ago, PointC said:

Looks like @OSUblake is taking over the Vue questions now.

 

Nah. I don't have a lot of experience with frameworks like Vue, Angular, React, etc. They're really just JavaScript questions.

  • Like 2

Share this post


Link to post
Share on other sites
16 hours ago, OSUblake said:

You can't say it doesn't work if there isn't any animation code.

 

Ditto. What have you tried that did not work previously?

 

15 hours ago, PointC said:

Where has he been hiding lately? Is his parking spot up for grabs?

 

Been hiding under a baby. For such small things, they are a handful... And no, my parking spot is definitely NOT up for grabs. My paternity leave (aka money) is coming to an end so, expect me back some point next week.

  • Like 3

Share this post


Link to post
Share on other sites
On 10/10/2018 at 9:59 PM, OSUblake said:

You can't say it doesn't work if there isn't any animation code.

 

Added animation code.

Share this post


Link to post
Share on other sites

Hi @svyar

 

Your coordinates were out of bounds, but it looks like you were able to figure it out. Not sure what type of effect you were going for, but you might be able to learn from this. 

 

 

 

  • Like 3

Share this post


Link to post
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.