Jump to content
GreenSock

holy-script

Vue 3 GSAP Sprite Animation Bug when using FLIP Plugin

Moderator Tag
Go to solution Solved by holy-script,

Recommended Posts

Hiya!

I've very recently discovered the awesome world of GSAP and its separately amazing plugins. Very innovative, very well thought out, and the effort of the development team just shines through. It's been a really fun ride, and I'm looking forward to continued adventures with this package!

I dabbled a bit in animating sprites in the DOM elements (not canvas) and working with GSAP was a like cool breeze. When I stepped it up a notch, trying to move the animating spritesheet across the page, I used the FLIP Plugin, which totally works like magic, but through some thorough observation I came across a little bug, I believe, or it may simply be me incorrectly or incompletely using some syntax.

The sprite is supposed to change containers (divs) on a click event, and while I pause and play the animation before and after dynamically moving it about, on some instances, the target element (img) obtains an extra CSS property of "transform: translate(-50%, 0%)" along with the necessary sprite animation transforms. This happens with both the original and the new container elements, and although I presume this happens because of FLIP, I am unable to figure out how or why it does and any changes I can do to alleviate it.

I have attached the link to a CodePen with the basic implementation using Vue 3, and a screenshot of the error happening with the targeted element's property added. The error can be recreated by clicking the sprite a few times - I do not understand what causes it, but it does certainly happen, and one will see the animation falter when it does.

Any advice or help will be much appreciated 😀

error.png

See the Pen bGayPYq by bleh-bleh-bleh (@bleh-bleh-bleh) on CodePen

Link to comment
Share on other sites

Welcome to the forums @holy-script

 

I'm not sure what exactly is happening, but changing around the DOM like that in a library is supposed to manage the DOM is probably not a good idea. It's going to create similar issues to React.

 

 

And another issue is  probably due to the fact that you are Flipping the same element you are animating to frames for, meaning both might have a x animation at the same time. You should Flip a container intsead of the same element you are changing the frames on. 

 

  • Like 1
Link to comment
Share on other sites

  • Solution

Aptly put points, and I'm really thankful for the insights - couldn't have gotten to the solution without them.

Firstly, the DOM manipulation was plain wrong. I saw to it and switched that method out with the Vue 3 Teleport Component. This rabbit hole went deep, though. Turns out, with Template, I could generalize the movement locations in the DOM, have more than one, and swapping them out became plain easy. However, FLIP no longer worked as expected.

Secondly, the issue did turn out to be because of conflicting transforms on the sprite, so I took your advice and started moving about the whole container instead - and voilà! No more faltering animations. But, like I said FLIP didn't work now, and I couldn't figure out why at first. Had to take a deep dive in the Vue 3 docs and the source code to find out how differently it worked than my previous rudimentary approach.

Turns out, the only thing that matters is that DOM's changes like this through the framework are asynchronous - I noticed this when I set the FLIP target to spin and move, along with an experimental setTimeout call to FLIP, which worked, but wasn't reliable. In the end, all I had to do was add the FLIP animation as a callback through Vue's update lifecycle method and a this.$nextTick call, which implemented FLIP after the element was moved.

I'm glad to say everything now works as expected, is definitely scalable and follows conventions. Plus, I learned a bunch of new stuff!
Here's a CodePen for my final demonstration.

See the Pen VwyJWro by bleh-bleh-bleh (@bleh-bleh-bleh) on CodePen



Appreciate all the help! 👏

  • Like 2
Link to comment
Share on other sites

Looks good! Thanks for sharing.

  • Haha 1
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.
×