Jump to content
Search Community

Canvas animation in Vue.js

svyar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.


 

See the Pen YJZmZd by naraxiss (@naraxiss) on CodePen

Link to comment
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 5
Link to comment
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
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...