Jump to content
Search Community

Problem using TweenMax in standalone (self containing) SVG file (ERR: Cannot set property 'cssText' of undefined)

SimonWidjaja 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

Hey guys. Can we still embed TweenMax in a self containing SVG file?

I took an almost empty SVG file and pasted the TweenMax runtime code into a script tag.

But I just get the error: "Uncaught TypeError: Cannot set property 'cssText' of undefined".

I did exactly the same with anime.js which worked without any problems.

I also saw this older tutorial by Chris Gannon (

It worked for him. Is that an older version or am I missing something important?

 

Any help highly appreciated!

--Simon

Link to comment
Share on other sites

Hi @mikel!

It's a general question. Just want to know if embedding GSAP (TweenMax runtime) in a self containing SVG is supported or not.

So the only code I have added to my svg is the GSAP code. No animation code yet. So during TweenMax runtime start I get the provided error "Uncaught TypeError: Cannot set property 'cssText' of undefined". I guess it must be caused during the registration process of GSAP on global/document/window level...

 

I would love to provide a sample (even though there is basically nothing in it ;) ) but codepen doesn't support a self containing SVG only HTML.

 

...I have attached the SVG file. If you open it in a browser you will see the error.


Cheers,

--Simon

 

gsap.svg

Link to comment
Share on other sites

yes. e.g. for offline usage.

And I think it doesn't even matter. Even if I link to a remote CDN version I will end up with the same error. I think it's not relevant how I embed the runtime but what the context/environment is (in this case  a self containing SVG, so no HTML DOM)...

Link to comment
Share on other sites

Ok thanks.

 

Quick update: I fully reconstructed Chris' version successfully. So 1.16.1 did NOT throw that error. Same with 2.0.0. 

So the problem only occurs on more recent GSAP versions...

 

One more update: TweenMax v2.0.2 seems to be the most recent one that does NOT throw that error. Everything newer throws it.

Edited by SimonWidjaja
Link to comment
Share on other sites

Very interesting! It looks like a bug in Firefox that refuses to allow access to an element's "style" when it was created using document.createElement()! Apparently Firefox only cooperates when it's created using document.createElementNS(). So weird! Like:

var element = document.createElement("a");
console.log(element.style); //undefined!

 

I have updated the next release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Oh, and you're supposed to wrap your JavaScript with <![CDATA[      ]]>

 

I have attached a resolved file with GSAP embedded, animating a simple <rect>. Does that help? 

 

 

gsap-fixed.svg

  • Like 2
Link to comment
Share on other sites

Thanks Jack, for providing that version.

But it's still not working.

Here are some more information:

+ I am also getting the error in Chrome (Version 73.0.3683.103 (Official Build) (64-bit) and Canary as well)

+ I am using CDATA wrapper

+ The source of the error seems to be line 2734:

a.style.cssText = "top:1px;opacity:.55;";

 

Link to comment
Share on other sites

Huh. The last post was based on the non-compressed version from aws.

I extracted the minified version from your provided file (gsap-fixed.svg) and now I don't see that error anymore. Very strange. I don't see any reason why the minified one should behave differently.

But I am happy, it's working ;)

Any idea when this version will be shipped? (I am doing some workshops so it would be nice to share that info as well)

Thanks for your amazing support!

  • Like 1
Link to comment
Share on other sites

I wonder if maybe you had a cached version of that uncompressed URL. At the top, does it say "DATE: 2019-04-25"? 

 

As for when we'll push this update out, I'm not sure quite yet. Probably in another couple of weeks. You're welcome to use that preview in the mean time, though. 

 

Glad things are workin' for ya! And I'd love to hear more about the workshops you're doing - are they GSAP-focused? 

  • Like 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.
×
×
  • Create New...