Jump to content
Search Community

Run GSAP timelinemax embeded in a SVG

cedricz test
Moderator Tag

Go to solution Solved by cedricz,

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

Hello guys,

 

I am trying to export an SVG embeding animations and including Jquery, GSAP and some others libraries.

 

When i am opening the file produced in a browser i have an error on loading :

 

Chrome : Uncaught TypeError: Cannot read property 'opacity' of null  reader.svg:37

Firefox : TypeError: t.style is undefined Reader.svg:37

IE :  Fichier : SCRIPT5007: Unable to get the property "transform" a reference null or undefined    Reader.svg, line: 16, col: 3905

 

The error seems to point to the included code of TweenMax but it does not seem blocker and the rest of the code is executed ...

However, the animation is not played on Any Browser.

 

I just added the source of svg in codepen and it works ... I am so confused

 

 

Please, anyone know why my svg is not played in a browser

 

Thanks for your time

 

 

Regards

See the Pen HsrJn?editors=100 by anon (@anon) on CodePen

Link to comment
Share on other sites

I know you said the codepen works fine, but can you tell us how to reproduce the problem somehow? Are you saying to save the SVG into its own file and open it directly with a browser? If that's the case, how exactly are you including TweenMax in there? It'd be super helpful if you could tell us the exact steps necessary to reproduce the issue and we'd be happy to take a peek. 

Link to comment
Share on other sites

Hello,

 

Thanks for your quick answer. I will try to explain better.

All the code I put in codepen is actually the contents of my svg file.
I open the svg file directly in a browser (by clicking it) or opening after downloading.
I included the contents of the minified version of TweenMax file by creating a 
svg file using javascript and jquery $ .ajax function.

 

 

There a link to my svg file : http://213.245.128.155:85/reader.svg   because i can't upload an svg file there.

 

When open the file, it's run good the code but not same like codepen and don't anim my object, it's my problem.

 

I hope i was more clear about my problem

 

 

Thanks

Link to comment
Share on other sites

I just seen on yours errors somethings :

 

i dont use colorpicker, tipsy, selectize or globalshortcup, strange that have error on your log.

 

And i take the content of object with jquery and jquery json to parse a json string then i think that jquery is working 

 

Dont know why u have all this errors when load svg and don 't know why timelinemax run the animation but don't move the object like in codepen.

 

The alert with end is a oncomplete on the tweenmax anim runned by the timeline

 

 

P.S : I bet you noticed that English is not my first language

Link to comment
Share on other sites

please look at the actual code for TweenMax.min.js that you pasted into your svg. It seems that that very important characters are getting encoded improperly.

 

For instance look at just the first line

 

var _gsScope="undefined"!=typeof module&&module.exports&&

 

should be

 

var _gsScope="undefined"!=typeof module&&module.exports&&

 

When I view the source of your file in a browser or Sublime text, the file is littered with those & instead of just &.

This is happening to lots of other characters too like > and %lt; Same thing is happening to the massive chunk of jQuery you pasted in there too.

 

In other words, it is not coming through as valid JavaScript.

 

Please reference the file here: http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js to see how it should look

 

Side note: is it at all common for people to embed executable scripts inside a file that is seen primarily as an image? Seems like the scary type of stuff that could be easily abused. 

  • Like 1
Link to comment
Share on other sites

hello, 

 

I'm on this problem for 10 days while I tried everything you offer. What emerges is that there is always the same mistakes in the same place. 

 

Uncaught TypeError: Can not read property 'opacity' of null Reader.svg: 27 (chrome) 

TypeError: undefined is t.style TweenMax.min.js: 15 (with cdn on firefox) 

 

I need to produce a single file that is animated, which allows the svg format. 

This is also the case for a swf file. Is it really scary? Security is supported by the browser on the execution of scripts (normally except bugs). 

 

Otherwise what you advise me instead? Is this really a bad choice of a svg file will animate autonomous manner? 

 

Am I to understand that no one has to try to integrate Twenmax inside a SVG?

 

 

There a link to my svg file modifed : http://213.245.128.155:85/reader.svg

Link to comment
Share on other sites

Have you tried setting an initial opacity with GSAP using the set() method or setting the initial opacity property in your CSS <style> tag.. before you run your code?

TweenMax.set("#myElement", {opacity:0});

:

Plus it is really hard to debug your file since all the scripts are minified and you are using eval() so it is hard to test the file.

Link to comment
Share on other sites

Thanks, Cedricz. 

 

That is very helpful and exactly the thing we need to see. Like Jonathan said, it can be a little difficult focusing on the issue when there is a lot of other code in the way.

 

We actually have been digging a little deeper into this already.

My guess at this stage is that it is something that we can address on this end.

 

We will report back here when we have more info. Please give us some time as we have a tight schedule at the moment.

  • Like 1
Link to comment
Share on other sites

I don't think browsers support this, cedricz. For example, drop these lines into your SVG (in a <script>) and note the results:

var div = document.createElement("div");
console.log(div, div.style); //<div></div>, null

It doesn't matter what kind of element you create - the "style" is undefined which means CSSPlugin can't do its work. This isn't a GSAP problem - I think you're just trying to do some things directly inside an SVG file that it wasn't meant for. I wish I had better news.

  • Like 1
Link to comment
Share on other sites

Aha! I think I might have a solution, thanks to Jonathan who PM'd me about this (thanks Jonathan!) The key is to use createElementNS() instead of createElement(). The other problem was that in your file, you were trying to animate things that didn't exist yet - you should do something like window.onload = run so that your code doesn't run until the SVG nodes that you're trying to animate have been parsed. 

 

I have attached an early preview of TweenMax 1.14.3 which uses createElementNS() internally. When I dropped that in and corrected the problem in your file, it seemed to work. Please give it a shot and let us know how it goes. 

TweenMax_1.14.3_preview1.zip

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