Jump to content


CSSPlugin.js, NS_ERROR_FAILURE and SVG's using Vue.js

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



I'm using TweenMax inside a Vue.js SFC - https://vuejs.org/v2/guide/single-file-components.html


It's a Spinner component I re-use throughout our app. As soon as I visit a page using vuejs router - https://router.vuejs.org/

that has a spinner component in it and then go to another page, on return to the previous page, the animation no longer works and I get tons of errors that increment really fast in the console.


It may be related to this if vue.js is hiding it for reuse -

I'm not sure if I should be troubleshooting in this forum or vue.js




Screenshot from 2018-06-05 20-48-24.png

See the Pen MXewRb by ghenry (@ghenry) on CodePen

Link to comment
Share on other sites

Welcome to the forums, @ghenry. Sorry to hear about the trouble. I can't seem to replicate that issue with your codepen - is there anything special I need to do? 


Also, what version of GSAP are you using? I'd definitely recommend using the latest. 


If there's any way to provide a reduced test case (ideally in codepen), that'd go a LONG way in helping troubleshoot this. I know you provided a codepen - I just can't see any issues there, so perhaps I'm missing something. 

  • Like 1
Link to comment
Share on other sites

Thanks. I'm on the latest v2.


I'm doing a codesandbox now.

Link to comment
Share on other sites

I tried clicking around a ton and I can't reproduce the problem. I just go to https://codesandbox.io/embed/433z7lx7o7 and click the 3 links in various order, right? Is anyone else able to see an error? Maybe I'm missing something obvious. 

Link to comment
Share on other sites

I've only tested on Firefox, but it only takes a few seconds to trigger for me. Just go from first to last and back again.


I'll look into using the vue.js beforeDestroy hook to stop animation, but initially I thought it was related to this https://github.com/vuejs/vue/issues/7050

Link to comment
Share on other sites

Done. Added:


beforeDestroy() {
console.log("Destroying Tweens..")
  • Like 1
Link to comment
Share on other sites

Great - so you're all set? Just making sure that you meant the beforeDestroy() fixed things. 

  • Thanks 1
Link to comment
Share on other sites

Yeah, killing all Tweens (should have realised to be honest) as the component gets unloaded fixes it. Sometimes you forget the simple things.

  • 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.